React Native for Android Tutorial for Beginners

React Native is a framework that is used to build native apps using  react. The apps built on react native would work on both Android and iOS with performance better than that of a hybrid app, almost close to native apps. But here we will be focusing on React Native for Android. For those switching from android to react-native, mind it that react-native has hardly anything to do with Java and XML. It’s all about JavaScript and it’s libraries.

All the works from designing UI to rendering different screens and backend manipulations would be performed in JavaScript. Don’t get disheartened if you don’t know JavaScript. It’s quite easy and you’ll learn it as this series of react-native progresses.

In a nutshell, react-native is an efficient way to develop apps with optimum performance and multiple platforms compatibility. This is the very first post about React Native for Android. We will continue learning it in upcoming posts. So lets start by setting up the development environment.

Environment Setup for React Native

To set up the work environment for react-native, we need to make a bunch of installations as follows:

#1 Installing Java Development Kit (JDK)

• If you already have JDK installed on your system, you may skip this step.
• JDK is required to use android studio on your system i.e. to make your system Java literate.
• To install it, Download JDK  setup and thereafter install it once it is downloaded.

#2 Installing NodeJS

• Node JS is required to use the JavaScript code outside the Browser environment. It generates application packages for our JavaScript code.
• To install Node.js go to this link  and  download the setup of NodeJS. Once downloaded, do install it.
• After installing confirm the installation. To do so open command prompt and type the command node -v and it shall show you version of NodeJS installed on your system as shown in the image below:-

#3 Installing Python

• To install python, download the setup from here Python. And simply install it as you install every other app.

#4 Installing Android Studio

• Assuming that you have Android Studio already setup on your system, let’s carry on with the further remaining installations.

#5 Installing react-native CLI

This involves the installation of react-native command line tools. These are required for the creation of a new project and then to debug the project. To do so,

• Open command prompt and type npm install -g react-native-cli
• On successful installation, you would see a screen as shown below:-

That’s it. All the installations  required have been performed.

Building the First Reactive Native Project

To create a new project in react-native, follow the steps given below

• Open command prompt and change the directory to where you want to store your project.
• Type the command  react-native init yourprojectname.

It’s gonna take a while to finish creating this project.

• On successful  completion of this process, you shall see the screen as shown below:-

• Also, you’ll find a folder created by the name of your project which contains the project files having the file structure as shown below

• In the above image, you’ll notice two files by the names index.android.js and index.ios.js. These are files where most of the engineering is done to build the app.
• Assuming that you already have an emulator set up to test the apps, let’s move on to running our first react-native project.
• If not, then go and get it done. There’s plenty of tutorials available for the same.

Running your First React Native for Android Project

• Now that you have your project ready for the first run, open command prompt and navigate into the folder of your project in command prompt.
• To run the project in android, type the command react-native run-android
• To run the project in ios, type the command react-native run-ios  assumming that you have a mac and an iphone simulator set up (But if you don’t have a MAC don’t worry we will be doing the android stuffs mainly).
• Once the project is successfully compiled, you shall see a screen as shown below

• Hurrah! You have successfully set up the work environment for react native.

So thats it for the beginning of React Native for Android. In the next section, we shall learn about the IDE for react-native, the project structure of react-native projects, layout elements in react-native and rendering them. So stay tuned!

Hope you successfully have set up the environment for react-native.  If not, feel free to share the difficulties you faced in this course.