Hello everyone. I'm Masahiro Yanou of KEY Team.
Technology Post No7!!「Try to React Native for Android」.

Past Post List is here.

React Native published on GitHub as open source by Facebook. This blog introduce the React Native for Android Sample.
Attention Today(2015/09/24), React Native supported only OSX.


Install JDK

Java Download Site

Install Homebrew

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install Android SDK

$ brew install android-sdk

Add ANDROIDHOME to .bashprofile

ex) $ export ANDROID_HOME=/usr/local/opt/android-sdk

Download Android SDK

$ android

Start Emulator

$ android avd

After create, click Sart...

Install node(nodebrew)

$ curl -L git.io/nodebrew | perl - setup
$ nodebrew install-binary latest
$ nodebrew use latest

Install watchman and flow

$ brew install watchman
$ brew install flow

Quick Start

$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject/
$ react-native run-android
※In this time, run Server to load a JavaScript from device.
If don't run server, output as follows:
[warn] JS server not recognized, continuing with build...
※In this time, if device don't exist, happen error.
$ $ANDROID_HOME/platform-tools/adb shell am start -n com.raproject/.MainActivity
Starting: Intent { cmp=com.raproject/.MainActivity }

After run command, start application.

Add Button

Before this section, sample only. so, I try to add button.

$ npm install react-native-button --save

When create button, you need to another module. I was very surprised.

In this time, when click button, output current time. When output current time, I used moment.

$ npm install moment --save

HTTP Connection

One more thing.

When development android with Java, you should write http code as background.
But in this time, you don't care it. It's too easy.

I used ajax Library SuperAgent.

$ npm install superagent  --save


If you think react is very easy, you try React Native for Android .
See you next time.

Email: yanou at atware.co.jp