How to develop your first React Native Application?

React Native is one of the most sought-after mobile app development frameworks. This Facebook-created framework has React as its base and uses JavaScript to build cross-platform applications. React Native apps share a single codebase for the Android and iOS operating systems. Developers write these apps in JSX and compile them into the native code. You’ll be able to customize this native code to suit specific project development requirements. As such, one could barely distinguish the cross-platform apps built with React Native from truly native apps.

Since React Native development teams can target several platforms and operating systems with the same codebase and development effort, its popularity is sky-high. This framework also comes with multiple other beneficial features. So, if you’ve not yet explored this profitable framework, it’s high time to consider it for your next project. This post provides step-by-step guidance to beginners on how to sail through their first React Native app development project.

Getting Started with Developing a React Native App

There are two options for getting started with the development process. You either employ Expo or the React Native CLI. Let’s explore the offerings and development steps of each of these approaches!

Get Started with Expo

If you are a novice in the mobile app development arena, I would recommend you to use “Expo Go” as it offers an easier and quicker way to build your first React Native application. Expo contains a set of services and tools best suited to the React Native environment. It comes with numerous handy features. Here are the most notable ones!

Using Expo, you get a wide variety of pre-built libraries and components including a feature-packed native runtime with several modules. React Native app developers can speedily prototype, create, and publish applications without having to worry about the underlying native code.

Expo Go speeds up the development process and reduces friction. Developers can effortlessly experiment with their innovative ideas. You only require a mobile phone device or an emulator and the latest Node.js version. You can run the app on a physical device without the need to install Android or iOS native SDKs. Expo Go also allows you to test your application directly on your mobile device when you carry out any modifications.

Expo is a great choice when you are working on simpler projects and need to develop an app quickly. However, with Expo Go, you cannot add customized native code. You can only use the built-in native modules offered by Expo. For using third-party native modules and libraries you need additional development steps.

Here are the key steps for getting started with Expo!

Step#1

Run the command npm install -g expo-cli in your terminal for installing the Expo CLI.

Step#2

Use the Expo CLI for creating a new React Native project; run the code expo init my-app in your terminal.

Step#3

Select your preferable template for the project. Some examples are “tabs,” “blank,” etc. Follow the prompts for setting up your project.

Step#4

After you create the project, run the command cd my-app in your terminal to navigate to your project directory.

Step#5

Run the command npx expo start or yarn expo start to start the development server.

Step#6

Install the “Expo Go” app on your Android or iOS mobile device. Connect it to the same wireless network that your computer is using. Now, use the “Expo Go” app to scan the QR code on your mobile device for viewing the app in development. For iOS devices, you can use the in-built QR code scanner provided by the default Camera app of iOS.

Step#7

Now, try making changes. Modify your app’s code and then save the files. Your changes will be reflected on the Expo Go app in real time.

Step#8

Thereafter, run the command expo build: android or expo build: ios to create a production-ready version of your app.

This way, you’ll be able to create a standalone build of your React Native software solution. You can upload it to the Apple App Store or Google Play Store.

Get Started with React Native CLI

If you have some prior experience in creating mobile applications or have more complex development requirements, the React Native CLI is a preferred pick. Using React Native’s command-line interface, developers enjoy more flexibility and control over the development process. One can access the entire React Native API and can integrate the necessary native modules and libraries into the application. This approach proves particularly beneficial for developing complex apps that need advanced features and custom integrations.

Here are the key steps for getting started with React Native CLI!

Step#1: Install Dependencies

Install the React Native CLI and all the necessary dependencies for getting started. The official documentation includes the installation instructions based on your OS. These are the major steps:

1. Download and install Node.js and npm on your machine from the official website of Node.js at https://nodejs.org/en. You can use the popular Windows Package Manager “Chocolatey” for installing Node. It’s advisable to use an LTS version of Node. And, if you need to switch between various versions, you can use the “nvm-windows,” one of Node’s version managers for Windows. If you have a Node version already installed on your machine, ensure that it’s Node 14 or a more advanced version.

2. The next vital step is installing React Native CLI globally on your system. For this, open your terminal or command prompt and then enter this command:

     npm install -g react-native-cli

3. Also, install a JDK (Java SE Development Kit) via “Chocolatey.” Follow these steps. Open the Administrator Command Prompt and right-click the Command Prompt. Then choose the option “Run as Administrator” and employ the command choco install -y nodejs-lts microsoft-openjdk11. Here, I recommend using JDK11 as issues might crop up if using higher JDK versions.

Step#2: Set a native Development Environment

Install either Xcode (for iOS development) or Android Studio (for Android development) on your machine. Now that you’ve installed Android Studio/Xcode, you need to configure them with React Native. Follow the detailed instructions provided in the official documentation for this purpose.

Create a new React Native project. For this, you need to open your command prompt or terminal and run the following command

npx react-native init MyFirstApp

You need to replace “MyFirstApp” with the name of your project.

Step#3: Run your React Native Application

To begin with, you need to start the JavaScript bundler “Metro.” “Metro ships with React Native. It accepts an entry file and different options and then, generates a single JS file that contains the code and all the dependencies. Then, start Metro by running this command inside your React Native project directory.