React Native Tutorial: Building Android Apps with JavaScript

In this React Native tutorial you’ll learn how to build native apps based on the hugely popular React JavaScript library.

What makes React Native different from other frameworks such as PhoneGap (Apache Cordova) or Appcelerator Titanium, that use JavaScript to create iOS apps?

1. (Unlike PhoneGap) with React Native your code may be written in JavaScript but the app’s UI is fully native. It doesn’t have the drawbacks typically associated with a hybrid HTML5 app.
2. Additionally (unlike Titanium), React introduces a novel, radical and highly functional approach to constructing user interfaces. Your UI is simply a function of the current app state.

React Native brings the React paradigm to mobile app development. It’s goal isn’t to write the code once and run it on any platform. The goal is to learn-once (the React way) and write-anywhere. An important distinction to make.

The community has even added tools such as Expo and Create React Native App to help you quickly build React Native apps without having to touch Xcode or Android Studio!

While you can write React Native apps for iOS and Android, this tutorial only covers Android. You can also check out our tutorial focused on React Native for iOS.

The tutorial takes you through the process of building an Android app for searching UK property listings:

Don’t worry if you’ve never written any JavaScript or used the CSS-like properties you’ll see. This tutorial will guide you through every step and provide resources where you can learn more.

Ready to get going? Read on!

Getting Started

Node and Java Development Kit

React Native uses Node.js, a JavaScript runtime, to build your JavaScript code. React Native also requires a recent version of the Java SE Development Kit (JDK) to run on Android. Follow the instructions for your system to make sure you install the required versions.

MacOS

First install Homebrew using the instructions on the Homebrew website. Then install Node.js by executing the following in Terminal:

brew install node

Next, use homebrew to install watchman, a file watcher from Facebook:

brew install watchman

This is used by React Native to figure out when your code changes and rebuild accordingly. It’s like having Android Studio do a build each time you save your file.

Finally, download and install JDK 8 or newer if needed.

Windows

First install Chocolatey using the instructions on the Chocolatey website.

Install Node.js if you don’t have it or have a version older than 4. Run the following command as Administrator (Right-click on Command Prompt and select “Run as Administrator”):

choco install -y nodejs.install

Python is needed to run the React Native build scripts. Run the following command as Administrator if you don’t have Python 2:

choco install -y python2

Run the following command as Administrator if you don’t have a JDK or have a version older than 8:

choco install -y jdk8

Linux

Install Node.js by following the installation instructions for your Linux distribution. You will want to install Node.js version 6 or newer.

Finally, download and install JDK 8 or newer if needed.

React Native CLI

Use Node Package Manager (or npm) to install the React Native Command Line Interface (CLI) tool. In your terminal (Terminal or Command Prompt or shell) type:

npm install -g react-native-cli

npm fetches the CLI tool and installs it globally; npm is similar in function to JCenter and is packaged with Node.js.

Next, install Yarn using the instructions on the Yarn website. Yarn is a fast npm client.

Android Development Environment

Set up your Android development environment, if haven’t done so. Make sure you can successfully run an Android app on an emulator.

React Native requires Android 6.0 (Marshmallow). In Android Studio, go to Tools\Android\SDK Manager. Select SDK Platforms and check Show Package Details. Make sure that the following items are checked:

• Google APIs, Android 23
• Android SDK Platform 23
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 System Image

Next, select SDK Tools and check Show Package Details. Expand Android SDK Build-Tools and make sure 23.0.1 is selected.

Finally, tap Apply to install your selections.

When the Android components are finished installing, create a new emulator running SDK Platform 23.

Create the Starter App

Navigate to the folder where you would like to develop your app and run the following in your terminal:

react-native init PropertyFinder

This uses the CLI tool to create a starter project containing everything you need to build and run a React Native app.

In a terminal, run:

cd PropertyFinder

In the created folders and files you will find a few items of note:

• node_modules is a folder which contains the React Native framework
• index.js is the entry point created by the CLI tool
• App.js is the skeletal app created by the CLI tool
• android is a folder containing an Android project and the code required to bootstrap your application
• ios is a folder containing iOS-related code, which you won’t be touching in this tutorial.

Start your Android emulator running SDK 23 if it isn’t running.

Run the following command in a terminal:

react-native run-android

The emulator will display the following:

If you receive an error related to “SDK location not found”, then perform the following steps:

• Go to the android/ directory of your react-native project
• Create a file called local.properties with this line:

sdk.dir = {PATH TO ANDROID SDK}

For example, on macOS, the SDK path will look something like /Users/USERNAME/Library/Android/sdk.

You might also have noticed that a terminal window has popped up, displaying something like this:

This is Metro Bundler, the React Native JavaScript bundler running under Node.js. You’ll find out what it does shortly.

Don’t close the terminal window; just keep it running in the background. If you do close it by mistake, simply run the following in terminal:

react-native start