Why React Native

Learn once, write anywhere: Build mobile apps with React.

With React Native you can build mobile apps for both iOS and android platform in a fraction of development time. Since React Native uses Javascript technologies skilled developers are easily available. Many existing React developers can bring their web knowledge and start being productive instantly.

React Native is a framework build by facebook and is currently under active development. Already got some big players in the industry started using React Native for their products. Facebook, Instagram, Soundcloud, Walmart, Airbnb, Wix are a few of them.

Who is this for

Anyone who wants get up and running with react native but do not have a lot of time to learn and do it.

This blog post is only going to touch the surface of what React Native is and how it works.

If you want a more detailed article, React Native has as a really good getting started documentation over at React Native official page

What is needed

• A text editor (Any text editor will do. But I personally like VS Code)
• Node.js

The Setup

All the commands below are being run in Mac OSX. But this should work in linux or windows environment as well.

Make sure you have node and npm installed by running the following commands on the command line

node -vnpm -v

We will be using expo for running our application. Expo makes it very easy to test and share our application. Using expo has a few caveats . So it might not be for everyone. Basically if you need access to some native module that expo has not yet provided access to you wouldn’t benefit from using expo. But for most cases expo is all you need.

npm install -g create-react-native-app

This will install create-react-native-app command line utility.

And that’s it. Your computer is now set up to make React Native applications.

create-react-native-app AwesomeProject

cd AwesomeProject
npm start

Download the expo client app for Android phone or an iPhone from the app store and you can see the app live on you phone by scanning the QR code from terminal.

On android you can scan the QRcode from within the expo app. In iPhone due to a recent update in apples policy that no longer works. You can still start the app by scanning the QRcode with the camera app on iPhone.

As long as the laptop and the phone are in the same network the app will load up on your phone.

Debug

Depending on your OS you may face a few issues.

Mac OSX

If you wish to run the iPhone simulator from Xcode you have to have command line tools installed. To install run

xcode-select --install

Then you can start a iPhone simulator and run the app by

npm run ios

Windows

I was having some difficulty running the application from command prompt in windows. Only thing that worked for me was downloading the Expo XDE and opening my project through that.

Simulator

If you are in Mac OSX or in Windows you can run the app in an Android simulator. You can either use Android Studio or install ADB by itself to run android simulators.

A easier way would be to install Genymotion (Personal Edition).