How to Install and Setup React Native on Windows 10

Image is loading...

Install React Native on Windows 10 | React Native framework is getting more attention from developers who want to build cross-platform mobile applications (Android/ios). I got a lot of tutorials in installing and setting up React Native on Mac OS and Linux distributions. But this tutorial is for Windows users. We could also find an installation tutorial in the official React Native page. 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.

INSTALLATION



1. INSTALL CHOCOLATY

Chocolate is a popular package manager for Windows. So at first, we need to install it on our system.

To install Chocolaty, Open  Command Prompt with administrator privileges and run the command below.

@"%SystemRoot%\System32\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"

2. INSTALL NODE, PYTHON2, JDK

Now we can install Nodejs, Python2, and JDK using Chocolaty. This can be done using below command.

choco install -y nodejs.install python2 jdk8

3.INSTALL ANDROID STUDIO

Android studio needs to be installed for working with React Native development. We can easily download it from

https://developer.android.com/studio



4.SETUP ANDROID SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 8.0 (Oreo) 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 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 8.0 (Oreo) entry, then make sure the following items are all checked:

  • Android SDK Platform 26
  • Google APIs Intel x86 Atom_64 System Image

Image is loading... Image is loading...

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\YOUR_USERNAME\AppData\Local\Android\Sdk

ANDROID_HOME Environment Variable

5. INSTALL REACT NATIVE CLI

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



6. CREATING NEW APPLICATION

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

react-native init AwesomeProject

7. RUNNING THE APPLICATION ON ANDROID DEVICE

Now we need to run the project on our Android phone. For this, it needs to set up our mobile device first.

On our mobile device,

Go to Settings->About

We can see a Build Version menu there. Continually click the option until it enables the Developer options

Now, return to Settings. we can see the Developer options menu there. Enable it. Also, enable the USB debugging option in it.

Connect our mobile device with our Windows system using the USB cable. Type the below command to verify whether our mobile device is connected or not.

adb devices

Image is loading...

Now, run the below command to run the react native app on our mobile device.

react-native run-android

Image is loading...

Note: We can also run our application of Android Virtual Device(AVD) which can be created from Android Studio. But I am not explaining it in this tutorial.

You May Also Like

About the Author: Syamlal CM

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.