Your first project with React Native

React Native has become the most popular cross-platform mobile application development framework which is developed and maintained by Facebook.

In this article, I am going to divide this topic to three main sections such as,

1. Why React Native?
2. Prerequisites and environment setup
3. Initializing your first project

Let’s dig into the topic.

Why React Native?

React Native is a cross-platform mobile application development framework which can be used to develop mobile apps for Android as well as iOS, using React with native technologies.

Since it creates platform-specific versions of components, a single codebase which is written using JavaScript, can be shared across Android as well as iOS. With a fair knowledge of JavaScript and understanding of native technologies, anyone can start building mobile apps using React Native.

Prerequisites and environment setup

Before you start the journey with React Native, you have to install and configure some cli-s. You can either use npm or yarn as your package manager for the project. Since npm is bundled with Node.js, you can download and install Node.js. And yarn is recommended to install through npm. You can download Node.js via this,

Download | Node.js

To install yarn package manager, type the below code in your terminal.

npm install --global yarn

After that, you need to have an Integrated Development Environment(IDE). Here, I will mention my personal preferences, but you can find which is suitable for you by a simple Google search. I personally recommend Visual Studio Code and WebStorm.

To download Visual Studio Code,

Download Visual Studio Code - Mac, Linux, Windows

To download WebStorm,

Download WebStorm: The Smartest JavaScript IDE by JetBrains

After installing your IDE, you have to setup the environment for the React Native project. You can either use Expo CLI or React Native CLI to build your React Native project.

If you are completely new to mobile app development, it is easy to use Expo CLI, because it runs your project on emulator or mobile(both Android/iOS) within few steps.

Install Expo CLI

You can install that using npm. Type,

npm install -g expo-cli

Configuring React Native CLI

Note: You don’t need to install React Native CLI, you can globally access all the react-native commands using npx prefix.

But build projects with React Native CLI, you have to do some more additional configurations.

First you need to install Java SE Development Kit(JDK) 8 or higher. You can download that using below link,

Java SE

After that you have to install Android Studio with Android SDK, Android SDK Platform, Android Virtual Device, Performance (Intel HAXM) . Finally you have to set environment variables for Java as well as Android SDK. Also you have to add the path of platform-tools to the environment variables.

Initializing your first project

Using Expo CLI

To initialize your first project in React Native using Expo CLI, simply type,

expo init myFirstProject

To run this project,

//First, navigate to project folder
cd myFirstProject
//Then
expo start
//Also, you can use
npm start
//or
yarn start

Note: It’s required to open android emulator or connect android device to PC, before you run the project. Also you can use Expo Go on your mobile(both iOS and Android) to scan the QR code and connect to the metro server to see the output of your code.

Using React Native CLI

Note: It’s mandatory to have macOS to build apps for iOS using React Native CLI.

To initialize your first project in React Native using React Native CLI, type,

npx react-native init myFirstProject

After that, create local.properties file inside myFirstProject/android .

## This file must *NOT* be checked into Version Control Systems,
# as it contains information specific to your local configuration.
#
# Location of the SDK. This is only used by Gradle.
# For customization when using a Version Control System, please read the
# header note.
#Thu Sep 24 13:04:50 IST 2020
sdk.dir=C\:\\Users\\Chenuka\\AppData\\Local\\Android\\Sdk
//Replace the directory path with your Sdk path. 

Finally, you can run the project using,

npx react-native run-android

Note: It’s required to open android emulator or connect android device to PC, before you run the project.

TA DA… That’s all what you need to begin your journey with React Native.

Thanks for reading!