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

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

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

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!

Advertisements