Build and Run react native app in android phone - Step by Step

The app building process has never been so easy. In this article, you will find the easiest way to use React Native CLI and Expo CLI to build react native applications. Most importantly, no prior knowledge is required to make a real app. This article will guide you through the process.

You may be wondering that building a react native app requires the skills of high-end coding and technical knowledge. Indeed, it is important to have sound technical knowledge but you don’t need to be an expert in coding.

Follow this tutorial to get a step-by-step process of building and running React Native apps on your real device.

If you are not into developing and want to seek help from a team of experts, you can reach out to the best react native app development company, 4 Way Technologies.

Different approaches to building react native applications

The most significant benefit that you can get from React Native framework is that you can use any one of the two options to build apps from scratch. These two approaches are dependent on the user’s preference, skill sets, knowledge, and convenience.

In this article, we have covered both processes. Before starting with app building steps, let us discuss what exactly are React Native CLI and Expo CLI.

What is Expo CLI?

Expo CLI is a react native app development framework that speeds up the app building process. It uses the npx expo tool to simplify the process; however, the built app is comparatively large. The concept of expo CLI is based on the managed workflow. Here, the term ‘managed’ implies that the tool itself manages every heavy lifting activity required for app building. Unlike the React Native CLI, you can easily create an app right from the beginning with some clicks and commands.

In a general context, Expo CLI is a kind of wrapper wrapped around the bare workflow.

What is React Native CLI?

React Native CLI is also a react native app development tool that gives enough flexibility to developers. You can use native code as per your needs. However, you should have an understanding of Javascript syntax and the Core components of React. The key concept of React Native CLI is based on the bare workflow, where you can play with your creativity without any restriction.

Although the app-building process with React Native CLI is complicated, you can challenge your learning curve with this app-building workflow.

Using React Native CLI to build and run app

Prerequisites

Before initiating the app building steps, you have to get the following prerequisites to set up your environment.

• Node.js
• Android Studio
• React native CLI
• Virtual device or Emulator.
• JDK

To enable virtualization, you must adjust the BIOS configuration. If you "disable" the Virtualization option in the Task Manager, you will be unable to install the virtual device or emulator in Android Studio.

2 steps to build react native app

1. Environmental setup

Here we are not explaining the process of setup. You can check this article setting up your React Native Development Environment to get a clear explanation of the setup process.

Please note, that you won’t be able to build your app if you are not done with the react native CLI setup. After you are done with the setup, type "setting up the development environment react native" in your browser and select the link "Setting up the development environment - React Native."

Here you have to go to the section React native CLI Quickstart. Scrolling down the same page, copy the command npx react-native init AwesomeProject and paste it into the command prompt.

In this step, you can also change the project name from AwesomeProject to any other name Here, we have considered Projectname as the name of the app we built. Thus the modified command will be npx react-native init Projectname.

2. Command operation

For convenience, we would suggest you create the app on your Desktop. After typing 'Desktop,' in the command prompt, press enter. This will direct you to the desktop folder.

Enter npx react-native init ProjectName as the command.

In this step, you may find some Typeerror stating that cli.init is not a function. This error is particularly due to incompatibility with the new version of React Native. To resolve the issue, you have to pass the command npx react-native init ProjectName --version 0.68.2 and not the npx react-native init ProjectName, which will allow you to consider version 0.68.2.

After the command prompt shows similar to that of the attached image, you will be done with building your ProjectName app using React Native CLI.

Here comes the crucial step of running the built app. This step will make you aware of any bugs before it is published in the Google play or apple store.

Follow the given steps to run your app on a Virtual device or emulator.

Steps to run the app on a virtual device or emulators

1. In Android Studio, set up a virtual device or android emulator. You may also use a data USB cord to connect your actual Android phone to activate the developed application.
2. Copy the command given under the Run instructions for Android: cd "C:\Users\HP\ProjectName" && npx react-native run-android
3. On passing the command, you will see a message popping BUILD SUCCESSFUL on the screen after some time, indicating that the app has been built and is about to start on the emulator.
4. After a minute or five, your built React Native app will start running the app on your built virtual device like the image shown below.

Now, we are about to build and run the app using a simpler way, through Expo CLI.

Using Expo CLI to build and run app

Prerequisites to consider

Before getting into the steps of app building, you need to install the below-stated dependencies in your system

• Expo CLI
• Visual Studio Code.
• Expo Go app on your smartphone or emulator.

2 steps to build react native app

Run the command npx create-expo-app my-app in the cmd and press enter. Here, we have named the app my-app. You can name it as per your choice. In that case, don’t forget to change the name in the command.

For downloading the required packages and dependencies you have to hit enter after the screen shows the given below command.

create-expo-app@1.1.1

Ok to proceed? (y)

Here, we have installed the JavaScript dependencies. On Completing the step, your app will be ready.

2. Project directory navigation

Creating the app should not be your final step. You need to create a folder for the built app (my-app) in your system. For this, run cd my-app in the cmd. You can search by typing my-app in your local folder and will see the folder has been created.

Steps to run the app on a real android device

• Pass the command in expo start for directing the Expo CLI to build the Metro bundler automatically. It will also generate a QR code.
• If you are wondering what is known as Bundler? Bundler is nothing but an HTTP server. It uses Babel to combine all the JS codes of the developed app. It is then forwarded to the Expo app to ensure that the app runs continuously.
• Activate the Expo Go app that you have installed on your phone. Scan the code showing on the screen. This will open the app on your phone. It will show a default text which you can modify as per your needs.
• One important step that you cannot avoid is connecting both your phone and the developing system with the same network. It should be done before scanning the QR code.
• Making some modifications to the <Text> component of the App.js will allow you to change the default message.
• You have to save the message to allow the text to be displayed on your android phone.

Now you are done with buildings and running your react native app.

Summary

You can try both the react native app development process. With Expo CLI, you don’t have to deal with complex JavaScript codes. On the other hand, React Native CLI can allow you to employ native codes and custom different Core Components. Both tools have their usage. The choice of the tool is on you.