Quickstart With React Native
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
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).
Whats Next
- React Native Docs (Official React Native Docs)
- Expo Docs (Official Expo Docs)
- React Native Express (Collection of things to get you started fast)