Running React Native apps on the Android Emulator

I’ve been playing with React Native (v0.30) and had been testing my toy application on the iPhone simulator. Since one of the promises of React Native is the ability to share a large amount of code between platforms, I tried to run my app on the Android emulator but ran into some minor niggles. Here is a write-up detailing the steps I took to get my React Native app to run.

  • I was running Oracle’s JDK 1.8 on OS X El Capitan (v10.11.6)
  • I had also installed the latest version of Android Studio (v2.1 as of 28 Jul 2016).
  • I then went to Tools > Android > AVD Manager and created a Nexus 5X image running Android 5.1 and started the emulator.

When I first tried to run my app from command line…

$ react-native run-android

it complained about incorrect JAVA_HOME

ERROR: JAVA_HOME is set to an invalid directory: /Library/Java/Home

17 years of working on and off with Java and still all my woes boil down to JAVA_HOME and CLASSPATH.

I tried setting JAVA_HOME to /usr/bin/java because that is where java, javac and other friends were, but that didn’t work. I finally found a solution off stackoverflow that worked. I ran:

export JAVA_HOME=”$(/usr/libexec/java_home -v 1.8)”

(and also added it to my ~/.profile for future terminal sessions)

This time react complained about something else.

react-native run-android
JS server already running.
Running /Users/dgulati/Library/Android/sdk//platform-tools/adb reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && ./gradlew installDebug...
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> failed to find target with hash string 'android-23' in: /Users/dgulati/Library/Android/sdk

I looked at the emulator image I was running and apparently I was running Nexus 5X API 22. Since react-native was complaining about android-23, I set up another emulator image and this time chose Next 5X API 23.

Android Studio > Tools > Android > AVD Manager > Create Virtual Device…

From the next screen I again selected Nexus 5X and pressed the Next button. From this screen I first clicked the Download link next to the Marshmallow release. The Component Installer dialog popped up showing the progress of the download and installation.

Once the Marshmallow image finished downloading, I clicked Finish to dismissed the dialog. With the just-downloaded image selected in the System Image dialog, I clicked Next, accepted the defaults on the next screen and clicked Finish.

I then started the freshly minted Nexus 5X API 23 image and retried running my react app from the command line. However the error didn’t go away. Turns out, I also needed to install the Android 6.0 (Marshmallow) API Level 23 SDK.

I started the SDK manager — Android Studio > Tools > Android > SDK Manager, expanded the Android 6.0 (Marshmallow) tree and installed the Android SDK Platform 23:

This time when I ran my app from the command line, everything worked!

[It’s a silly flashcard app I am working on to help me brush up my Dutch vocabulary on the go]