Running Your First React-Native app on Android device.

With the help of this article, you will learn to launch your first react-native app and print "Hello World". Follow this article step by step and don't worry i'll be performing these step with you too ;)

Pre-Requisites:

NodeJS Installed on your device.
Java11 JDK.
Android Studio and Android-SDK installed on devices.
All PATH for Java JDK, Android Studio and Android-SDK added correctly.
a simple USB cable/charger wire to connect the PC and Android Device.

USB Debugging enabled in your android device.

Checking all the software are installed or not :

Open up CMD ( Command Prompt ) and type

Type " Java --version ". This will show the version of the java JDK installed on the device.

Type " adb devices ". this will show the devices which are connected to PC. ( in my case this is showing the emulator running using android studio in my system. if i connect the android device then it will also show the device.

Step 1 :

Open up CMD (command prompt) on your devices by simply typing "CMD" in search.

type in this simple command : " npx react-native init < Your Project Name > ". Here i name the project as " MyProject ". This command will start to install the react native in the directory and will download and install all the required dependencies and will create a folder with the name of < Your Project Name>.

Step 2 :

Open up your IDE, here i will be using Visual Studio Code.

Now, simply Drag and Drop the folder that is created or open it using the file menu of the VS code.

To Simply open the terminal in the vscode by simply pressing " CTRL + ~ " on your key-board ( in some cases it is " CTRL + SHIFT + ~ " ) or you can simply select open "new terminal option" in "Terminal" in menu.

After opening the terminal, type in these commands

adb devices

To check whether the Android Emulator/Devices are connected or not.

npx react-native run-android

This will start the process of installing the application on the connected device. Make sure that you have opened the directory to < Your Project Name > Folder , other wise the command will not be executed successfully.

After running this command in a few seconds (depending on the device) another window will open. type "a" and the installation process will begin and soon the app will be installed on the Emulator / Android Device, just make sure that you have connected a Android device via USB or have a emulator running.

in a matter of few seconds( depending on your device, be pateint in meanwhile ) the first React native APP will be successfully installed on your device(s).

There you go, You and I both created and installed a very React-Native app on our devices together. YAY !!!

Another thing :

You may encounter some errors while running your react-native app using VSCode.

This may occur due to any problem, and to solve this problem

Follow these Steps :

Click on the Android folder in your vs code file explorer.
Select the "Android" folder and Create a file named "local.properties". Create this file using the "create file button" or by right-clicking the "Android" folder.
Now, in this local.properties file type this ...

org.gradle.java.home ="C:\Program Files\OpenLogic\jdk-11.0.20.8-hotspot\"
sdk.dir = C:\\Users\\USERNAME\\AppData\\Local\\Android\\Sdk

This is the path of the Android SDK and JAVA JDK which is set in the device, You can copy and paste the same from the "edit environment variable", Make sure to use this format and use double Backslash
Save the file and re-run the app, you won't face any initial problems.

Thank you for this Read, I hope this helped you in a way and I will be posting some more blogs soon hopefully. HAPPY CODING!!. Jai Hind.