React Native is the next generation of React – a Javascript code library developed by Facebook and Instagram, which was released on Github in 2013. Native app creation means writing apps for a specific operating system. React native is also cross-platform.

React Native helps developers reuse code across the web and on mobile. Engineers won’t have to build the same app for iOS and for Android from scratch.

Overview

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that’s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

React Native combines smoothly with components written in Objective-C, Java, or Swift. It’s simple to drop down to native code if you need to optimize a few aspects of your application. It’s also easy to build part of your app in React Native, and part of your app using native code directly – that’s how the Facebook app works.

Get Started

If you are new to React Native then I suggest you to get basic understanding of React.js. Most fundamentals of React native are similar to React.js like how to create Component, import and export Components in React js and much other process.

Before you start React Native app development, you need to install Node js into your system.

Let’s assume you have Node js installed on your system. Go to your project folder to initiate react app.

x. ./Projects/react

The React Native CLI

if you use react native CLI for your application, you’ll need to install react native command line interface.

To do that run following command.

npm install -g react-native-cli

Java

React Native requires Jdk(Java SE Development Kit). You can download it from here.

Android Studio

Download android studio. Choose custom installation and make sure to select ‘Android SDK’, ‘Android SDK Platform’ and ‘Android Virtual Device’. Then click next to install all this components.

Install Android Sdk

Android studio installs the latest Android Sdk by default. We need Android 6.0(Marshmallow) or higher. We can install Sdk From from Sdk manager in Android Studio.

The SDK Manager can be accessed from the “Welcome to Android Studio” screen. Click on “Configure”, then select “SDK Manager”.

Select sdk and click on apply. Select the “SDK Platforms” tab from within the SDK Manager, then check  “show package detail” in the bottom right corner. Then check on following items and install.

  • Google APIs
  • Android SDK Platform 23
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

Select the “SDK Tools” tab and check the box next to “Show Package Details” here as well. Look for and expand the “Android SDK Build-Tools” entry, if you have installed sdk 6.0 then make sure that 23.0.1 is selected. If other versions of sdks are installed then you need to choose different version of build tools.

Environment Variable

You need to configure environment variables to be set up in order to build apps with native code. For Linux

Add the following lines to your $HOME/.bash_profile config file:

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platformtools

For Windows go to : control panel > change settings > Advanced and click Environment variables.

Click on New and add Following :

Variable name : ANDROID_HOME

Variable value : C:\Users\your-user\AppData\Local\Android\sdk

Note: if you can’t find AppData folder then it might be hidden.

Create New Application

Now that you are all set up you can generate new reactive project using this command.

react-native init MyProject

After initialization go to your project folder.

cd MyProject

Virtual Device

Now we need virtual device to run our app. We can either use external device or we can create our own device in Android studio.

Let’s create virtual device in android studio.

Go to Avd Manager in Android studio. Select “Create virtual device” choose phone from list and then click “Next”. Select the “x86 Images” tab and then choose your sdk version like marshmallow 6.0(Google Api) or other versions. Click “Next” and then “Finish”. After creating your virtual device click on green triangle button to launch it.

Run Your React Native App

Now in command line we are in our project folder. Run following command.

$ react-native start

Open other command line and type following command.

$ react-native run-android

This will build your application and ‘install’ it in your virtual device. You can see welcome to react native in centre of the screen. For some reason if build was successful and app won’t run on your device, check your apps in menu. You can find your app named ‘MyProject’ and you can open it from there.

Preview:

You can see the text ‘to get started, edit index.andriod.js’. So open index.andriod.js’ and change heading.

Change “Welcome to React Native!” to “Welcome to My Project” and save it. Then go to your virtual device and press R key two times to refresh screen. You can see our content changed on screen.

Preview:

That’s it. Now you can develop your own app with your own design in react native. If you want to learn more you can go to Official React Native app website. You can also ask questions related to react native on stackoverflow. Stay connected to learn more about React Native.

For any further queries you can write to us at info@letsnurture.com.

Want to work with us? We're hiring!