React Native Android Development for Mac

I develop a lot with React Native, which compiles to both iOS and Android. Getting started with React Native iOS development is particularly simple as you just download Xcode from the Mac AppStore, and away you go. Android…not so much. The RN Getting Started guide is ok, but there’s a few extra steps it doesn’t cover.

This article aims to be a guide to get setup with an Android Development environment, specifically for React Native on macOS Sierra.

1. Install Android Studio

Firstly, let’s refer to the React Native installation guide, for Android. We’ll download Android Studio (about 450MB).

Drag Android Studio into your Applications folder and then Open Android Studio. You’ll be presented with a Setup Wizard — let’s run through that:

Tick both ‘Performance’ and ‘Android Virtual Device’ to get an optimised Android Virtual Device for testing. This has got a bit to download, the Android SDK and Virtual Device are quite big…go get a coffee or something

2. Setup Paths

While that’s downloading, let’s setup paths to the Android SDK (so that the RN CLI knows where it is):

Open terminal and create/edit your .bash_profile file:

nano ~/.bash_profile

This will open a file called .bash_profile in terminal. Next, paste the following to the bottom of the file:

# Android SDK
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools

Then save and close the file (CMD + x, yes, enter).

3. Install JDK for Mac OSX

The Android CLI requires the Java Developer Kit (JDK) — simply download and install it:

Java SE Development Kit 8 - Downloads

4. Install the extras

There’s a few extra things that we need to install to get us up and running. Bear with me…

4.1 Google Play Services

Install Google Play Services (for things like Google Analytics, Google Login etc).

• Open Android Studio > Configure > SDK Manager
• Go to the middle ‘SDK Tools’ > Click ‘Show Package Details’ (bottom right)
• Click ‘Google Play Services’, then hit apply and follow the instructions to download/install it

4.2 Android System Images

In order to create new emulators, we need to install a few system images.

• Run android sdk from terminal
• Check the 3 system images selected below (Android TV Intel x86 Atom System Image, Google APIs Intel x86 Atom 64 System Image, Google APIs Intel x86 Atom System Image)
• Hit Install 3 Packages and follow the prompts to install

4.3 Android 6.0

By default you’ll get the latest and greatest SDKs installed. But React Native and most of their plugins use the Android 6.0 SDK build tools. So you’ll need to install that to run/build your app.

• Open Android Studio > Configure > SDK Manager
• Click on the blue link ‘Launch Standalone SDK Manager’ (bottom left)
• Check the 2 system images selected below (Android 6.0 SDK Platform and Android 6.0 Google APIs Intel x86 Atom System Image)
• Hit Install 2 Packages and follow the prompts to install

5. Running a React Native App in the Android Simulator

Now is a good time to do a quick restart of the machine, before moving on. Then, from terminal, run:

android avd

This will open the Android Virtual Device Manager. If you don’t have any devices setup, create one with similar settings to below:

Click ok, then select the device to open, and click Start.

Wait for that device to fire up (keep that terminal window open). Then, in a new terminal window, enter the root directory of your React Native project, then run:

react-native run-android

Things change all the time, let me know in the comments if something doesn’t quite work and I’ll look into updating this.