Solved: Packaging Error in React-Native Release APK

When building a release apk from react-native code, you could run into an error that says:

03-08 01:48:26.586 31619 31636 E AndroidRuntime: FATAL EXCEPTION: Thread-2
03-08 01:48:26.586 31619 31636 E AndroidRuntime: java.lang.RuntimeException: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server.
03-08 01:48:26.586 31619 31636 E AndroidRuntime:        at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets(Native Method)
03-08 01:48:26.586 31619 31636 E AndroidRuntime:        at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(Unknown Source:2)
03-08 01:48:26.586 31619 31636 E AndroidRuntime:        at com.facebook.react.bridge.JSBundleLoader$1.loadScript(Unknown Source:10)
03-08 01:48:26.586 31619 31636 E AndroidRuntime:        at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(Unknown Source:18)
03-08 01:48:26.586 31619 31636 E AndroidRuntime:        at com.facebook.react.k.a(Unknown Source:139)
03-08 01:48:26.586 31619 31636 E AndroidRuntime:        at com.facebook.react.k.a(Unknown Source:0)
03-08 01:48:26.586 31619 31636 E AndroidRuntime:        at com.facebook.react.k$5.run(Unknown Source:63)
03-08 01:48:26.586 31619 31636 E AndroidRuntime:        at java.lang.Thread.run(Thread.java:764)

So how do we fix it?

The error means that there is an issue with the bundling of our JS files. It may so happen that your development/debug apk works fine on your device, but the release apk doesn’t. This is because generation of a debug apk does not involve the bundling of JS files. In the android/app/build.gradle, the default settings are:

bundleInDebug: false
bundleInRelease: true

So, to fix this issue, we must manually bundle our js files correctly. Follow the steps given to fix this issue:

1. In android/app/src/main make sure you have an assets directory. If you don’t, create a directory. In case you do, open the assets directory and remove the files index.android.bundle and index.android.bundle.meta .
2. In a terminal, go the the project root and run the following commands:

cd android
gradlew clean

This will get rid of any existing builds, and will remove the directory android/app/build .

3. Go back to the project root in your terminal, and run the following command to bundle the JS files.

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

4. The previous command bundles the JS files, but creates drawables directories that we must remove. To find these directories, look in android/app/src/main/res . Make sure you remove all directories starting with ‘drawables’.

5. Navigate back to your project root and run the commands:

cd android
gradlew assembleRelease

In case your keystore file is configured correctly (for a signed apk), you should get the generated apk file(s) in android/app/build/outputs/apk/release . If you haven’t configured a keystore file yet, you would get an unsigned apk file in the same location.

Hope this helps!