Getting Started with React Native

React Native is a UI framework developed by Meta, Inc. It is used for developing applications for Android, IOS, Android TV, desktop, Web etc. It allows us to use the features of React with native platform capabilities.

This article discusses how to set up your initial React Native project.
There are two ways to do so.

1. Using Expo CLI

2. Using React Native CLI

So what’s the difference between the two methods, and why choose one over another?

If you are already familiar with mobile app development you can use React Native CLI. It requires Xcode or Android Studio to get started. It’s great if you have them already installed on your system, otherwise it can take a long time to install and configure those.

If you are a beginner with no experience working on Android development you should choose Expo CLI. Expo is a collection of tools built for React Native. It has a lot of features which you can utilize while working on building something great. The most important feature for us right now is that Expo can get you started on writing your React Native app in a few minutes, on top of that you only need the latest stable version of NodeJS and a phone or emulator to begin. With Snack you can run your React Native app directly in your browser, which eases work.

Let’s see how to set up projects both ways.

Using Expo CLI:

If you have Node 12 LTS or above already installed you can install Expo CLI using npm.

npm:
npm install -g expo-cli

Yarn:
yarn global add expo-cli

Then you can create a new project, “TutorialProject”, by running:

npm:
expo init TutorialProject

cd TutorialProject
npm start # you can also use: expo start

yarn:
expo init TutorialProject

cd TutorialProject
yarn start # you can also use: expo start

Running Your React Native Application:

Install Expo Client on your Android and iOS and connect your device to the same network as your computer. On Android you can use Expo to scan the QR code from the terminal to open your project in your device or emulator. On iOS, you can use the built-in QR code scanner in the camera app.

Using react-native-cli:

In this section we will set up a project using react-native-cli. This section is written for Android development using the Linux system.

Installing Dependencies

You will need Node, the React Native command-line interface, a JDK, and Android Studio.

Node
Follow the official document How to install Node on  your Linux distribution to install Node.

Java Development Kit
Java SE Development Kit (JDK) or above is required for React Native. You may download and install OpenJDK from AdoptOpenJDK or your system packager. You may also Download and install Oracle JDK 14 if desired.

Android Development Environment

Setting up the development environment is a hectic task. You should follow these steps.

1. Downloading and installing Android studio

2. Open Android Studio, click on the “Configure” button and select "SDK Manager”.  Then visit SDK platforms tab and check these two options:

3. Android SDK Platform 29

4. Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

5. Select the “SDK Tools” tab and check the box next to “Show Package Details”. Look for and expand the “Android SDK Build-Tools” entry, then make sure that 29.0.2 is selected.

Setting Environment Variables

Some environment variables are required by the React Native tools.

Open your file  $HOME/.bash_profile and add these lines to the file:

1
2
3
4
5
export ANDROID_HOME = $HOME / Android / Sdk
export PATH = $PATH: $ANDROID_HOME / emulator
export PATH = $PATH: $ANDROID_HOME / tools
export PATH = $PATH: $ANDROID_HOME / tools / bin
export PATH = $PATH: $ANDROID_HOME / platform - tools

Type source $HOME/.bash_profile for bash or type source $HOME/.zprofile to load the config in your shell.

Verify that ANDROID_HOME has been set by running echo $ANDROID_HOME and echo $PATH to check directories.

Watchman

Follow the Watchman installation guide to compile and install Watchman from source.

Creating Project

Now when everything is set up you can open the terminal and create your project by running:

npx react-native init TutorialProject

Setting Up Device

1. Using a physical device

If you are going to use a physical device you can do it by connecting your device by USB tethering and following the steps given here.

2. Using a virtual device
If you are planning to use a virtual device in Android Studio to open ./TutorialProject/android, you can do so from Android Studio in AVD manager.

Running Your React Native Application

Step 1: Start Metro

First, you need to start Metro (a JavaScript bundler).To start Metro, run npx react-native start inside your React Native project folder:

npx react-native start

Step 2: Start your application

Let Metro bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

npx react-native run-android