Sunday, 2 April 2017

Build native android app in javascript

React Native is a JavaScript framework for writing real, native rendering Android and ios platform applications. Instead of running React in the browser and rendering to div's and span's, React Native run it in an embedded instance of JavaScript.

Android App in javascript react

Requirement :
Node.js should be installed on your machine.

Install global package of react native cli :
npm install -g react-native-cli

Install Android Studio :
Android Studio 2.0 or higher. It will provide you the Android SDK and emulator required to run and test your React Native apps.While installing the android studio choose customize installation and choose Choose Android Virtual Device.

After installation, choose Configure | SDK Manager from the Android Studio welcome window.

In the SDK Platforms window, choose Show Package Details and under Android 6.0 (Marshmallow), make sure that Google APIs, Intel x86 Atom System Image, Intel x86 Atom_64 System Image, and Google APIs Intel x86 Atom_64 System Image are checked.

In the SDK Tools window, choose Show Package Details and under Android SDK Build Tools, make sure that Android SDK Build-Tools 23.0.1 is selected.

Set environment path for  ANDROID_HOME
export ANDROID_HOME=~/Android/Sdk

To do that, add this to your ~/.bashrc, ~/.bash_profile (or whatever your shell uses) and re-open your terminal:

Watchman : Watchman is a tool by Facebook for watching changes in the filesystem. It is recommended you install it for better performance.

git clone
cd watchman
git checkout v4.5.0  # the latest stable release
sudo make install

You can create the virtual device to run the app on emulator or you can debug also in android device.

Settings > About Phone > Build number > Tap it 7 times to become developer;
Settings > Developer Options > USB Debugging.

Now install react native using these commands.

react-native init firstNativeApp
cd firstNativeApp
react-native run-android

Note : By default the app will run on port 8081 so please check if some other process will using the 8081 port or not.

This error will happened because in port 8081 i'm running already a nginx server . so your can stop it or change the react default port.

While running the react-native run-android you can also check the status of package is running or not using command react-native start.

if some error will occured while run-android the it must be some sdk problem or avd not started. sometime some gradle or local properties error  also occuring so create settings.gradle in your root project and add this code include ':app'. Under android folder you can create and add sdk.dir=~/Android/Sdk your sdk path.

Then open your project root file and change some content and see the changes in app also if app will not refreshing automatically then check your watchman installation step or your directly refresh you in device by shaking it. I hope you understand the how app will run in android. 

Featured post

How to create dynamic schema in mongodb

Sometime what we need in our application is to create mongodb schema for collection and some of our collection schema are same but names are...

Popular Posts