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.
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
