React Native on Android Troubleshooting

Posted on Published

I’ve been working on a project that involves integrating React Native into an existing Android application.

The React Native documentation is great, but there are some gaps when it comes to Android integration, both via the emulator and on the device. Here are some small issues that I ran into while getting React Native to work with an existing Android Studio project, and how I solved them.

I’m very much a beginner with React Native and Android, so I’m not sure if these are best practice solutions, but they did the trick for me.

Unknown module ReactPerf

Error: Requiring unknown module "ReactPerf". If you are sure the module is there, try restarting the packager or running "npm install"

Certain versions of React Native seem to have a dependency on ReactPerf.  This issue seems to crop up in StackOverflow and React Native Github Issues. To fix this issue, I had to install React as well, since React has a ReactPerf module included in it.

npm install react —save

Here are some links to help with this issue:

Can’t find variable: __fbBatchedBridge

This is a bit of a newbie mistake, but I’ll put it in here. If you’re trying to test your React Native Android project on a real device, you may get this error once your application launches.


Got JS Exception: ReferenceError: Can't find variable: __fbBatchedBridge

This simply means that the application cannot communicate with the React Native Packager, or that the packager is not running.

To solve this, make sure you are running react-native start before you run react-native run-android, or build+run your Android application. Also make sure your device and your packager are on the same Wifi network.

Here are some links to help with this issue:

Unable to download JS bundle

When trying to run a React Native Android application on a real device, you may get the following error:

Unable to download JS bundle. Did you forget to start the development server or connect your device?

 In my case, I was running on a device which was Android 4.x. Turns out if your device is on Android 5.0+, you can run the following command to fix this issue:

adb reverse tcp:8081 tcp:8081

Then hit Reload JS.

However, for Android 4.x and lower, adb reverse is not supported. Therefore, you have to bundle the JSBundle inside the APK. To do this, go to your project root, and then find the path to the assets/ directory. In my case it was android/app/src/main/assets/.

Then, with the React Native Packager running (react-native start from project root directory), run:

curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

This will generate a new index.android.bundle file inside your project, which will get bundled as part of the next build. Run react-native run-android to deploy this code to your device.

Here are some links to help with this issue:

Overall, I’m very happy with React Native’s development experience. As with any new technology, there are some issues around the edges, but the overall system works great! I recommend it if you’re new to Android, and I hope this tutorial helps with your debugging.

Up Next:

Analyzing Tendulkar's Batting

Analyzing Tendulkar's Batting