SOS

Shane O'Sullivan's technical blog… really ties the room together

Troubleshooting setting up a React Native Android dev environment

Posted by Shane O'Sullivan on September 9, 2016

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!

One Response to “Troubleshooting setting up a React Native Android dev environment”

  1. […] Troubleshooting setting up a React Native Android dev environment […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: