For enquiries call:
+1-469-442-0620
HomeBlogWeb DevelopmentHow to Install React Native on Windows
React Native is a renowned JavaScript mobile application framework that allows building mobile applications on Android and iOS platforms. It offers superb mobile development capabilities and concentrates on creating applications for multiple stages using a similar codebase. To know more about usereducer in React and React Native Interview Questions, click here.
Originally developed by Facebook for its internal app development, React Native was open-sourced in March 2015 for iOS Mobile apps, and by September of the same year a version for Android dev was also released. Today, Native React has been vastly improved and powers popular worldwide mobile applications like Instagram, Facebook, Skype, and more. For more information on web development, check out Full Stack Bootcamp.
Are you ready to get started with React Native? Let's understand how to download, install and set up React Native in Windows 10.
Before we get started, here are a few system requirements to download, install, and set up React-Native on your Windows 10.
To download and successfully install React-Native in your computer, you need to consider the minimum hardware specifications required to support the app and run it smoothly.
To efficiently install and set up React-Native on your Windows device, you will need to install the following:
To successfully install and set up React-Native to your device, you need to follow the steps discussed below:
The first process that you need to do is to install Chocolatey, a well‐known package manager for Windows. Installation of Chocolatey requires administrator access to the computer’s command prompt to run.
The installation will look like as shown below:
To check whether you have installed it correctly, open the command prompt and type;
choco -version
If you managed a correct installation, this command returns the Chocolatey version you have installed; like shown in the screen below:
Using Chocolatey we will now install Node.js, and JDK8 as follows.
i. Installing Node Js
Installing Node.js is crucial as it is a JavaScript runtime environment and React Native uses it build the JavaScript code. To install Node.js, you need to open the command prompt as the administrator and put in the Chocolatey command prompt below:
Choco install -y nodejs.install
Installation may take some time. Once done, you will see a message stating that Chocolatey is installed as shown below:
To confirm that installation has been successful, we will execute the below command at the command prompt, as administrator:
node --version
If the installation was successful, the version number is displayed.
After installing Node.js, the Node Package Manager NPM automatically installs. Now check the installation of NPM in your system by entering the following command.
.png&w=3840&q=75)
npm --versionThe displayed message below verifies that the installation of NPM is successful.
JDK8 is crucial in the improvement of android applications by React-Native. To install the JDK8, go to the Windows PowerShell and use the following command:
choco install -y nodejs.install openjdk8
To know whether it installed successfully, open the command prompt again and enter the command:
java -version
The message below is displayed if the JDK8 is successfully installed hence showing the Java version as:
openjdk version “1.8.0_222”
The installed JDK8 also has an installed Java compiler. To confirm whether the Java compiler has been installed, open the command prompt and enter the below command:
javac -version
To improve mobile applications with React Native, you need to install Android Studio. To download the installation file, go to. By default, android studio automatically installs the latest Android SDK. However, building a React Native app with native code demands Android 11.0 (R) SDK in particular.
Wondering where to begin to career as web developer? Enroll in Full Website Development course.
The installation display message looks like below:
After downloading the file, perform the Android Studio installation process. To continue, click on the Next button to see the Choose Components screen.
Tick the box containing Android Virtual Device and click on the Next button.
You then need to choose the location in your computer where you would like the Android Studio to get installed. You can even leave it to install at the default location to save time, and then click the Next button to go to the next screen:
You will come to the Choose Start Menu Folder. Click the Install button to install the program.
When the bar reaches the end, click on the Next button to complete the process.
On the next screen, check Start Android Studio and click on the Finish button.
Click the Next button to go to the Install Type screen:
Choose the Custom type of setup and then click the Next button.
On this screen, you can select the theme of your choice and then click on the Next button to go to the SDK Component Setup window.
On the SDK Component Setup display, check on the Performance Intel HAXM option plus Android Virtual Device option and then click on the Next button.
On the Emulator Settings window, do not make changes to anything. Leave it the way it is and click on the Next button.
Verify settings.
The dialogue box below completes the whole process by clicking on the Install button.
Customize Android SDK
When you select Configure, the SDK Manager as shown on the screen above is displayed. This allows you to choose the Android SDK settings. Click on the Show Package Details located at the bottom right of the screen. From the list, tick the following:
Click the OK button to install them, and you are done setting up the Android SDK.
React Native needs environment variables to be customized to create applications using the native codes. Next, we will customize the Android Studio Environment variable.
Right‐click on This PC and click Properties, a screen displays as below. Click on the advanced system settings.
Once you are on the System Properties window, select the Advanced tab, and then the Environment Variables button at the bottom. Then press Enter.
After selecting the environment variable, go to the Variable name, type ANDROID_HOME, and your variable value Android Studio SDK path. After that, customize the Android Studio platform‐tools path by selecting the Path variable on User variables for your name list to move to the edit dialog.
Looking to master object-oriented programming? Look no further! Our OOP Python course is here to help you become a coding pro. Join now!
Input platform-tools folder path in the SDK path, like C:\Users\[user name]\AppData\Local\Android\Sdk\to the end of the list and press, Enter key. Open the command prompt and input the command below:
adb
When the environmental variable customization is successful, you get the below message:
Android Debug Bridge version 1.0.41 Version 29.0.1-5644136 Installed as /Users/Username/Library/Android/sdk/platform-tools/adb
Install React Native CLI
To install React-Native CLI, open the command prompt as an administrator and enter the following command:
npm install -g react-native-cli
Let us create a new React Native project using react native CLI. reactapp is the first project we are creating on React Native.
react-native init reactapp
Running the Application
Once you have created your first React application, it's time to run the application. Open the application in any IDE of your choice. Here we are using Visual Studio Code as shown:
| Name | Date | Fee | Know more |
|---|
