How to Setup React Native for Android App Development in Windows

In this react native beginner’s tutorial, we are going to learn how to set up the tools and environment we will use to enable us start building cross platform android and iOS applications using react native.

The good thing about react native is that if you have a good background in Javascript, learning react native will be a breeze. But there is nothing wrong if you do not know Javascript, with little devotion you can learn and master it.

Before we start, we are going to install some software that android and react will use to run in our windows operating system.

 

Install JDK

If you do not have Java already installed in your system, you can start by installing Java Development Kit. If not, you can follow this link to download  and install JDK in your system.

 

Install Android Studio

Android Studio is the official development IDE for android although you can use any other IDE of your choice.

If you have not yet install Android Studio, kindly move to the official android studio to download and install the latest version of android studio.

One good thing about android studio is when you install it, it will also setup the environmental variable for you.

 

Node.Js

We are going to install Node.js. If you have not installed Node.js in your system, this is the best time to do it. Node.js is a Javascript that runs in a server.

Move over to the Node.js official website to download Node.js windows installer for 32 or 64 bits depending on your system specification.

The good thing is that the installer is bundled with NPM which is Node.js package manager. This will help us to download and install some react native packages like React Native command line tool we might need for the development.

Once you finish with Node.js installation, you can open windows command line as an administrator and check if node.js as been installed properly with this following command  node -v

 

Install React Native CLI

Now that we have installed most of the tools we need, we are going to install React Native CLI which we will use to set-up our first React Native project. There are many usage of React Native CLI which we will see later.

With the command line still open, type this command and hit enter – npm install -g react-native-cli

This will install react native cli in the global environment. The images below shows how it will appear if everything works for you.

 

Lets Start Building

We are good to go now with creating our react native application. With your command line still open, type the following command react-native init projectname and hit enter.

Please note that you can choose any name of your choice for your project. Also, you can us the cd command to change to the directory you will want to store you project.

Note that this command once issues will take a little to complete. Once it is completed, you will see the below output in your command line.

Once you have created your project, go to your project folder, double click to open it. Once it is open, you will see a folder structure like the image shown below.

Inside the folder, you will see android folder which will contain android app source code, ios folder for ios source code, node_modules for node packages and tests folder for test scripts.

Please not that starting from React Native version 0.49, there is no index.ios.js and index.android.js. You will see only index.js.

 

Javascript IDE and Android IDE

In this tutorial, I am going to use Visual Studio Code for writing react native code and we will open the android folder inside Android Studio and run the application using android emulator I have set up.

You are free to use any IDE for your React Native code like atom and so on. In visual studio code, go to file menu and select open folder and navigate to where you store your project and select android folder to open it in your IDE.

Once it is open, look at the root folder and open the file name index.js. The code content of the generated file is shown below.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          My first react native app. Amazing feature
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

This is the entry page for our application. From the code, you will see that react uses component as a building block for pages. The default app class is the root component for the application.

In the first part of the code, you can see that the import statement is used to import React instances and components.

Finally, the style-sheet is use to style the content of the page. We will go deeper on this topics in our subsequent tutorials.

 

Android Studio

Open the android folder in android studio. Once it is open and there is no error, you can click on the run button to select emulator.

If you have not set up an emulator, you can do so within your android studio. Once this is done, it is the time to run our react native android app.

 

Lets Test Our React Native Android Installation

Now that everything is set up and our command line interface still open, we are going to write the following command to run our react native android app in our emulator.

react-native run-android

Please note that if the package server is not running, you should issue the command react-native start to start the server.

If everything goes well, you will see an image similar to the image below.

While the emulator is running, you can press control + m to open up the dev settings. From the list, you can select live reload. This will monitor changes in the project files and folders.

With this we have come to the end of this tutorial. I hope you have learn a thing.

Please bear in mind that there are many errors that might occur during this process. You can easily use Stackoverflow.com or other online resources to research about the errors. You can also use the comment box below to ask questions

Add a Comment