Getting started with react native app development on android and Ios

React Native is a technology developed by Facebook that enables developers to leverage the flexibility of web development into Native App development.

React Native is created to get rid of pain of developing native application and iterative build cycles across different platforms.

Unlike other solutions like Cordova and Xamarin folks at facebook made it work across different platforms but kept the native experience of the underlying operating system intact.

Its not Write Once Run Everywhere! solution. Its based on Learn Once Use Everywhere! philosophy.

For Example

The apps that are developed for Ios uses the same Ios Controls whereas the apps for android used the Toolbar for Android devices.


On Ios

On Android

Getting Started with Installation

For Ios development

System Requirements

1. OS X is a must for ios app development.
2. Homebrew is the recommended way to install build and watch tools.
3. Install Node.js 4.0 or newer. (To know how to install Node.js for various Operating Systems See here )
4. Install watchman and flow by using following commands
• first update your brew repos using brew update
• brew install watchman.
• brew install flow (optional only if you wish to use flow).
5. Xcode 6.3 or higher.
6. Install react native command line tool by using npm install -g react-native-cli

If you just want to prototype or play around with react native app development you can use a great service such as https://rnplay.org/.

Creating the Project

1. react-native init MyFirstReactNativeApp
2. cd MyFirstReactNativeApp
3. Open ios/AwesomeProject.xcodeproj and click run in Xcode.
4. Edit the lines on the file index.ios.js
5. Press ⌘-R in your emmulator to refresh the app.

For Android developement

1. Android SDK
2. Android Emulator or genymotion emulator
3. Install react native command line tool by using npm install -g react-native-cli

Creating the Project

1. react-native init MyFirstReactNativeApp
2. cd MyFirstReactNativeApp
3. Open index.android.js Edit some lines.
4. Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your changes.
5. Run adb logcat *:S ReactNative:V ReactNativeJS:V to see your app logs.

Voila! You have completed your first react native app.