Getting started with React Native Android Tutorial – Easy Setup Guide

React Native – Lesson 1 (Creating a Hello World Application on your Virtual Android Device)

This is React Native – Lesson 1 (creating a Hello World Application on your Virtual Android Device). this lesson will guide you how to get started with React Native and setting up React Native on your machine to start making your first React Native Android application easy way.

I will be covering the whole app making process using React Native in this series of continuous lessons with sample code and examples. so stay tuned for updates in this free course of React Native – Android App Development.

so basically before stepping onto the first step of getting started with your first React Native Application setup and start programming to see your First React Native App running on your Device, we must know what actually  React Native is?

What is React Native?

www.codingiseasy.com/react-native

React Native

React Native is a Framework for Building native apps using React. React Native is like React JS but it uses native components in comparison to react JS which uses web components as building blocks of an application. using React Native you can build Android and IOS applications using only JavaScript as React is a Javascript Library Developed by Facebook.

Applications build using React Native are same as native applications build using Objective-C or Java. React Native comes with several features of React JS like Hot Reloading. in short terms Hot Reloading keeps your app running in current state and inject new versions of files on VM that were edited by us seconds ago. React Native Hot Reloading Helps developers to avoid reloading app every time after making a change which may take a long time totally depending on your application size and state. to Read More on React Native Hot Reloading or want to know about the difference between Live Remoading and Hot Reloading Click Here. Live Reloading vs Hot Reloading

also, React Native let you code in android native also so you can write half of your code in React Native and another half of code in android native and your app will be running both codes together smoothly that’ s the way  React Native works and make your programming job a little bit easy and interesting.

if you want to read more about React Native you can read Facebook react native docs on GitHub. follow this link:- https://facebook.github.io/react-native/

so that’s all about React Native read more from the link given above.

Now Let’s jump directly on how to setup React Native on your machine

Basic Requirements for setting up react native 

  • Node Js:- Basically all the packages and Libraries for React native are commonly downloaded through NPM (Node Package Manager) so we need to install Node JS on our machine to work with React Native. as in the whole series, I will be using NPM for all packages and Libraries to install and use in React Native.

Download your desired version of Node JS from here – https://nodejs.org/en/download/

  • Visual Studio Code:- Before starting programming in React Native it is Recommended to install and get running Visual Studio code as it is a light weight software to start programming and it provides full support for javascript libraries and many other libraries too. although you can use any text editor to do programming in React Native. but in Visual Studio Code, you can run your console commands via VS Code TERMINAL and you can use various other features of VS Code. I personally recommend VS Code.

Download your desired version of VS Code from here – https://code.visualstudio.com/download

  • JAVA SDK (any latest version):- As we will be working on Android Application and little bit Android native code we need to have JAVA installed on our machine to run our React Native application. as JAVA is also necessary to run Android Studio and a virtual simulator / virtual device on which we are going to run our app through the whole development process. so JAVA is a must.

Download your Latest version of JAVA SDK from here – https://java.com/en/download/

  • Android Studio (for emulator purpose only):- For running our React Native app we need a device and for development purpose and basic testing purpose emulators are best. for running an android emulator device we need to download and run the android studio on our machine. after downloading and basic setup of Android Studio we need to setup an android emulator on which we will be running our first React Native application.

Download your version of Android Studio from here – https://developer.android.com/studio/index.html

So after all these tools download and setup, we are ready to start building our first React Native – Android Application.

Steps to Setup React Native on your Development Machine

  • Installing React Native on your machine

To install React native on your machine you just need to run a simple command on your command prompt (start cmd with ctrl + r and type in cmd and press enter). although in recent updates Facebook has changed a lot on how to get started with your first React Native app. you can directly run “create-react-native-app” this command in cmd. this command allows to start a React Native Project without installing or configuring any tools to build native code – no Android Studio or X Code Required.  but we are going to do it simple and best way. run below command in cmd to install React Native  Globally or we can say as a global package i.e if you install this package globally once on your machine you don’t need to install it in future before starting to develop other apps.

run below Command in Command Prompt.

npm install -g react-native-cli

or you can also run

npm i -g react-native-cli

both commands are same we just write the last one in short form as we can write “i” for install and  “s”  for saving while running NPM commands.

so now after the successful run of above command, we have installed React Native on our machine. now we can move on to the second step for getting started with our first React Native app.

  • Installing Our React Native app / Downloading files through NPM

In this step basically, we are going to run a command on our CMD which will create our React Native application basic structure and files in our desired directory.  so for this step either you can create a new folder with your desired name or you can start in any drive of your machine. go to a folder on your machine and open a command prompt in that folder so that all commands we will run will run in the context of that folder only.

to install necessary basic files for React Native we need to run following command in Command Prompt-

react-native init MyProject

you can replace “MyProject” with your application Name to make application with the desired name. this command will take some time to create your project in the directory in which you have run that command.

you can replace “MyProject” with your application Name to make application with the desired name. this command will take some time to create your project in the directory in which you have run that command.

While this command is doing its work take a look at basic directory structure that this command is going to make for us.

see below image –

www.codingiseasy.com/react-native-folder-structure

React Native Folder Structure

you can see the full folder structure that this command creates for us. if you want to learn more about React Native directory structure and basic files in our application folder you can read our latest post on this Click Here to Read. just click and read an awesome post about React Native basic folder structure and files. you can read it later if you like to continue this current post.

so now we are done with installations regarding React Native it’s time to see our first app Running in Emulator. as in this series, I will be using the emulator to run my application. if you want to know that how can you run and develop your React Native application on a real device like your android phone then stay tuned I will be writing on that too soon.

  • Installing React Native App in Emulator / Virtual Device

for this step keep your emulator running or if your emulator is not running then you can start it directly from the Android studio. go to AVD and start a virtual device or we can say, emulator. after your emulator started and loaded perfectly you are good to go running another command in cmd which will install your development application on your virtual device.

Run Below Command in Command Prompt to start installing your app in Virtual Device.

react-native run-android

if you got any errors in the installation like Licence Error or Android SDK location not found any other red box error. for now, you can google these errors and you will surely find some commands or something else to get your this command run and install your application on your virtual device. I will cover this topic of common errors you will face while installing your first React Native app on your device / Virtual device and how to tackle these errors and not face them in further app development stay tuned for more interesting material on React Native.

so I am supposing you have solved all your errors if comes after running that command and you have successfully installed your app on your virtual device. now you can see your app on your virtual device installed like a normal app installed on any phone.

so finally you have your first React Native app installed on your Virtual Device and now the final step is to make it run and see what’s react native installation give us to work upon.

  • Running React Native App in Emulator / Virtual Device

To run your application on your Virtual Device you need to run another command on your cmd. I would like to recommend open that application folder in Visual Studio Code and using this shortcut command open Debug Console (ctrl +  shift + y).  there you can toggle to TERMINAL window located in the right of DEBUG CONSOLE. now you can use this console to run CMD commands you don’t need to switch to CMD again and again to run some commands. this is one of the benefits of using Visual Studio Code for developing React Native App.

run the below-given command in TERMINAL window on Visual Studio Code.

npm start

this command will start your development server which will run your application in your virtual device through the process of development. this command load all your files and convert to JS files so that your VM can understand and compile your code and your app start showing UI. this command also opens a new command prompt to run development server and load all dependencies. but close that extra cmd window just opened as our basic command is running in VS Code TERMINAL  wait for the command to show loading dependency graph done.  now your server is ready to serve your content on your virtual device open the app on your virtual device. if everything installed perfectly then you will surely see an app running on your virtual device “saying this is React Native Hello world” type message and congratulations you have successfully run your First React Native app on a virtual device.

Now as you have done all the steps to run your first React Native app on a development device now you can experiment with React Native code to make changes in UI and functionality of your application as you want.

try changing message showing on the screen. to do this go to > index.android.js  this is the main starting file of your app your app will load this file first this is a starting point of your app. there you can find the message written on screen try changing that message and then to see changes on your device just press (Ctrl + M) to open a menu and in that menu press reload command given on top of menu. and your app will compile all files again and load your newest files on your development server and you can see your change on the screen of your virtual device.


so that’s it for now. try to experiment with some styling and other things to make your app looks cool. I will be back with another article in this series in which I will cover further concepts of React Native and will show you how to develop a real Android application using React Native so stay tuned for more tutorials and articles.

if you have any queries Regarding React Native just comment below this post I will try my best to solve your doubt’s on React Native.


Happy Coding

You may also like...

4 Responses

  1. August 7, 2017

    […] in my previous lesson  React Native – Lesson 1 (creating a Hello World Application on your Virtual Android Device) – if you have missed it you can read it by clicking on the link. I have explained How to […]

  2. September 2, 2017

    […] earlier articles on React Native and Especially the first one to getting Started with React Native. Click Here to Read our Awesome article on how to getting Started with React […]

  3. November 25, 2017

    […] earlier articles on React Native and Especially the first one to getting Started with React Native. Click Here to Read our Awesome article on how to getting Started with React […]

  4. November 25, 2017

    […] React Native Getting Started – by CodingIsEasy […]

Leave a Reply

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