React Native and Android on OS X

Setting up React Native to work with a simulator for iOS apps on Mac is working almost out of the box. However, the configuration of Android simulator is a bit tricky. I followed official tutorials, but for some reason, my simulator was not working. In this article, I will guide you how I started developing Android apps on my Mac. I hope this post will be helpful for React Native rookies and save some of their time.

To start developing Android at OSX, we need to do couple things:

Install Android Studio and JDK for Mac
Configure paths in our system
Install missing packages at Android Studio
Configure and run Android Virtual Device
Build React Native app for Android device

Sounds like a lot of work, but fortunately it's not as bad as you may think. Enough talk, let's go!

Download and install Android Studio

Go to the official website and grab installation package. Once you got it extract files start "Custom" installation. Make sure you have checked:

Android SDK,
Android SDK Platform,
Performance (Intel HAXM),
Android Virtual Device

Some of packages could be unavailable but do not worry about it as we can install them through Android Studio app afterward.

Download and install JDK for Mac

Go to the official website and grab installation package:

Extract the archive file and install JDK. Update: Be careful with Java 10 (try Java 8), some people have troubles with this version.

Configure paths in our system

Using your favorite text editor append the following lines to your ~/.bash_profile config file:

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

Install missing packages at Android Studio

Run Android Studio and go to the SDK Manager:

Make sure you picked and installed Android API and desired versions of Android system you wish to use during development:

Then switch to SDK tools tab and check Android SDK Build-Tools, Android SDK Platform-Tools, Android SDK tools, Google Play services and Support repositories:

Configure and run Android Virtual Device

Now we need to start a new Android Studio project. In the dialog choose Android API version and wait for project success build:

Once build process finished check if there are any TODO actions (Gradle may inform you about some missing elements that you have to install).

If everything went fine now, it is a time for setting up Android Virtual Device which is necessary for our React Native development. Launch our device simulator and create new device:

Once the virtual device is created, launch it and keep it open for whole React Native development process:

Build React Native app for Android device

Finally, it's an exciting moment to check if everything went fine and our app might be executed on the Android simulator.

I created a simple project using create-react-native-app builder, so to run Android all I need to do is type following commands inside React Native project directory:

$ cd android && ./gradlew clean && cd .. && react-native run-android

Now we are all set, and nothing stops us from developing Android apps using React Native on OSX.

If you change your code, you may be wondering how to reload simulator. Go to your simulator and just hit Command⌘ + M combination. Consider enabling the very handy option: Live Reload. Each time you introduce change to your project simulator will reload and render updated UI.

Got troubles with setting everything up? Let me know in comments, and I will be happy to help you out.

Artur Chmaro