Error: Unable to load script. Make sure you are either running a Metro server or your bundle 'index.android.bundle' is packaged correctly for release

Question

I upgraded my React Native project from 0.63.3 to 0.66.4 with the help of this resource https://react-native-community.github.io/upgrade-helper/?from=0.63.3&to=0.66.4 (followed every instruction in it).

But after generating the apk and I see the below error during the launch ->

01-27 19:12:46.364  9223  9895 E AndroidRuntime: java.lang.RuntimeException: Unable to load script. Make sure you're either running Metro (run 'npx react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.
01-27 19:12:46.364  9223  9895 E AndroidRuntime:    at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets(Native Method)
01-27 19:12:46.364  9223  9895 E AndroidRuntime:    at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(CatalystInstanceImpl.java:2)
01-27 19:12:46.364  9223  9895 E AndroidRuntime:    at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:1)
01-27 19:12:46.364  9223  9895 E AndroidRuntime:    at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:3)
01-27 19:12:46.364  9223  9895 E AndroidRuntime:    at com.facebook.react.o.s(ReactInstanceManager.java:39)
01-27 19:12:46.364  9223  9895 E AndroidRuntime:    at com.facebook.react.o.c(ReactInstanceManager.java:1)
01-27 19:12:46.364  9223  9895 E AndroidRuntime:    at com.facebook.react.o$f.run(ReactInstanceManager.java:12)

My index.android.bundle is getting generated in the correct path And I tried every possible solution below to resolve this error, but nothing seems to resolve the above error:

• $ mkdir android/app/src/main/assets

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

• In Project build.gradle =>

  project.ext.react= [

   bundleInDebug: true,

   bundleInRelease: true ]

• In androidManifest.xml =>

  android:usesCleartextTraffic="true"

  tools:ignore="GoogleAppIndexingWarning

• In Project build.gradle =>

  project.ext.react= [

  entryFile: "index.js",

  bundleAssetName: "index.android.bundle",

  devDisabledInAppDev: true,

  devDisabledInRelease: true ]

• https://stackoverflow.com/a/49143330/18210851

Please suggest some solution.

Answer 1

Before doing the first step i.e., mkdir android/app/src/main/assets, you have to run the metro server using the npm start command. The below link has all the steps required to create an offline APk in debug mode.I can see that the first step is missing.

https://stackoverflow.com/a/37965603/8988448

Answer 2

I was also stuck on this problem for ages and finally found a way to get it to work. I previously tried the bundling solution with the command to create a bundle inside the assets dir but hot reload didn't seem to work there. The two lines that got this to work:

1. Open a new terminal window, and navigate to your project directory.
2. Use the command:

npx react-native start --port=8088

3. This will start your metro bundler in the said terminal on a different port i.e. 8088 in this case (It starts in port 8081 by default).
4. Open another terminal window, navigate similarly to your root directory.
5. Use the command:

npx react-native run-android --port=8088

Now you can get hot reloads and the app runs as expected!