Running your first react native app

Here we learn Running your first react native app on your Android mobile. In the last tutorial you learnt how to set up react native in your machine and how to create your first react native project. We finished the tutorial showing you the folders and files which are created inside the project folder. Before we run our first app let’s get to know what those folders are.

file structure

Android and iOS folders

As you can see, there are two folders named android and ios. These folders have some files inside them. Those files contain the relevant configurations according to each platform. Android folder consists configurations which are needed to install the app in an android mobile device. iOS folder consists configurations which are needed to install the app in a iOS device. Both configurations can be changed according to what we need.

Node modules folder

Node modules folder is inside the react native project because we executed the npm command. If you want, you can delete the node modules folder completely and install it again using ‘npm install’ command. This is a necessary folder for your project because npm executes a local dependency install and puts the results inside node modules folder. Whenever you install a new plugin for your app(We’ll learn about plugins in later tutorials), the dependencies for that plugin are installed into the node modules folder.

app.json file

If you have already created your project according to the last tutorial, you can open app.json file.

app.js file

As you can see, there are two values in the json file. Name means the project name. Display name is the one which is displayed in your app after you installed it in your mobile. If you want to change the display name of your app after you created it here is the way to do that.

  • First delete both android and iOS folders.
  • Then open app.json file and change the display name.
  • After that you need android and iOS folders back. So, open CLI inside project folder and run this command ‘react-native eject’.

creating android and ios folders

Now you have android and iOS folders again inside the project folder and display name of your app is changed.

package.json file

This file contains all the details about the project including project name, version details, dependency details and so on. Whenever you install a new plugin in your project, those dependency details are added into package.json file.

index.js file

This file is the one which runs in your mobile. All the other codes should be imported into this file.

App.js

When you run your app for the first time you can see a UI as given below.

 

 emulator

There is a default content in this UI. That content is coded in the App.js file and it is imported into index.js file.

Running the app in your android device

Before you run your app in mobile or emulator you have some steps to follow.

First open android studio. Go to File and click open. Then a window will appear and find your project there and go inside your project. Then select android folder inside your project and click Ok.

creating the emulator

Now you have opened android folder in android studio. The purpose of this, is helping the project to find the sdk path. After you opened android folder in android studio there will be some installations to do. When you first open the android folder in android studio, you get a big error message as given below.

creating the emulator

That error message is totally fine. You just have to click button which showed in blue color and the you will get a window as given below.

creating the emulator

Then accept the license and click next. After some time that installation will be finished. Then, again you get an error as mentioned below.

creating the emulator

Click on the blue button again follow the same process we did before.

After that installation, if there is another error message, follow the same process as you did before.  After those installations, a pop up will appear and it asks for a gradle plugin update and click on “Don’t remind me for this project” button.

We have few more things to do. What we just did was installing some tools to set up android emulator.

Creating the Emulator

Now, we have to create an emulator. So, go to tools and click on AVD manager.

Then you will get a window as given below.

creating the emulator

Click on the ‘Create Virtual Device’ button. Then you will get the following window.

creating the emulator

Select any model you want and click next and you will get the window given below.

creating the emulator

Select the Android Version and download it and click next. Then you will get the following window.

creating the emulator

Here, you have no changes to do. Just click finish. Then you will get following window.

Running the emulator

Click the run button and emulator will open in few seconds.

Setting up Environment Variables

We have few more things to do. Open environment variables and add another user variable named “JAVA_HOME”. Make sure you name it with the same name in capital letters. For the value of that variable, go to java/jdk folder and copy and paste the path for that folder(eg : C:\Program Files\Java\jdk).

Now you have to edit the path variable in user variables. Add a new value to the path variable as given below.

C:\Users\”Username of your machine”\AppData\Local\Android\Sdk\platform-tools

Go to platform tools in your machine and copy the path and paste it.

Add environment variable

All done with the emulator. Now you can install the app in emulator. Open command prompt inside project folder and run this command ‘react-native run-android’.

Runing your app

After few seconds another window will open and that’s okay. Installing the app in emulator takes some time. After around one minute the app will be installed in emulator.

If you hope to install the app in your mobile instead of emulator, you have to enable development mode and debugging mode in your mobile. After that connect the mobile device to the machine using a data cable and open CLI inside project folder. Then, run the same command ‘react-native run-android’. Then the app will be installed in your mobile device successfully. So that’s how Running your first react native app on your Android mobile.

In the next section, we will start to work on our first app.

Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *