Building Android and iOS Apps with React-Native in 5 Minutes. ~ Coding Savvy
Coding Savvy FB Twitter Google
» »

Building Android and iOS Apps with React-Native in 5 Minutes.

As I have mentioned in my previous post Why I Moved from Ionic to React-Native for Android and iOS Development, I want us to demonstrate how quick and easy it is to create an Android and iOS application with React-Native in Just 5 Minutes. This app will not be doing anything magical yet but to display some regular texts, As go further in React-Native tutorial series, The magic inReact-Native will reveal itself. We will demostrate how to earnest the power of native module to create a robust Android and iOS app using React-Native.

Building Android and iOS Apps with React-Native in 5 Minutes.

Getting Started with React-Native

As the React-Native Getting Started Page Suggested, There are two different way to initiate a React-Native Application but for this tutorial we are going to use the Build Project with Native Code.

Android Apps can be built with all Platforms i.e Windows, Mac and Linux. But React-Native requires Mac to build iOS because it compiles the codes to Real Native codes that non-Mac devices can't compile.
 Android Platform setup requires Android Studios already installed and all environmental variables setup appropriately also iOS platform setup requires Apple xCode installed.
 Follow the instruction on the React-Native Getting Started Page carefully to get the environment ready for development.

Installing Node

If not already installed NodeJS is needed to use React-Native for building apps, You can Download and Install Node using the NodeJs installation instruction on NodeJS website.
On Mac you can also do this easily using brew:
brew install node

This will install Node and NPM (NodeJs Package Manager) on the choosen device, For other OSs, Use the installation instruction on the NodeJS Website.

Building Android and iOS Application with React-Native

Firstly, Let's install React-Native (If you don't have it installed already) using the following command:
$ npm install -g react-native-cli

If the command above executed successfully, We are good to create a new React-Native Project but if you encounter an error while executing the command make sure you have an active internet connection and retry and make sure you follow the React-Native Getting Started Page carefully.

Building React-Native Project

Now we can create a new React-Native Project using this command on the terminal:
$ react-native init AwesomeProject
This will bootstrap a fresh React-Native project in a directory named after the project name.

Running React-Native Project

Running React-Native project can be done with a simple command depending on the platform. Firstly, Make sure to be in the project directory i.e by running:
$ cd AwesomeProject

This command will run the app on any connected device or an existing emulator.
For Android, In the the terminal run the following command, :
$ react-native run-android

For iOS, Application can be run using this command:
$ react-native run-ios

If you follow all the instructions well, Something similar to this should appear on your screen.

Was this article helpful?
Thanks! Your feedback helps us improve tutorials.

You May Also Like...

No comments:

Post a Comment