web-development top banner

How to Install React Native on Windows

Read it in 8 Mins

Last updated on
07th Jun, 2022
Published
09th Jun, 2021
Views
5,505
How to Install React Native on Windows

React Native is a renowned JavaScript mobile application framework that allows building mobile applications on Android and iOS platforms. It offers superb mobile development capabilities and concentrates on creating applications for multiple stages using a similar codebase. To know more about usereducer in React click here.

Originally developed by Facebook for its internal app development, React Native was open-sourced in March 2015 for iOS Mobile apps, and by September of the same year a version for Android dev was also released. Today, Native React has been vastly improved and powers popular worldwide mobile applications like Instagram, Facebook, Skype, and more.  

Are you ready to get started with React Native? Let's understand how to download, install and set up React Native in Windows 10. 

1. Prerequisites

Before we get started, here are a few system requirements to download, install, and set up React-Native on your Windows 10.

Hardware requirements

To download and successfully install React-Native in your computer, you need to consider the minimum hardware specifications required to support the app and run it smoothly. 

  • RAM 8 GB 
  • CPU: Intel ® Core ™ i7‐4870 HQ CPU @ 2.50 GHz 
  • 256 GB ROM 

Software requirements

To efficiently install and set up React-Native on your Windows device, you will need to install the following:  

  • Android Studio  
  • Android SDK  
  • Install JDK 
  • Node Js  
  • NPM 3.5.2 
  • React native cli 

2. Installation procedure

To successfully install and set up React-Native to your device, you need to follow the steps discussed below: 

Step-1: Install Chocolatey

The first process that you need to do is to install Chocolatey, a well‐known package manager for Windows. Installation of Chocolatey requires administrator access to the computer’s command prompt to run.  

  • Go to and choose the option – get started. 

nstall React Native on Windows

  • In the Chocolatey install section, choose Individual as shown:

nstall React Native on Windows

  • Now go to Windows CMD Shell, and enter the following command in the cmd.exe shell.

The installation will look like as shown below:    

To check whether you have installed it correctly, open the command prompt and type; 

choco -version 

If you managed a correct installation, this command returns the Chocolatey version you have installed; like shown in the screen below:

Step-2: Install Node Js 

Using Chocolatey we will now install Node.js, and JDK8 as follows. 

i. Installing Node Js 

Installing Node.js is crucial as it is a JavaScript runtime environment and React Native uses it build the JavaScript code. To install Node.js, you need to open the command prompt as the administrator and put in the Chocolatey command prompt below: 

Choco install -y nodejs.install 

Installation may take some time. Once done, you will see a message stating that Chocolatey is installed as shown below:  

To confirm that installation has been successful, we will execute the below command at the command prompt, as administrator: 

node --version 

If the installation was successful, the version number is displayed. 

After installing Node.js, the Node Package Manager NPM automatically installs. Now check the installation of NPM in your system by entering the following command.   

npm --version

The displayed message below verifies that the installation of NPM is successful.

Step:4 Installing JDK8 (Java Development Kit)

JDK8 is crucial in the improvement of android applications by React-Native. To install the JDK8, go to the Windows PowerShell and use the following command: 

choco install -y nodejs.install openjdk8 

To know whether it installed successfully, open the command prompt again and enter the command: 

java -version 

The message below is displayed if the JDK8 is successfully installed hence showing the Java version as: 

openjdk version “1.8.0_222” 

The installed JDK8 also has an installed Java compiler. To confirm whether the Java compiler has been installed, open the command prompt and enter the below command: 

javac -version 

Step-5: Install Android Studio

To improve mobile applications with React Native, you need to install Android Studio. To download the installation file, go to. By default, android studio automatically installs the latest Android SDK. However, building a React Native app with native code demands Android 11.0 (R) SDK in particular. 

The installation display message looks like below: 

nstall React Native on Windows

After downloading the file, perform the Android Studio installation process. To continue, click on the Next button to see the Choose Components screen.  

nstall React Native on Windows

Tick the box containing Android Virtual Device and click on the Next button.  

nstall React Native on Windows

You then need to choose the location in your computer where you would like the Android Studio to get installed.  You can even leave it to install at the default location to save time, and  then click the Next button to go to the next screen:  

nstall React Native on Windows

You will come to the Choose Start Menu Folder. Click the Install button to install the program.

nstall React Native on Windows

nstall React Native on Windows

When the bar reaches the end, click on the Next button to complete the process.

nstall React Native on Windows

On the next screen, check Start Android Studio and click on the Finish button.   

nstall React Native on Windows

Customize Android Studio: 

Click the Next button to go to the Install Type screen: 

Customize Android Studio

Choose the Custom type of setup and then click the Next button.

Customize Android Studio

Customize Android Studio

On this screen, you can select the theme of your choice and then click on the Next button to go to the SDK Component Setup window.

Customize Android Studio

On the SDK Component Setup display, check on the Performance Intel HAXM option plus Android Virtual Device option and then click on the Next button.

Customize Android Studio

On the Emulator Settings window, do not make changes to anything. Leave it the way it is and click on the Next button.   

Customize Android Studio

Verify settings.  

Customize Android Studio

The dialogue box below completes the whole process by clicking on the Install button.

Customize Android Studio

Customize Android SDK 

When you select Configure, the SDK Manager as shown on the screen above is displayed. This allows you to choose the Android SDK settings. Click on the Show Package Details located at the bottom right of the screen. From the list, tick the following: 

  1. Android SDK Platform 28 
  2. Intel x86 Atom System Image 
  3. Google APIs Intel x86 Atom System Image 
  4. Google APIs Intel x86 Atom_64 System Image 

Click the OK button to install them, and you are done setting up the Android SDK. 

React Native needs environment variables to be customized to create applications using the native codes. Next, we will customize the Android Studio Environment variable. 

3. Setting the path to Environmental Variable

Right‐click on This PC and click Properties, a screen displays as below. Click on the advanced system settings.

Setting the path to Environmental Variable

Once you are on the System Properties window, select the Advanced tab, and then the Environment Variables button at the bottom. Then press Enter.  

Setting the path to Environmental Variable

After selecting the environment variable, go to the Variable name, type ANDROID_HOME, and your variable value Android Studio SDK path. After that, customize the Android Studio platform‐tools path by selecting the Path variable on User variables for your name list to move to the edit dialog.  

Input platform-tools folder path in the SDK path, like C:\Users\[user name]\AppData\Local\Android\Sdk\to the end of the list and press, Enter key. Open the command prompt and input the command below: 

adb 

When the environmental variable customization is successful, you get the below message: 

Android Debug Bridge version 1.0.41 
Version 29.0.1-5644136 
Installed as /Users/Username/Library/Android/sdk/platform-tools/adb 

Install React Native CLI 

To install React-Native CLI, open the command prompt as an administrator and enter the following command: 

npm install -g react-native-cli 

Install React Native CLI

4. Creating a New Application

Let us create a new React Native project using react native CLI. reactapp is the first project we are creating on React Native. 

react-native init reactapp 

Install React Native CLI

Running the Application 

Once you have created your first React application, it's time to run the application. Open the application in any IDE of your choice. Here we are using Visual Studio Code as shown: 

Profile

Abhresh Sugandhi

Author

Abhresh is specialized as a corporate trainer, He has a decade of experience in technical training blended with virtual webinars and instructor-led session created courses, tutorials, and articles for organizations. He is also the founder of Nikasio.com, which offers multiple services in technical training, project consulting, content development, etc.