Chris Mendez in For Developers, Radio, Javascript, Music Industry, Android, React

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.

Homebrew

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

Node Package Manager

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

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.

  1. You first need to install VirtualBox Emulator then reboot your computer.
  2. 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

 nano ~/.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

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

React Native Debugger for Chrome


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  

Pick one.

#iOS
react-native run-ios

#Android
react-native run-android  


Tools