Step by step guide to setup React-native in windows using Android Studio and NodeJS
How to setup React-native in windows using Android Studio and NodeJS

I started working on React Native recently. The very first roadblock I came across was configuring React Native on my machine. Since I had minimal working knowledge of Android studio as well as Node JS it took me a few days to figure this out. I am sharing my learning in this blog post to help you fast track your initial setup.

There are multiple ways to set up a react native environment, such as using Expo CLI or React native CLI. However, this blog gives a glimpse into setting up  React native CLI. The development operating system that we shall be using is Windows; meanwhile the Target Operating System will be Android.
 

For this we need a Code editor like VS code and dependencies (JDK, Node, React native command line interface and android studio).

Here’s your step-by-step guide to set up React Native in Windows using Android Studio and Node.

Step 1:

(a) Install Java JDK 15

Use the below link to download Windows x64 installer-
https://www.oracle.com/java/technologies/javase/jdk15-archive-downloads.html

Here’s a screenshot of how this may appear.

jdk installer for windows

(b) Install downloaded JDK by following instructions.
(c) Next we are going to set environmental variable. Press windows key and search “Edit environment variables,” and open it.

Edit environmental variable for your account in search bar

(d) In the User variable section, click new, as shown in the screenshot below.

user variables of your system

After clicking New, You will get screen like this-

New user variable creation form

Fill variable name as ‘JAVA_HOME’ (Without single quote).For Variable value, open your C drive -> Program files -> Java -> jdk-15.0.2  and copy that path as shown below.
Variable value : - ‘C:\Program Files\Java\jdk-15.0.2’ (Without Single quote)

Filled form for new user variable for jdk

Once you press OK, you can see your variable in the user variable section (Refer to the image shown below).

final view of jdk variable in user variable section

 

Step 2 : 

(a) Install NodeJs (if not already installed)
Use the link given below to download the LTS version of Node(Recommended).
https://nodejs.org/en/

Node js installer for windows

(b) Install downloaded NodeJs by following instructions.

 

Step 3:

(a) Install React Native CLI

To do so, follow the below mentioned set of instructions-

  • Open Windows Terminal
  • Run command : - node -v
  • Check whether node is installed correctly or not by running command : - node -v 

    Command to check node version
     
  • Run Command : - npm install -g react-native-cli (To install React native CLI)

    react native installation command
     
  • Close the terminal

 

Step 4:

(a) Install Android studio
Use the link given below to download Android Studio-
https://developer.android.com/studio

Android studio installer
 

(b) Install android studio by following below mentioned set of instructions:

  • Open android studio and click ‘tools’

    android studio tools
     
  • Now click on SDK Manager

    SDK manager tab in android studio
     
  • Install your required android version

    List of android versions in android studio
     
  • Again click on Tools and open AVD  Manager

    Create virtual device
  • Click on ‘Create Virtual Device’
  • Choose Device definition and click next
  • Choose system image and click next
  • Verify configuration and click finish.

Once you’re done with the installation, you will be able to see your device in Android Virtual Device Manager as shown in the image below.

List of virtual devices

In the next step,  we are going to set environmental variable. For that, press windows key and search “Edit environment variables” and open it.

environmental variable for your account in search bar

Follow the below set of instructions to continue further: In the User variable section, click new as shown in the screenshot below.

user variables of your system

After you’ve clicked  New, a screen like the image shown below appears on your screen.

New user variable creation form

  • Fill variable name as ‘ANDROID_HOME’ (Without single quote)
  • For Variable value, open your C drive -> Users -> {Your_pc_name} -> AppData -> Local -> Android -> Sdk  and copy that path.
  • Variable value shall be - ‘C:\Users\HP\AppData\Local\Android\Sdk’ (Without Single quote)

    Filled form for new user variable for android
  • After you click Ok, you shall be able to see your variable in the user variable section.
    final view of android variable in user variable section

 

Step 5:

(a) Create new React Native Project

Follow the steps as mentioned below-

  • Open terminal
  • Change the directory/folder where you want to create your project.
  • Run command : npx react-native init my_first_rn_app
    Note: - my_first_rn_app is the project name. You can give any name.

    command to create new project in react native

After installation, the new React Native project will look like the image shown below.

After installation view of command prompt

The Project structure will look like below image (Open project in VS code)

React native project folder structure

 

Step 6 :

(a) Start Emulator
Following steps must be followed for this process.

  • Open Terminal at location : -
    C:\Users\HP\AppData\Local\Android\Sdk\emulator

    Path of emulators
  • Run Command :   emulator -list-avds
    It will show the list of devices (emulator)

    Command to show all available emulators
     
  • Copy emulator name.
  • Run command: emulator -avd Pixel_3a_API_29 to start Emulator
    Note : - Pixel_3a_API_29 is the emulator name

    Command to start emulator
     
  • Now our running emulator will look like the below image

    Running emulator

 

Step 7:

After we’ve followed all the aforementioned steps, we’re almost ready to run  our first app.

  • Open terminal in vs code (after opening the project in vs code)
  • Run command : npx react-native run-android

    Command to run react native app
     
  • It will start metro and emulator as well.
    Note: - Do not close opened window by run-android command
     
  • Emulator output looks like the below image

    Running app on emulator

 

And we’ve finally completed the process of React Native setup in Windows using Android studio and Node. We have successfully created an  up and running react native environment. We started with downloading jdk and setting environmental variable for it. We Installed Node js, react native CLI, android studio and android SDK; and finally set up the environmental variable for android sdk to create a fresh react native project.