Installing React Native on Windows

React Native

React Native is an open source framework created by Facebook that lets you build mobile apps using only javascript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.You can find more about React Native on here.

In this tutorial  we are going to install, run and create Android app development’s first project using React Native on windows machine. So just follow the below steps .

1. Install Required Software :

The first step to install React Native is Download and Install below required software packages.

NodeJS : Download and install the latest NodeJS windows machine installer software package from nodejs.org .

Python : Download and install the latest Python windows installer package from Python.org

2. Install JDK( Java Development Kit ) :

JDK : Download and install JDK from Oracle’s official website oracle.com .

Note: Either we can install NodeJs,Python,JDK (Java Development Kit) saperately or via Chocolatey, a popular package manager for Windows.

Chocolatey automatically install the recent version of NodeJs,Python2,JDK .

Open an Administrator Command Prompt (right click Command Prompt and select “Run as Administrator”), then run the following command:

choco install -y nodejs.install python2 jdk8

3. Install React Native :

After installing NodeJS we can access the nmp packages via Command Line Interface ( DOS ) in windows. So open Command prompt type the below command to install React Native .

npm install -g react-native-cli

4. Android development environment:

Install Android Studio

Download the Android Studio latest version from Google Android Developers official Page developer.android.com.

Install the Android SDK

After installing Android Studio Open it Goto Files -> Settings .

Goto Appearance and Behavior -> System Settings -> Android SDK and install latest android platform.

5. Add Environment Variable ANDROID_HOME in Windows :

React Native required ANDROID_HOME variable to compile and run apps. So define the ANDROID_HOME variable.

1. Right Click on My Computer.
2. Go to Properties.
3. Click on Advanced System Settings.
4. Click on Environment Variables.
5. Under System Variables click on New .
6. Set variable name as ANDROID_HOME and variable value as your SDK Manager’s Path and then click ok.
7. Here you go now your ANDROID_HOME variable has been successfully set.

6. Start Android Virtual Device (AVD) :

1. Android virtual device is used to see the test result of our coding inside a virtual android machine just like a real android mobile phone. To setup AVD Open Android Studio -> Tools -> Android -> AVD Manager.

2. Click on Create New Virtual Device.

3. Select your device.

4.  Select Android OS version System Image.

5.  Name the AVD and hit the Finish button.

6.   After done creating AVD just hit the Run button to start the AVD.

7. Create your first React Native project :

1. Once you have finish all the installing than Create a folder in your drive in which you will store your all React Native projects. Than start command prompt and goto that folder inside command prompt. You can use cd.. command to go back individually from folder to folder.

2. Now type react-native init YOUR_PROJECT_NAME and press enter.

3. Now it will start downloading the React Native app support libraries from internet.

4.  The final output will like below screenshot.

5.  Now build the created app and run it into Android Emulator using below command.

Run react-native run-android inside your React Native project folder: