How To Install React Native on Windows 10 Flawlessly?
React Native framework is getting more recognition from developers. You need to build cross-platform mobile applications namely Android and iOS. you may have seen various tutorials for installing and setting up React Native on Mac OS and LINUX distributions. But this tutorial is specifically written for Windows users. Here we will learn steps to install React Native on Windows 10. You can also search for the official installation documentation present on the React Native windows phone. But you can face some difficulties in following it and some steps mentioned are a little bit confusing.
How to Set React Native on Windows?
You can set up and work with React Native projects on your windows system in different ways. By using Expo CLI and by using React Native CLI.
- Expo CLI is the best compatible option for a beginner. Expo handles the environmental setup for both Android and iOS.
- Two directories namely Android and iOS will be available in your project directory for customizing the app in a project using React Native CLI.
In this tutorial, we will be using React Native CLI to install React Native on Windows. Before learning to install React Native on Windows let’s know more about React Native. React Native is JavaScript dependent mobile app development framework that empowers developers to design natively rendered mobile apps for iOS and Android. The framework facilitates developers for designing an application for multiple platforms by using the same code base. React native was released by Facebook as an open-source project in 2015. Within a couple of years, it was one of the topmost solutions used for mobile app development. React Native development is used to power some leading mobile apps including Instagram, Facebook, and Skype.
Behind React Native's global success, there are various factors such as:
- Companies may develop code once and utilize it to power both their iOS and Android apps by utilizing react native. It will result in significant time and resource savings.
- React native was developed on top of React, a popular JavaScript library at the time the mobile framework was launched.
- Frontend developers who have previously worked with web-based technologies are allowed to build robust and production-ready mobile applications.
React Native, like so many other discoveries, was created in response to a major technological blunder.
Also Read: Mistakes To Avoid While React Native App Development
Steps to Install React Native on Windows 10
Let's install React Native on windows 10 using React Native CLI.
1. Install Chocolatey
Chocolatey is a very popular package manager for windows. So it should be installed on your system first.
For installing chocolatey you need to open the command prompt with administrator privileges and run the command below.
@"%SystemRoot%\System64\WindowsPowerShell\v1.2.1\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERPROFILE%\chocolatey\bin"
2. Install Node, Python2, and JDK8
Now you will have to install Nodejs, Python2, and JDK using chocolatey. This could be done by using the command below.
choco install -y nodejs.install python2 jdk8
3. Install Android Studio
Android studio is also to be installed to work with React Native windows phone development. You can easily download and install it from the URL provided below.
4. Setup Android SDK
Android studio native app with native code needs Android 11.0(R) SDK in particular. Moreover, Android SDK could be installed using the SDK manager in Android studio.
The SDK manager could be obtained from the welcome to Android studio screen.
Then click on configure and select the SDK manager.
SDK manager-> SDK platforms
Then check the box beside for showing package details present in the bottom right corner. Look for and expand the Android 11.0(R) entry and then make sure the following items are all checked:
- Android SDK Platform 26
- Google APIs Intel x86 Atom_64 System Image
React native tools need some environment variables to be set up for building apps using native code.
opening the system pain under system and security in the windows control panel and then click on the change settings option. Then simply select Environment Variables from the advanced menu. After completing it click on new to create a new ANDROID_HOME user variable that points the path to your Android SDK:
c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
5. Install React Native CLI
You can now easily install React Native CLI using NPM. To install it, use the command given below on the command prompt for PowerShell on your system.
npm install -g react-native-cli
Creating a new application
Using React Native CLI you will be able to create a new react native project.
react-native init Xyz
Here Xyz is the chosen project name.
Running the application, now you can run the created project on your Android phone. For this, you shall know how to set up your mobile device first.
6. Setting Up Android Device
You are required to enable USB debugging in your Android device for running the react native app created by you.
- Go to settings → click on about.
- The build version menu will open.
- Click the build version option continuously until it enables developer options.
- Return to settings → Click on the developer options menu.
- Then enable the USB debugging option present in developer options.
Then connect your mobile device with the windows system using a USB cable. Then type the below command for verifying whether your mobile device is connected or not.
adv devices
Now run the below command for running the react native app on your mobile device.
react-native run-android
It is recommended to use visual studio code as the source code editor for working with react native projects.
Conclusion
In this post, we have learned to install react native on the windows 10 system using React Native CLI. These installation steps will be helping developers who are serious about react native mobile app development. Others could work with Expo CLI which will make installation and setup easier.
Also Read: Local Databases for React Native Mobile App Development