How to install React Native on Windows 10 and Windows 7

How to install and Setup React Native CLI on Windows 10

Ina HranovaIna Hranova 3 minutes 130 views

Share:

Let’s start to install and setup React Native with the required tools on Windows 10 or Windows 7. Chocolatey is a package manager for Windows and was designed to be a decentralized framework for quickly installing applications and tools that you need.

Install Chocolatey

For Windows 7
So first we need to install Chocolaty on our system. To install Chocolaty, click the Start icon and click in the Search box and type cmd into the search box. It will open Command Prompt 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"

For Windows 10
Click Start and type “Powershell“ . Right-click Windows Powershell and choose “Run as Administrator“. Paste the following command into Powershell and press enter.

Set-ExecutionPolicy Bypass -Scope Process -Force; `  iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Answer Yes when prompted. That’s all.

Install Node, Python2, and JDK8

After installing Chocolatey, we have to install Nodejs, Python2, and JDK using Chocolaty. So let’s install it with the command:
 Install Node, Python2, and JDK8 on windows 10

choco install -y nodejs.install python2 jdk8

Install Android Studio

Go to Android Studio website and download it. We have to use Android Studio because we need to use a virtual device for running with React Native.
Install Android Studio on Windows 10

Set up Android SDK

During that installation, we need to configure the Android SDK. Go to Tools > SDK Manager and choose the latest version.
set up android sdk on Windows 10
Then select SDK tools and check 29.0.2
Set up tool sdk react native on Windows 10
Note*: If don’t show the packages, you need to check “Show Package Details” at the bottom.
Then need to configure AVD Manager to use some virtual device for the React Native app. Open Android Studio and click on Configure and select AVD Manager. Installing react native on Windows 10 and set up Android studio
Choose a device definition you want. For example we choose Nexus 5X.
virtial device configuration react native on Windows 10
After configuring your virtual device click on the play button under the Actions column to start your android emulator.
Set Up ADV for react native

If everything is set up correctly, you should see your Android emulator shortly.

Configure environment variables

The React Native tools require some environment variables to be set up in order to build apps with native code. Open the System panel 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

Installing react native on Windows 10 and set up Android simulator

Install React Native CLI

Now we can install React Native CLI. So let’s install it with the command:

npm install -g react-native-cli

Creating a New Application React Native

react-native init reactapp

Then you can open your directory in your app with Visual Studio IDE. Yes, Develop React Native apps in Visual Studio Code is a great way to build native, cross platform app for iOS and Android using JavaScript. Visual Studio Code is free and available on your favorite platform – Linux, macOS, and Windows. You can download here

Start React Native Project

To view your project running on an Android emulator, you will first need to open Android Studio, then create and start a virtual device. Once the virtual device is opened, run below command in the command prompt.

cd MyReactNative
react-native run-android

It will open your app in your virtual app.
android app react native success Windows 10

That’s all. Congratulations & Happy Coding!