Today we are going to develop our first React Native application. In this tutorial I am going to directly jump into coding without explain code much. You don’t need to know all sort of technical jargon to write your first React Native application.

This application just prints “Hello World” text on your phone screen. This application can run on Android or iOS device without any code change. This is the power of React Native. You can run your application both Android or iOS devices with minimum code change and most of the code common for both platforms.

Before write any code you need to setup your development environment, if you haven’t done yet. You can get all the information here to setup your React Native Development Environment.

Creating a new application

To create new application, you have to use React Native built-in command line interface. You can access it without installing anything globally using npx, which ships with Node.js. Let's create a new React Native project called "HelloWorld":

npx react-native init HelloWorld

You need to modify App.js file as below to print “Hello World” on your phone screen.

First two lines import "react" and "react-native" components. Then write simple function called "HelloWorldApp" and it just return "Hello, world!" text.

Finally, default export of "HelloWorldApp" function for rendering.

Next step is to run your application. Below command run your application either on your emulator or mobile device. If you want to test your application on the emulator you have to load your emulator. If you want to test your application on your phone you have to connect your phone via USB port to computer and run below command.

npx react-native start

This will load metro server.

Then run your application, run below command.

npx react-native run-android

Now you can see your code is running like this.

Now modify your code and see how the changes are reflecting. This is very simple code, but good starting point. Next we try to develop some basic React Native Calculator application.

This tutorial I am going to focus on how to install and build your first React Native application.

There are two methods you can follow to develop React Native app. If you are very new to mobile development and not familiar with setting up mobile development environment, I would suggest to start with Expo CLI. Expo is a set of tools to build React Native application. It has may features; you have to select suitable features to develop your app in minutes. You need only a recent version of Node.js and a phone or emulator. If you want to test your React Native application on your web browser before installing any tools, you may use Snack.

If you are familiar mobile developer from other languages and want to try out React Native, you may try out React Native CLI. For that you need to install either Xcode for iOS or Android Studio for Android OS.

If you are a beginner, my personal suggestion is to go for Expo CLI and familiar with the React Native features and concepts. Actually, using Expo CLI, you can develop production level application. But when you move forward there might have some limitation when your application grow to access very hardware specific features. For example, if your application wants to read NFC card, get some data from Bluetooth enabled devices…etc you might want to go for React Native CLI rather Expo CLI. In my own experience I have developed Expo application for many projects which read mobile device network connection, camera, Wi-Fi connection and many more. Most important feature is if you write your Expo app in a such way that you may use same code for iOS and Android OS as it is. But in React Native CLI most of the time you need to some slight modifications to build for iOS and Android OS.

Method 1: Expo CLI

Prerequisite is to install Node 12 LTS or greater on your machine. You can use npm or yarn command to install the Expo CLI command line utility:

npm install -g expo-cli

 or

yarn global add expo-cli

One solution to this issue is you can use your mobile phone to test react native application without running on Android Emulators. For that you only need to run Metro server on your PC and test application run on your mobile phone. But this method has drawbacks you have only one platform to test your application. If you want to test your application on multiple platforms you have to use several Emulators with different Android versions and architectures.

Another solution is without load your Android Studio if you can use Android Emulators alone that will give better performance. For that you can use command line to load Android Emulators.

We can make native portable mobile applications utilizing JavaScript and React. It utilizes React to make a rich versatile UI interface. 

Presently, the inquiry strikes a chord, who's utilizing React Native? According to the official site, a huge number of applications are utilizing React Native from set up fortune 500 to up and coming new businesses. A portion of the well known applications that are utilizing React Native incorporate Facebook, Instagram, Bloomberg, Pinterest, Uber, Skype and so on 

Prior to beginning, it's suggested that you have the essential information on JavaScript and React so you can comprehend the React Native applications. 

Setting up the Environment

To begin, we need the underneath application introduced in the framework. 

NodeJS and NPM 

Python

Java SE Advancement Pack (JDK) 

Android SDK, Android Virtual Gadgets 

Visual Studio Code