fbpx

Getting started with React Native | For Android

Launch the next Yelp in minutes

Download this gorgeous React Native Store Locator app template to create your own store finder app in just a few minutes. By using this fully-coded starter kit written in React Native, you’re saving weeks of design and development and can focus on other important efforts such as customer engagement and marketing.

Check out here

As experienced as I am in this React Native, I know that getting started and setting up React Native environment to start coding can be a hefty and troublesome job for any beginner. There are lots of important points to consider while setting up React Native environment as missing one crucial configuration can give you quite a troublesome headache. I also faced this troublesome headache during my initial go at React Native setup. So, through this post, I would like to help beginners as well as some experienced React Native developers having trouble to set up this React Native environment.

First, let’s talk about the React Native in brief. In my experience as a React Native developer, it is basically similar to React (which is web counterpart). The only difference is that we need to use the Native elements (JSX) along with the Native configuration to build the project into some Native device. It gives you a truly native feel. There are numerous widely-used libraries and packages that you can import in your react-native project and give an extra feature you require. The only downside of this React Native development is that the same kind of UI is developed for both android and iOS. If you want to change the feel of UI to either android or iOS, you will have to manually to it using some packages.

But this tutorial is about setting up React Native environment so that you can get started with your new React native project.

So, let’s get started!!!!

In this tutorial, I am going to teach you to set up your first react-native project using React Native CLI in windows OS.

There is another option which is an EXPO setup. The Expo setup is easy and very useful for beginners.

You can easily configure it and run the app on expo client but later on to include third party plugin and for actual production, you will have to export it to CLI based project. So, if you want to use Expo as beginner feel free to check out setup here.

So, to begin with, React Native project setup using React Native CLI, first let’s install all the dependencies that are required.

 

Installing Dependencies

Installing dependencies is the first thing you should consider while getting started with React native. They help you install and set up configurations easily.

The dependencies that are required:

1. Node

2. Python 2 or Python 3

3. Java Development Environment 8 (JDK 8)

You can use their official websites to install the most stable version in case of Node and python or you can just use chocolatey a popular windows package manager.

Using chocolatey, just enter the following command into your command prompt:

choco install -y nodejs. install python2 jdk8

If the Node is already installed on your system, make sure it is Node 8.3 or newer. For JDL, make sure it is version 8.

Be careful with JDK version because the version more than or less than 8 can give you troublesome errors while setting up the project. So, just install JDK version 8 for smooth working.

In the case of JDK, you will need to set up an environment variable as well. So just go to

Control Panel > System and Security > Change settings > Advance tab > Click on Environment variable and Click on New

Then, enter the name and path of the variable,
Variable name: JAVA_HOME

Variable value: [path where you installed JDK]

Now, this is done. It’s time to install React Native CLI.

 

Installing React Native CLI

This setup is fairly easy compared to other steps. You just need to install the react-native-cli package into your system using the following command in your CMD:

npm install -g react-native-cli

Make sure you put ‘-g’ in there, to install the package globally so that it can be accessed from anywhere in your system.

Now let’s move on to the most difficult setup of all. That is the Android studio and Android configuration setup.

 

Setting up Android Development environment

You will have to be most careful in this setup because your app will be running in this environment. Missing any crucial configuration can result in various errors which may be overwhelming for some beginners to tackle.

1. Install Android Studio and Android SDK (platforms and tools)

You need to download and install Android Studio. Then, by using the SDK manager in the Android Studio you will need to download :

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device (AVD)

Just look at the following screenshot and download all the ticked options.

SDK platform image

Then, Click on Apply to install.

Now, go to the SDK Tools tab and install the options ticked in the following screenshot:

Android SDK tools image

Click on Apply to install all the ticked options.

The most important points to remember here are:

  • Make sure to Install Android pie version i.e. Android 9 as build platform along with Android SDK Platform 28, Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image. These are must-have plugins for android emulator to start so, please install these as instructed carefully.
  • Make sure you have Build tools, Android emulator, SDK platform tools, support repo, etc. all installed from SDK tools.

2. Configure the ANDROID_HOME environment variable

This is similar to the configuration of JAVA_Home variable. You need to perform the same action as that until except add ANDROID_HOME as variable name and Path to Android SDK folder as a variable value

Environment Variable for Android_home

The Android SDK is installed at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

3. Setting up platform-tools to Path variable in Environment variables

In your environment variable configurations dialog same as that of before, you need to find the variable named PATH and then edit the path variable to :

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\platform-tools

 

Rest assure!! Now configurations to run our app is complete. Now, we install our first React Native app.

 

Creating a new React Native application

For this, go to your desired directory in your system and then use the following command to install the new project:

Using React Native CLI,

react-native init [Your_project_name]

For a specific version,
react-native init [Your_project_name] — version x.xx.xx

These commands completely set up the React Native project on your system. Now, the only thing to do is to run the app in your Virtual emulator from Android Studio AVD manager.

 

Running the App on Virtual Emulator

You can run your app in the physical device as well but it is best to first run the app in your emulator for easy debugging and reloads.

For this, open Android Studio and go to the Android Virtual Device (AVD) manager and then create a new virtual device:

Adding AVD device

Here, you just need to choose the device in which you need to run your app. I would recommend to choose the device with google play store and install it with Google APIs service for better performance and running without error.

You need to select “+ Create Virtual Device…”, then pick any Phone from the list and click “Next”, then select the Pie API Level 28 image.

Next, you need to click “Next” then “Finish” to create your AVD. Now, you will be able to lunch your AVD device when you click the play button on your AVD device list featured in AVD manager.

Now, to run your application,

You need to go to your project directory and run the command:

react-native run-android

This will lunch the development server as well as install the app on your running AVD device.

Note:- In case the development server doesn’t run. You need to run the command:

react-native start

Now, you will have your app on the device emulator:

Emulator screenshot with app running

 

Here you have it! You first React Native application on an emulator. This is how you can get started with React Native apps and develop your own native apps.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shares