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
- Follow the instructions for installation in Dependencies for Mac & Android.
- Open Android Studio from Applications, step through the setup wizard to download all the packages it needs (about 250MB)
- 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 - 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!