Couple of years back creating a mobile app was difficult. It had multiple constraints like device type(wearables, tab or mobile), platform(iOS or Android), OS versions. To cover all types of devices and platforms different versions of the app needed to be created. The biggest concern was programming in two different languages, mainly Java and Objective -C. But now we have React Native. Using which we can create android as well as IOS apps just by coding in JavaScript, HTML and CSS format.


React Native creates a real web app which is that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps, but put those building blocks together using JavaScript and React. More about react native can be found here.


This blog post is a tutorial is step by step guide to install react native on Windows machine.


React Native uses same design as ReactJS. It is installed and run over nodeJS platform and the programming is in ReactJS using JavaScript, HTML format. One of the advantage of React Native is its programming environment setup. Any change to the code will can be seen immediately in the mobile emulator immediately and no rebuild is required. This largely reduces the development time. In order to see this happening we need to create a simple mobile application. Follow the six steps given below to install react native and to create your first react native android app.


Step 1 : Install Required Apps

Install following applications


nodeJS

Install nodeJs 6.x (or higher )by downloading windows installer from nodeJS.org


Python

Install Python 3.5.2 or latest by downloading windows installer from Python.org


React native

Node comes with npm, which lets you install React Native through command line interface.

Install react native by running the following command at command prompt.


npm install -g react-native-cli


JDK

Download and Install Java Development Kit version 7 from Oracle


Android Studio

Download and install Android Studio from developer.android.com


Step 2 : Install Android SDK

This can be confirmed by opening File → Settings from the Android Studio menu, then choosing Appearance and Behavior → System Settings → Android SDK


If the correct version of Android SDK is not installed, select the particular version by clicking the checkbox in front and press 'OK'.


Step 3 : Add Environment Variable

The React Native command line interface requires the ANDROID_HOME environment variable to be set up.

For windows 10 and 8 follow the steps given below to setup the variable.

  1. In Search, search for and then select: System (Control Panel)
  2. Click the Advanced system settings link.
  3. Click Environment Variables. Click New.
  4. In the New System Variable window, specify the path to your Android SDK. Click OK. Close all remaining windows by clicking OK.


Step 4 : Setup Virtual Device

We need an android device to install/run react native app. We can use an android phone for this by connecting it to the system or we can create an virtual android device in Android Studio.


Follow the steps given below to create a virtual android device.

1. Open Android Studio and go to Tools → Android → AVD Manager


2. A new window 'Your Virtual Devices' appears.


3. Create new virtual device by clicking Create Virtual Device and specify hardware in subsequent steps. Select hardware type from the category (TV, Wear, Phone, Tablet) and select a device.


5. Select the image type and API version and set the device name. Press Finish to create the device.


6. Once virtual android device is created click on the run button to start the device.


Step 5 : Create react native project

Run command react-native init AwesomeProject in command prompt.

The output for above command look like this:


C:\>react-native init AwesomeProject
This will walk you through creating a new React Native project in C:\AwesomeProject
Installing react-native package from npm...
Setting up new React Native app in C:\AwesomeProject
AwesomeProject@0.0.1 C:\AwesomeProject
`-- react@15.3.2

To run your app on iOS:
   cd C:\AwesomeProject
   react-native run-ios
   - or -
   Open C:\AwesomeProject\ios\AwesomeProject.xcodeproj in Xcode Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd C:\AwesomeProject
   react-native run-android

Step 6 : Build and run the app


C:\>cd AwesomeProject
C:\>react-native run-android

When we run the above command in windows command prompt react-native starts a JS server. It then builds and installs the current app into the target device


C:\AwesomeProject>react-native run-android
Starting JS server...
'adb' is not recognized as an internal or external command,
operable program or batch file.
Building and installing the app on the device (cd android && gradlew.bat install
Debug...
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:app:prepareComAndroidSupportRecyclerviewV72301Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42321Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee0110Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore0110Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineBase0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp30110Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0341Library 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: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:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'emulator-5554 - 6.0'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 32.696 secs
'adb' is not recognized as an internal or external command,
operable program or batch file.
Starting the app (C:\AppData\Local\Android\sdk/platform-tools/adb shell am start -n com.awesomeproject/.MainActivity...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }

If everything went fine, we get 'BUILD SUCCESS' message

During this run, react packager runs in another terminal which has logs for react packager actions. Which has logs something like below:


Scanning 581 folders for symlinks in C:\AwesomeProject\node_modules (78ms)
 ┌────────────────────────────────────────────────────────────────────────────┐
 │  Running packager on port 8081.                                            │
 │                                                                            │
 │  Keep this packager running while developing on any JS projects. Feel      │
 │  free to close this tab and run your own packager instance if you          │
 │  prefer.                                                                   │
 │                                                                            │
 │  https://github.com/facebook/react-native                                  │
 │                                                                            │
 └────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   C:\AwesomeProject

[4/11/2016, 5:51:58 PM] <START> Building Dependency Graph
[4/11/2016, 5:51:58 PM] <START> Crawling File System
[Hot Module Replacement] Server listening on /hot

React packager ready.

[4/11/2016, 5:52:22 PM] <START> Requesting bundle: {"url":"/index.android.bundle
?platform=android&dev=true&hot=false&minify=false"}
[4/11/2016, 5:52:22 PM] <START> Finding dependencies
[4/11/2016, 5:52:55 PM] <END>   Crawling File System (56949ms)
[4/11/2016, 5:52:55 PM] <START> Building in-memory fs for JavaScript
[4/11/2016, 5:52:55 PM] <END>   Building in-memory fs for JavaScript (444ms)
[4/11/2016, 5:52:55 PM] <START> Building in-memory fs for Assets
[4/11/2016, 5:52:56 PM] <END>   Building in-memory fs for Assets (222ms)
[4/11/2016, 5:52:56 PM] <START> Building Haste Map
[4/11/2016, 5:52:56 PM] <START> Building (deprecated) Asset Map
[4/11/2016, 5:52:56 PM] <END>   Building (deprecated) Asset Map (110ms)
[4/11/2016, 5:53:08 PM] <END>   Building Haste Map (12142ms)
[4/11/2016, 5:53:08 PM] <END>   Building Dependency Graph (69773ms)
transformed 639/639 (100%)
[4/11/2016, 5:53:36 PM] <END>   Finding dependencies (73443ms)
[10/7/2016, 5:53:46 PM] <END>   Requesting bundle: {"url":"/index.android.bundle
?platform=android&dev=true&hot=false&minify=false"} (83923ms)


On successful deployment of the app to the android emulator we can see our application running.

Any code changes you make for this app can be immediately seen by typing Shift + R twice

Conclusion

Creating a simple mobile app using React Native can be done in few simple steps. The development environment that React Native enables us to develop and deploy a mobile app faster and easier.

Please leave your comments, questions, suggestions, tips in the comment section.