The first step to building a React Native app for Android is to install and configure the necessary tools for Mac. For many new developers, this process can seem unwieldy so here's a cheatsheet that aims to explain the full stack.

Although React Native offers an excellent tutorial on setting things up, the purpose of this document is to explain the stack in a way that makes sense to new developers.

Step 1 - Package Mangers

Since we're on a Mac, we'll first need to install a few package managers. Package managers are specialized apps that help you download libraries, frameworks, plugins and other tools that don't automatically ship with Mac OSX.

Homebrew package manger is great for installing the Android SDK, servers, web severs, databases and other things for developers.

Homebrew

Node Package Manger (npm) is where we will find the tools to build for React Native.

You can install Node Package Manager through downloadable file or by through Homebrew.

Step 2 - Install Java JDK

Since Android is built on Java, we need to install Java on Mac and the Java Development Kit. Nerd Tip: JDK is just Java-speak for SDK.

My other tutorial will show you how to install Java using Homebrew.

Step 3 - Install Android SDK

Now that we have Java installed, let's install the Android Development Kit using Homebrew

First install the SDK.

brew install android-sdk

Step 4 - Install React Native

Since React Native is a JS framework --for building native apps for iOS and Android-- let's install it using npm (Node Package Manager).

Install React Native using NPM

 npm install -g react-native-cli

Step 5 - Install Watchman

The React Native team recommends you do this in order to avoid a strange bug.

 brew install watchman

Step 6 - Launch the app in the Android simulator

You'll need an Android emulator to test the app and Genymotion (free edition) provides you with a way to install a variety of different hardware makes and models.

You first need to install VirtualBox Emulator then reboot your computer.
Then install Genymotion

Step 7 - Configure your Mac's environment

Setting up a few environmental variables will help your Mac system figure out where your Android SDK is installed.

First create a file for your home environment variables using Terminal Screen Grab

vim ~/.bash_profile

You can also use vi, mate or your preferred editor. I just just believe nano is great for new devs.

Paste this snippet into ~/.bash_profile Screen Grab

Paste this on its own line.

export ANDROID_SDK_ROOT="/usr/local/share/android-sdk"

Execute the file.

source ~/.bash_profile

Step 8 - Download more packages for Android SDK

Android is constantly being updated with new API's and other libraries. Therefore, you'll need to keep a close watch on which versions of Android work best with React Native.

Look for the section titled "Supported operating systems are >= Android x.x (API x) and >= iOS x"

Step 9 - Install React Native Debugger

Once you start working on your first React Native app, be sure to install the Google Chrome Debugger. It will save you tons and tons of headache.

React Native Debugger for Chrome

Step 10 - Create Your First App

Borrowing from Facebook's Getting Started, here's how to create your first app

react-native init AwesomeProject

Change Directory into the app folder.

cd AwesomeProject

Step 11 - Run the App

iOS

react-native run-ios

Android

react-native run-android

Android Development with React Native on a Mac