Setup Development Environment for React Native in Windows using React Native CLI

React Native Cli Quick Start

Install Chocolatey on windows:

It is recommended by react native docs to use Chocolatey to install node.js and java runtime to your Windows system.

If you don't have Chocolatey installed, you can head over to the Chocolatey install page or follow the steps below:

1. Open up a Powershell window as administrator and type:

    Get-ExecutionPolicy
   

   It should return Unrestricted. If not, type the following command

    Set-ExecutionPolicy AllSigned
   

   and press y to yes.

2. Then paste the following command to install Chocolatey

    Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
   

   If there's no error, you can type and check if Chocolatey has been properly installed or not

    choco -v
   

Install Node, JDK, and Android Studio

Install Node and Jdk

Now, after installing Chocolatey, you can easily install Node and JDK to your system by using the following command:

choco install -y nodejs-lts microsoft-openjdk11

Install Android Studio

Head over to the Android Studio page and download the latest stable version.

After that, install Android Studio by clicking next and make sure all the checkboxes are selected (e.g.. Android SDK, Android SDK platform).

After successful installation, proceed with the following steps:

• Install Required SDKs:

  Open Android Studio and click on the More Actions button, then press SDK Manager

  

  Then check the required SDKs

  1. Android 13 (Tiramisu)

  2. Android API 34

This will install the required packages

• After that, head over to the SDK tools tab and check the required tools and download them:

  1. Android SDK Build tools 34

  2. Android SDK command line tools

  3. Android Emulator

  4. Android Emulator Hypervisor Driver

  5. Android SDK platform tools

  6. Google Play Licensing Library

  7. Intel x86 emulator accelerator (HAXM installer)

Add Environment Variable

• Open your start and search for the following app: Edit the system environment variables

  

• Then click on the environment variables button

• 

• On the screen, add a new environment variable by clicking on "New".

  1. Give the variable name ANDROID_HOME and set the value as C:\Users\<USER_NAME>\AppData\Local\Android\Sdk

     Place the user name as appropriate to your system

     

• Now on the User Variable section again add a few variable values under the "path" variable

  1. C:\Users\Asus\AppData\Local\Android\Sdk\platform-tools

  2. C:\Users\Asus\AppData\Local\Android\Sdk\tools

  3. C:\Users\Asus\AppData\Local\Android\Sdk\tools\bin

  4. C:\Users\Asus\AppData\Local\Android\Sdk\emulator

     

• Now on the system variable section, check if paths are added for JDK or not

  

  If not, add an environment variable JAVA_HOME and enter the value as C:\Program Files\Microsoft\jdk-11.0.18.10-hotspot\

  

  Also, check if under system variables, inside the path variable, these URLs are added or not

  1. C:\Program Files\Microsoft\jdk-11.0.18.10-hotspot\bin

  2. C:\Program Files\AdoptOpenJDK\jdk-15.0.2.7-hotspot\bin

Create Your First React Native Project

Create New Application

Enter the Following Command to create your first project

npx react-native@latest init MyFirstReactNativeProject

After that, you can start your project by npm run android .

While running the app you can face some errors. First Check inside your project directory find the android folder and inside that check if there's a file named local.properties available or not. if not create a file on the same name and add the below code.

sdk.dir = C:\\Users\\<USER_NAME>\\AppData\\Local\\Android\\Sdk

Add the appropriate system username there and save and run the npm run android again.

Connect with your physical device

To test your code, you can use Android Studio or your physical device. Here I will show you how to connect to your device and debug the code.

Device Settings

Open your device settings and head over to the developer setting. If you don't have that, search your build number and click It five times consecutively, that should unlock it.

After that, on developer options, enable USB Debugging and Install Via USB option.

Make sure your device is connected to your computer through USB

Now open Powershell as administrator

on Powershell type command:

adb devices

After that, a list of devices should pop up. Identify your device and copy the device ID.

Then press the following command:

adb -s <DEVICE_ID> reverse tcp:8081 tcp:8081

After that, your device should be accessible and the app can be downloaded via USB debugging.

On your Project, run npm run android and your React native app should be running.

Finally!

Setting up your project through React native CLI can be tough at first, but it's worth it.

Here is the list of resources you can follow

Resources

1. React Native Docs

2. Hitesh Chowdhary React Native Course

3. React Native Road Map