React Native is a framework for Javascript to create native mobile apps. Facebook announced this framework in 2015 to create iOS and Android apps using same javascript codebase instead of writing the different code for different platforms. It uses the same building blocks as iOS and Android apps use to build apps, with react architecture and javascript.

React Native Setup

Setting react native on windows machine is very easy. There are few steps to follow

1) Install JDK7 or newer version of Java from official website.

2) Install NodeJS

3) Install Android SDK

4) Set environment variable for JAVA_HOME and ANDROID_HOME

5) Install React Native CLI globally using the command

npm install react-native-cli –g

This will provide you a utility/command react-native to manage and configure projects.

6) Create React Native project using command

react-native init <project-name>

If everything gets fine you will see the following output on console

added 319 packages and updated 2 packages in 63.072s
To run your app on iOS:
   cd D:\PROJECTS\Android\MyPU
   react-native run-ios
   - or -
   Open ios\MyPU.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd D:\PROJECTS\Android\MyPU
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

In the above snippet MyPU is the project name. You can run the build on the virtual machine by configuring it in android studio but better to run it on physical device as running virtual machine is very slow process. To run build on physical device follow the steps :

     *) Connect your device to machine (Android Device)

      *) On developer option from Setting -> Developer options

7) Now change the directory to created project. In our case MyPU. Use cd command from terminal to change the directory to MyPU

 cd MyPU

8) Run the following command to run android build

react-native run-android

A react packager will be started to load dependency graph as a new process and it will take few minutes to generate android build. If build process is successful then you will see on the command prompt

BUILD SUCCESSFUL
Total time: 2 mins 47.906 secs
'adb' is not recognized as an internal or external command,
operable program or batch file.
Starting the app (D:\SOFTWARE\LANGUAGE\ANDRIOD\AndroidSDK1/platform-tools/adb sh
ell am start -n com.mypu/com.mypu.MainActivity...
Starting: Intent { cmp=com.mypu/.MainActivity }

And app will be visible on your connected physical device 🙂

Issue 1 : Unable to load script

There can be error on your connect device showing

Unable to load script from assets “index.android.bundle”

To solve this problem

1) Stop the existing running command by pressing Ctrl + C.

2) Create the folder assets under android/app/src/main/assets

3) Now you need to change the android bundle output using the following command

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

4) Now run the command again to run android build

react-native run-android

Issue 2 : SDK Version Mismatch

If you have Android SDK version mismatch in build.gradle and the one installed in your system, then the following error will be shown your console

FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> Failed to find Build Tools revision 23.0.1
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED

Solution

Open Project-Name/android/app/build.gradle file and under 

android {
  compileSdkVersion 25
  buildToolsVersion "25.0.2"
 defaultConfig {
   applicationId "com.demorn"
   minSdkVersion 16
   targetSdkVersion 22
   versionCode 1
   versionName "1.0"
   ndk {
     abiFilters "armeabi-v7a", "x86"
   }
 }

update the compileSdkVersion and buildToolsVersion  to the version that you have installed under Android/sdk/build-tools.

Bonus : Directory Structure of React Native App

Directory structure is a way how you construct or bind your code and into folders. Even though this does not matter in the initial phase of app but it is the best practice to use a simple directory structure of app for better understanding. You can follow any directory structure to construct your app. But personally I use this structure to make my apps.