A Beginner's Guide to React Native on Linux: Installing and Creating a 'Hello World' App

1. Installing Java on your PC

First, you need to ensure that Java is installed. One way to check if Java is installed is by running the command "java --version" in the terminal.

java --version

If the output shows a version of OpenJDK, such as "openjdk version "11.0.11" 2021-04-20", then Java is installed and ready to use.

openjdk version "11.0.11" 2021-04-20
OpenJDK Runtime Environment (build 11.0.11+9-Ubuntu-0ubuntu2)
OpenJDK 64-Bit Server VM (build 11.0.11+9-Ubuntu-0ubuntu2, mixed mode)

However, if the output shows "command not found", then Java is not installed on your computer and you will need to install it. To install Java, you can use the command "sudo apt install default-jre" in the terminal. This command installs the default Java runtime environment on Ubuntu-based systems.

sudo apt install default-jre

---

You can install the NODE JS using the below command

sudo apt install nodejs

After installation check, if it is installed properly or not using the below command

node -v

2. Installing Android Studio

We don't use Android Studio in the projects but we need ADB (Android Debug Bridge ) to communicate with android devices.

To install ADB (Android Debug Bridge) on your computer, you need to download Android Studio from the link https://developer.android.com/studio. Once the download is complete, extract the .tar.gz file using the command

tar -xzf downloaded_file.tar.gz

Then, open the terminal and navigate to the android-studio/bin directory using the command cd android-studio/bin. Next, run the command ./studio.sh to start the installation process. This may take some time to complete.

cd android-studio
cd bin
./studio.sh

Once the installation is finished, close the Android Studio app. To check if ADB is installed correctly, open the terminal and run the command adb --version. If you see the version number, ADB is installed and ready to use.

adb --version

If the command is not found, you need to set the environment variables. Based on your shell, open the .bashrc or .zshrc file and add the following line: export PATH=${PATH}:$HOME/Android/Sdk/platform-tools/.

export PATH=${PATH}:$HOME/Android/Sdk/platform-tools/

Make sure to change the path if Android Studio was installed in a different location.

3. Creating the first App

Open your terminal and use the below command to create the project in React Native

npx react-native init Awesome01

Here:

• npx: Node Package Execute

• Awesome01: Project Name

To enable display on your Android device's screen, follow these steps:

1. Open the settings app on your device.

2. Go to the "About Phone" section.

3. On Redmi devices, tap on the "MIUI version" option repeatedly (5 times) until you see a message that says "You are now a developer."

4. Go back to the main settings menu, and you should now see a new option called "Developer Options."

5. Connect your Android device to your PC via a USB cable.

6. In the Developer Options menu on your device, enable the "USB debugging" option and "File Transfer" option

7. Now, you should be able to display the screen of your android device on your computer.

To check wheater your mobile is connected to your PC or not open the terminal and type adb devices, if you can see the devices now you are good to go.

If your Android device has some optimizations for the native Google Android operating system, it is recommended to turn off MIUI optimization (for Redmi devices) to ensure proper functionality when using ADB. To do this, follow these steps:

1. Go to the "Developer Options" menu on your device.

2. Look for the "MIUI optimization" option and turn it off.

3. Restart your device to ensure the changes take effect.

It's important to note that the exact steps may vary depending on your device's model, if your device is not Redmi follow the guidelines specific to your device. After turning off any optimization, reboot your device to ensure that the changes take effect.

Open the project which you have creates earlier and create a new file with the name local.properties in android folder and add below mentioned path of andorid sdk

sdk.dir = ~/Android/Sdk

Please note that in case you have installed android studio in any other location other than the default location, the path will be different.

Use the below command to run the react-native app

npx react-native start

The process of creating an app will take some time to create the App.

If you want to experiment with this, change the default text in App.tsx and then test the app on your device.