React Native is a framework created by Facebook for developing apps for mobile devices. What makes it unique among JavaScript-based app development frameworks is that it uses native UI components instead of HTML/CSS inside of a WebView. React Native is based on the React framework, which was originally developed to create web applications which are typically data-heavy, and/or dynamic.

Why React Native?

React, Angular, and Vue are the three most popular JavaScript-based frameworks, and they have become increadibly popular over the past decade, primarily due to two important features which all three of them provide which greatly simplify UI development, and help to tame the inevitable code complexity which typically goes along with the development of a complex user-interface:

• Reactivity — your user-interface components can change automatically based on a changing data-model. This means that, as a developer, the meat and potatoes of your code logic can be focused on the business entities you care about rather than manipulating div tags and CSS selectors.
• Components — User-interface code should be divided into independent, re-usable components, just like non-UI code. React, like other JavaScript-based UI frameworks, provides a mechanism for creating components which can be embedded within other components.

While all of these frameworks, on their own, can be used to create mobile apps by using a WebView-based wrapper such as Apache Cordova, there are some important reasons to choose React Native instead:

• Performance — React Native does not have the overhead of a WebView, and as a result typically performs better than WebView-based apps, and close to the level of true native apps.
• Huge community — Due to it’s popularity, there are a large number of developers already using React Native, meaning it is typically easy to find answers to questions you might have. There are also a very large library of pre-made native UI components to choose from when creating an app.

Now, let’s get started by creating a simple app in React Native!

Should you use Expo, or not?

The first thing to consider when creating an app using React Native is whether to use Expo. Expo is a set of tools which greatly simplifies the React Native development process. With Expo, you can get an app up and running in minutes, and test it on your phone by simply scanning a QR code. You can also use a non-Apple computer to develop apps for iOS devices, which is huge plus for many people. Expo is a great choice if your app is not likely to depend on very many obscure native libraries, however, the process of ejecting Expo from an existing application can be rather painful. If you suspect that your app may require libraries not supported by Expo, it is probably better to skip it.

Expo requires Node version 10 and above. We can install expo, and create an app with a few simple commands:

npm install -g expo-cli
expo init MyExpoApp
cd MyExpoApp
expo start

Continue on to the next section if you would rather skip Expo…

Getting things ready

Development OS and target platform

This article will cover development on a Linux or Windows computer targetting an Android device. React Native apps can also target iOS devices, however, an Apple computer with XCode installed is required.

Android studio

Installation

First, download and install Android Studio

Android SDK

React Native requires Android 9 (Pie) with SDK 28 to run. You can either select the Android SDK during the installation, or after installation:

1. Open the SDK Manager by selecting Tools > SDK Manager
2. Check the box next to Android 9.0 (Pie)
3. Click OK
4. Follow the installation process

Virtual Device

You can test your app on a real Android device, or an emulator running on your computer. If you do not have access to a physical device, or you would prefer to use an emulator:

1. Select Tools > AVD Manager
2. Click Create Virtual Device in the bottom left corner of the resulting window
3. Follow the steps to create and setup your virtual android device

Environment Variable

React native needs to know where the Android SDK is installed. It relies on the environment variable ANDROID_HOME for this. This variable should be set to the location you selected to install your Android SDK. Additionally, the PATH environment variable must be appended to include the following directories:

• $ANDROID_HOME/tools
• $ANDROID_HOME/tools/bin
• $ANDROID_HOME/emulator
• $ANDROID_HOME/platform-tools

Editing environment variables is accomplished a bit differently depending on your operating system:

• Windows 10:
  • Tap the ⊞ Windows button, or click the start menu
  • Search for “environment variables”, and select the first result
  • Click the Environment Variables button at the bottom of the System Properties window
  • Click New to add an environment variable
• Linux:
  • Open ~/.bash_profile with a text editor
  • Add export ANDROID_HOME=/path/to/your/android/sdk
  • Save your changes

Node

React Native requires at least version 8.3 of NodeJS to work.

• Windows: Visit the Node Downloads page, and select the appropriate Windows installer.
• Linux: The NodeJS website has a comprehensive set of instructions for installing node using the built-in package managers of many popular Linux-based operating systems.

Java development kit

In order to use React Native, version 8 of the Java Development Kit (JDK) needs to be installed on your machine. You can either use Open JDK, or the official JDK from Oracle. Binaries are available for both Windows and Linux:

• AdoptOpenJDK Pre-built binaries
• Oracle JDK8 Downloads

Installing the React Native command-line tool

Once node and npm are installed, going forward, the instructions will be the same on both Windows and Linux. React Native comes with a command-line tool which we will use to facilitate the app creation process. Install it as a global command by executing the following in a terminal:

npm install -g react-native-cli

Creating and running the app

Now, it’s time to actually make our new app.

react-native init MySweetNewApp
cd MySweetNewApp

 

This will create all of the files and directories we need for a basic, bare-bones, React Native app that we can build upon. Now we need to run the app on our emulator. We can list all available emulators like so:

emulator -list-avds

We can then run the emulator we want:

emulator -avd [Emulator Name]

Finally, lets start up the app:

react-native run-android

That’s it! Our app is up and running!