Troubleshooting setting up a React Native Android dev environment

React Native is awesome, but the docs leave something to be desired, particularly for Android (the RN team is working on it!).  I recently wanted to get started on building an Android version of the completed iOS app I previously shipped using React Native, but it turned out to be an overly painful process.  The docs assume knowledge of Android development, which I do not have, so here are the steps I used to get up and running on my Mac.

My setup

  • React Native version 0.32
  • Mac OSX 10.11.6 (15G1004)
  • javac version 1.8.0_011

Steps

  1. Follow the instructions for installation in Dependencies for Mac & Android.
  2. Open Android Studio from Applications, step through the setup wizard to download all the packages it needs (about 250MB)
  3. To run the emulator, you need to create a Virtual Device
    – Use AVD Manager to create a virtual device (https://developer.android.com/studio/run/managing-avds.html).   I chose to use a Nexus 5X emulator for no other reason as it was the default selected one.Screen Shot 2016-09-08 at 10.04.40 PM.pngScreen Shot 2016-09-08 at 10.05.50 PM.png
    – Run that device by clicking on the green Play button
  4. In your terminal, change directory to the root of your React Native app, and run
    react-native run-android

If at this point your React Native app shows up in your emulator, congrats, you’re now a React Native Android developer!

If not, read on.

Troubleshooting

You might see this error:
Could not run adb reverse: spawnSync

If so, add the following to ~/.bash_profile if not already there:
export ANDROID_HOME=~/Library/Android/sdk
then run
source ~/.bash_profile
and run
react-native run-android
from the root of your app again. (From Stack Overflow: http://stackoverflow.com/questions/38835931/react-native-adb-reverse-enoent).


If you get the error
failed to find target with hash string ‘android-23’
try deleting the folder
~/.gradle
and running the command again (from http://stackoverflow.com/questions/33417537/failed-to-find-target-with-hash-string-android-23).  This apparently worked for some people, but not me.

screen-shot-2016-09-08-at-8-31-49-pm
You should install:

  •  “SDK Platform” for android-23
    • Go to Tools/Android/SDK Manager
    • Click the “SDK Platforms” tab, if not already selected
    • Check the box for Android 6.0, which is API version 23

Screen Shot 2016-09-08 at 9.28.01 PM.png

  • Android SDK Build tools for version 23 (I installed 3 of them, see screenshot)
    • Go to Tools/Android/SDK Manager
    • Click the SDK Tools tab
    • Check the “Show Package Details” box in the bottom right
    • Under “Android SDK Build Tools” check all boxes for anything with version 23.

Screen Shot 2016-09-08 at 8.21.11 PM.png

This got me past this error.


I then got the errors:
<project folder>/android/app/src/main/java/com/dlc/MainActivity.java:35: error: method does not override or implement a method from a supertype
    @Override

and

<project folder>/android/app/src/main/java/com/dlc/MainActivity.java:39: error: constructor FBSDKPackage in class FBSDKPackage cannot be applied to given types;
            new FBSDKPackage()
            ^
  required: CallbackManager
  found: no arguments
  reason: actual and formal argument lists differ in length

It turns out I had generated my project on an earlier version of React Native, as I was working on the iOS version first, and the Android code it generated was no longer compatible with React Native v0.32.  To fix this:

  • Create a temporary folder
    • mkdir ~/tempFolder
    • cd ~/tempFolder
  • Now create a new React Native application with the exact same name as your application in that folder.  This is important as the React Native tools embed that in a number of files that they generate.
    • react-native init MyAppName
    • Rename the folder in your original app “/android/app” to something else, e.g. “/android/app_old_and_busted”
    • Copy the folder ~/tempFolder/MyAppName/android/app to the “android” folder in your app.
    • run the command “react-native run-android” from the root of your app again.
  • Woohoo, it worked for me!