Installing React Native on Windows Tutorial

Today, we will see how to install react native for android application development on windows.Lets get started with React Native Development on Windows XP, Vista, 7, 8.1, 10 for android application development beginners step by step guide.

What is React Native?

React Native is a JavaScript framework for rendering mobile application in iOS and Android. React is a Facebook’s JavaScript library for building user interfaces which targets mobile platforms. So now developers can make mobile applications using this JavaScript library which can be shared between platforms that makes it easy to develop in both iOS and Android.

As we know, the number of smartphone users is increasing day by day.  The number is increasing just because these devices fulfill the  requirements easily like entertainment, shopping, security and much  more. This increasing scenario inspires the developers to build more  mobile applications related to mobile payment systems, social  networking, etc. Mobile application development is recently a very big market and everyone is using their own Android or iOS mobile phones. But for companies who are developing Android and iOS apps together gets very high cost for their customers, because they have to develop individual applications for each platform and that makes their application cost high.

So Cross-Platform application development technology overcome this problem. React native provides Cross-platform  app development technology provides the multi-platform app development  by that develop the app that can run on multiple platforms with the same  content and functionality. Moreover, developers should require to have  vast knowledge of coding. Ultimately, this technology saves a lot more  time as well as money, the main reason why it is more popular among the  app developers.

Step-1. Installing dependencies :

First install the Chocolatey, a popular package manager for Windows. Follow the below steps to install chocolatey in windows machine:
https://chocolatey.org/install
1. Open Command prompt in administrative mode.

2. Run the below command in command prompt.

@"%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"

3. Install Node, Python and JDK with the help of Chocolatey. Run the below command in command prompt and make sure you are in admin mode.

choco install -y nodejs.install python2 jdk8

Note : wait for above package installation and it will take sometime. During installation don't stop or close the command prompt.

Step-2 : React Native CLI

Once you are completed with above dependencies installation, then Follow the below instruction that helps to install the React Native command line interface.

Run the following command in a Command Prompt :

npm install -g react-native-cli

Step-3 :Android development environment

Follow the below steps to configure and set-up the android development environment on window operating system.
1. Download and install latest version of Android Studio from google android developer official website :
Link to download android studio :
https://developer.android.com/studio/

2. Install the Android SDK:
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 6.0 (Marshmallow) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
Depending upon the android development version, you can manually download the SDK.

Lets install the SDK version in android studio :
To setup SDK Open Android Studio -> Tools -> Android -> SDK Manager

Currently, we have installed Android 4.4(KitKat), Android 6.0 (Marshmallow), Android 7.0 (Nougat) SDK version. In case you require Android 8.0 (Oreo) version then click on the checkbox and perform apply the change. It will take sometime and install the Android 8.0 (Oreo) version and then after you can work Android 8.0 (Oreo) development environment.

3. Configure the ANDROID_HOME environment variable

• Open system property in windows and Click on Advanced System Settings.

• Click on Environment Variables.

• Set the new Environment variable : Create a new ANDROID_HOME user variable that points to the path to your Android SDK.
  

Get the SDK location from android studio :

4. Start Android Virtual Device (AVD) :
Android virtual device is used to see the test result of our coding inside a virtual android machine just like a real android mobile phone.

• First step, set the platform-tools path of SDK in environment variable. 

• To setup AVD Open Android Studio -> Tools -> Android -> AVD Manager.

• Click on Create New Virtual Device.

• Select your device.

• Select Android OS version System Image.

• Name the AVD and hit the Finish button.

• After done creating AVD just hit the Run button to start the AVD.

• Once you click on run it will launch the virtual device/ emulator :

Step-4 : Creating a new application

• Once you are done with all the installation then Create a folder in your drive in which you will store your all React Native projects. Than start command prompt and switch to project directory.
• Now type below command in command prompt and hit enter to create react native project.

react-native init AndroidProject

Switch to project directory :

cd AndroidProject

• Now it will start downloading the React Native supporting libraries from internet and wait for sometime until install.
• Then switch to project directory and run the below command to see the output in emulator. Run react-native run-android inside your React Native project folder:

react-native run-android

• If your project build successfully then you can see a message on your command prompt screen BUILD SUCCESSFUL.

Scanning folders for symlinks in D:\MobileApp\node_modules (182ms)
Starting JS server...
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
Incremental java compilation is an incubating feature.
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42301Library UP-TO-DATE
:app:prepareComFacebookFbuiTextlayoutbuilderTextlayoutbuilder100Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee130Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore130Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco130Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline130Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineBase130Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp3130Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0554Library UP-TO-DATE
:app:prepareComFacebookSoloaderSoloader010Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:mergeDebugShaders UP-TO-DATE
:app:compileDebugShaders UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:incrementalDebugJavaCompilationSafeguard UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:transformClassesWithDexForDebug UP-TO-DATE
:app:mergeDebugJniLibFolders UP-TO-DATE
:app:transformNative_libsWithMergeJniLibsForDebug UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:app:validateSigningDebug
:app:packageDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'Pixel_XL_API_27(AVD) - 8.1.0' for app:debug
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 1 mins 45.867 secs
Running C:\Users\Acer-sumit\AppData\Local\Android\Sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081
Starting the app on emulator-5554 (C:\Users\Acer-sumit\AppData\Local\Android\Sdk/platform-tools/adb -s emulator-5554 shell am start -n com.mobileapp/com.mobileapp.MainActivity)...
Starting: Intent { cmp=com.mobileapp/.MainActivity }

• If everything is set up correctly, you should see your new app running in your Android emulator shortly.

This is all about install react native on windows device. In case of any questions, please do comment in comment box below.