Android Development with React Native on a Mac
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. For you new devs, package managers are essentially 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.
Step 2 - Java
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.
Step 3 - Android
Now that we have Java installed, let's install the Android Development Kit using Homebrew
brew install android-sdk
Step 4 - 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).
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.
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
You can also use
mate or your preferred editor. I just just believe
nano is great for new devs.
Paste this snippet into
~/.bash_profile Screen Grab
# If you installed the SDK via Homebrew, otherwise ~/Library/Android/sdk export ANDROID_HOME=/usr/local/opt/android-sdk
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.
Read Android Setup for Reach Native to determine which version of Android to support.
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.
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.
#iOS react-native run-ios #Android react-native run-android