How To Install And Setup React Native On Windows Step by Step

In this tutorial we will learn how to setup React native in Windows. React Native framework is getting more attention from developers who want to build cross-platform mobile applications (Android/iOS). this tutorial is for Windows users. Here we will learn the steps to install React Native on Windows 10.

We can find official installation documentation on the React Native website. But I faced some issues when following it and some of the steps are a little bit confusing. This is the reason behind the making of this tutorial.

We can set up and work with a React Native project on our Windows system in two different ways. Using Expo CLI and using React Native CLI.

1. If you are a beginner developer for  react native, Expo CLI will be the best compatible option. Because the environmental setup for both Android and iOS is handled by Expo here.
2. In a project built with React Native CLI, we can find two directories android and ios in our project directory to customize your app for both platforms (android/iOS).

Here we will use React Native CLI to install and setup a React Native project on our Windows  system.

Requirements specification

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

Hardware Requirements:

1. RAM: minimum 8GB / Recommended
2. HDD: minimum 256 / Recommended 256 + SSD
3. Processor : core i5+ / AMD6

Software Requirements:

To efficiently install and set up Flutter on your pc device, you will need to install the following: 

1. Install Chocolatey package manager on Windows
2. Install Node.js, Python2 and JDK8 using Chocolatey
3. Installing Android Studio
4. Setup Android SDK
5. Install React Native CLI
6. Creating a new React Native application
7. Set up an Android device
8. Running the React Native app we created

Install chocolatey

1. Click Start and type “powershell“
2. Right-click Windows Powershell and choose “Run as Administrator“
3. Paste the following command into Powershell and press enter.

@"%SystemRoot%\System64\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

This is our system path you can find your system WindowsPowerShell path  and open powershell.exe

You can search the choco repository to see exactly what software chocolatey can install.

C:\>choco search hugo
Chocolatey v0.10.8
hugo 0.32.2 [Approved] Downloads cached for licensed users
pcwrunas 0.4.0.20161129 [Approved] Downloads cached for licensed users
lightworks 14.0.0.20171007 [Approved]
3 packages found.

Install Node, Python2, and JDK11

Now we need to install Nodejs, Python2, and JDK11 using Chocolaty. This can be done using the below command.

choco install -y nodejs.install python2 jdk11Click here ?

Set up Android SDK

Android Studio installs the latest Android SDK by default. However, 
building a React Native app with native code requires the Android 11.0 (R) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.The SDK Manager can be accessed from the Welcome to Android Studio screen.Click on Configure, then select the SDK Manager. SDK manager -> SDK platforms then check the box next to “Show Package Details” in the bottom right corner. Look for and expand the Android 11.0 (R) entry, then make sure the following items are all checked:

1. Android SDK Platform 26
2. Google APIs Intel x86 Atom_64 System Image

The React Native tools require some environment variables to be set up in order to build apps with native code. open the System pane under System and Security in the Windows Control Panel, 
Then click on Change settings. Open the Advanced tab and click on Environment Variables. Click on New to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

c:\Users\Stack\AppData\Local\Android\Sdk 

Install React Native CLI

Now We can easily install React Native CLI using NPM. So, install it with the below command on Command Prompt/ Powershell on our system.

npm install -g react-native-cli

Now We Can Creating a New Application

Using react native CLI, we can create a new React Native Application project.

react-native init Myfirstapp

Here Myfirstapp is the project name I have chosen.