Installing React Native on Windows Tutorial

Getting Started with React Native Development on Windows XP, Vista, 7, 8.1, 10 for android application development beginners step by step guide.

React Native

As we all know that Mobile application development is recently a very big market and everyone is using their own Android or iOS mobile phones. But for companies who has developing Android and iOS apps together gets very high cost for their customers, because they have to develop individual applications for each platform and that makes their application cost high.

So here we comes with React Native. React Native is a fully responsive mobile application development language which gives us the coding environment to code in JavaScript, HTML and CSS. You can find more about React Native on here.

In this tutorial we would going to install, run and create Android app development’s first project using React Native on windows machine. So just follow the below steps . If you like my tutorial than please share it with others.

Step 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 .

Step 2. 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 .

 Step 3. Install JDK( Java Development Kit ) :

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

Step 4. Install Android Studio + SDK Manager :

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

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

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

Step 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. Goto 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.
  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.

Step 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 FirstProject 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.

6. If your project build successfully then you can see a message on your command prompt screen BUILD SUCCESSFUL .

Here you go now you can see Your app is build successfully and run into Android emulator. Your emulator screenshot should look like this :

20 Comments

  1. How to create or rename project with space?, for example : First Project.

  2. I have little problem

    C:\Users\NDK>npm install -g react-native-cli
    npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE
    npm ERR! errno UNABLE_TO_VERIFY_LEAF_SIGNATURE
    npm ERR! request to https://registry.npmjs.org/react-native-cli failed, reason:
    unable to verify the first certificate

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\NDK\AppData\Roaming\npm-cache\_logs\2018-02-06T18_22_53_49
    8Z-debug.log

    Can you help me please ?

  3. How I add image in react native

  4. Hey Admin. From the tut, I figured the Android Studio is for testing the app. Can I test the app using my phone without having to install Android Studio?

  5. Good day, I’d like to know how I can visualize my code using Expo mobile application rather than Android Studio.

    • David then you need to install the Expo official app in your android mobile phone now simply open the Expo’s website and paste all your code there and then using the QR code run that code directly into your mobile phone.

  6. Hi please could you show me how to use opentok with react native thnx

  7. I love to read steps from this website
    Could you please make it for linux and mac as well.

  8. For some reason, when I go to Tools in my Android Studios, it doesn’t have the Android tab for me to access AVD Manager. Is there something wrong with it or did I download the wrong Android Studio?

  9. Never mind. I’m good. But for step 5, when I tried putting those commands into the command prompt, it keeps saying: “The system cannot find the path specified”. What should I do?

Leave a Reply

Your email address will not be published. Required fields are marked *