Develop Mobile App using React Native

React Native is a Facebook developed tool set, which enables developer to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere.

Supported operating systems are >= Android 4.1 (API 16) and >= iOS 7.0.

Please refer to the official site for more detail introduction.

This project is a testing project using MoviesApp sample from React Native.

Development Environment Setup

To develop React Native Apps, do the following:

Setup Development Dependencies

• Install Homebrew to manage packages
• Install Node.js 4.0+, or using nvm commands

nvm install node && nvm alias default node

• Install watchman to watch node file changes

brew install watchman

• Install flow

brew install flow

In order to keep the programs up-to-date, it is recommended to run following periodically

brew update && brew upgrade

Setup Reactive Native

• Run following to install

npm install -g react-native-cli

• To create the initial App project run:

react-native init [project-name]

• To add a platform to existing project, e.g. adding Android to exsiting react Native project First update the react-native dependency in package.json file then run following commands:

npm install
react-native android

Project Setup

• git clone this project to your local environment
• run following commands to setup the project environment:

npm install

Native Development Setup

To develop and run the Apps, there are native underlying environment requirements:

• For iOS
  • require Xcode 6.3+
• For Android
  • Android SDK
  • Further detail regarding Android package setup refer to here

Run the Apps

• To run the iOS App
  • Open ios/[project-name].xcodeproj and hit run in Xcode
  • Open index.ios.js and start your implementation
  • Hit Command-R to reload the App in iOS simulator to see the change
• To run the Android App
  • run following command to run the App in simulator or USB connected device

  react-native run-android

  • Open index.android.js to update your implementation
  • From the simlulator Menu button then select Reload JS to see the new changes
  • Run following to see the logs

  adb logcat *:S ReactNative:V ReactNativesJS:V

Resources

1. React Native Getting Started guild
2. React Native Tutorial
3. React Navtive component resources
4. React Getting Started guide