React Native framework is getting more attention from developers who want to build cross-platform mobile applications (Android/ios). I could see a lot of tutorials in installing and setting up React Native on Mac OS and Linux distributions. But 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.
- If you are a beginner, Expo CLI will be the best compatible option. Because the environmental setup for both Android and iOS is handled by Expo here.
- In a project built with React Native CLI, we can find two directories android and ios in our project directory to customize our app for both platforms.
Here we will use React Native CLI to install and set up a React Native project on our Windows 10 system.
Install and Setup React Native on Windows 10
So let’s start the installation of React Native on Windows 10 using React Native CLI.
Prerequisites
To continue with this article, the reader must know the basics of working with the Command Prompt/ Powershell in a Windows 10 system.
What we will learn?
Here in this article, we will learn the following things:-
- Install Chocolatey package manager on Windows 10
- Install Node.js, Python2 and JDK8 using Chocalatey
- Installing Android Studio
- Setup Android SDK
- Install React Native CLI
- Creating a new React Native application
- Set up an Android device
- Running the React Native app we created
Install Chocolatey
Chocolatey 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"
Install Node, Python2, and JDK8
Now we need to install Nodejs, Python2, and JDK using Chocolaty. This can be done using the below command.
choco install -y nodejs.install python2 jdk8
Install Android Studio
Android studio needs to be installed for working with React Native development. We can easily download and install it from the URL below.
https://developer.android.com/studio
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:
- Android SDK Platform 26
- 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\YOUR_USERNAME\AppData\Local\Android\Sdk
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
Creating a New Application
Using react native CLI, we can create a new React Native project.
react-native init AwesomeProject
Here AwesomeProject is the project name I have chosen.
Set Up an Android Device
Now we can run the project we have created on our Android phone. For this, we need to set up our mobile device first.
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.
We need to enable USB debugging in our Android device to run the React Native app we have created.
- On our Android device, Go to Settings->About
- We can see a Build Version menu there.
- Continually click the Build Version option until it enables the Developer options.
- Now, return to Settings and click the Developer options menu there.
- Enable the USB debugging option in Developer options.
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
Running the React Native app
Now, execute the below command to run the react native app on our mobile device.
react-native run-android
We recommend using Visual Studio code as the source-code editor for working with React Native projects.
Summary
So here in this article, we learned the steps to install React Native on our Windows 10 using React Native CLI. These installation steps are those who are really serious about React Native mobile app development. Others can work with Expo CLI that makes the installation and setup easier.
