react-native: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server. App crash in release build only

For me this combination worked using "react-native": "0.59.4"

• In gradle-wrapper.properties add distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
• in root build.gradle use classpath 'com.android.tools.build:gradle:3.3.0'
• in app build.gradle I have:

project.ext.react = [
        entryFile: "index.js",
        bundleAssetName: "index.android.bundle",
        bundleInAlpha: true,
        bundleInBeta: true
]

right above apply from: "../../node_modules/react-native/react.gradle"

For some reason I had import com.facebook.react.BuildConfig; in my MainAplication file (I guess due to some smart ass auto import fixing feature of IntelliJ), and therefore BuildConfig.DEBUG was set to false. Because of this:

    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

React Native was always trying to load index.android.bundle from the app pacakge, not from the dev server. Removing the import com.facebook.react.BuildConfig line fixed the issue for me 🎆 🍺 👍

It turned out to be a problem of gradle plugin

Use 3.3.* instead of 3.4.* works for me:

classpath 'com.android.tools.build:gradle:3.3.2'

I still use gradle 5.4.1. This does not cause the problem, though.

I have the same problem when running an app in emulator, downgraded gradle to 3.1.4 but it didn’t work.

2018-11-10 19:28:34.949 16195-16214/com.upnest.agent E/AndroidRuntime: FATAL EXCEPTION: Thread-4
    Process: com.upnest.agent, PID: 16195
    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.
        at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets(Native Method)
        at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(CatalystInstanceImpl.java:216)
        at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:32)
        at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:243)
        at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1114)
        at com.facebook.react.ReactInstanceManager.access$900(ReactInstanceManager.java:116)
        at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:913)
        at java.lang.Thread.run(Thread.java:764)

My packaging server is running on port 8081 (via react-native start).

Isn’t react-native supposed to run the command to build the bundle file automatically? I can’t run it manually on every change, it’s insane (in particular because the command runs extremely slow).

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
      Memory: 119.93 MB / 16.00 GB
      Shell: 5.6.2 - /usr/local/bin/zsh
    Binaries:
      Node: 11.0.0 - /usr/local/bin/node
      Yarn: 1.12.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.6.1 => 16.6.1
      react-native: 0.57.2 => 0.57.2
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

In Android Studio the Build Variant option is set to debug for all modules.

Update:

I found a way to automatically run the bundle script: add this to your app/build.grandle:

project.ext.react = [
    entryFile: "index.js",
    bundleAssetName: "index.android.bundle",
    bundleInDebug: true,
    bundleInRelease: true
]

...

// This has to go AFTER you set project.ext.react properties:
apply from: "../../node_modules/react-native/react.gradle"

Apparently the bundleInDebug: true option tells React Native to build bundle files in debug (development) builds.

But this is still not a solution… ideally the app should connect to the packager server running on localhost, but for at least it doesn’t do that, sadly I haven’t figured out why 😞

Update 2:

Also: https://stackoverflow.com/questions/45940861/android-8-cleartext-http-traffic-not-permitted/50834600#50834600

This worked for me: https://github.com/facebook/react-native/issues/18357#issuecomment-460015070

In app/build.gradle

Add:

project.ext.react = [
    entryFile: "index.js",
    jsBundleDirRelease: "$buildDir/intermediates/merged_assets/release/mergeReleaseAssets/out"
]

Above the line:

apply from: "../../node_modules/react-native/react.gradle"

I am closing this issue because it does not contain the necessary environment info, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

I have same issue when upgrade into latest version: classpath 'com.android.tools.build:gradle:3.2.1' distributionUrl=https\://services.gradle.org/distributions/gradle-4.6-all.zip

-build: cd android & ./gradlew assembleDevRelease -> I have config dev env in gradle. -env:

Environment:
  OS: macOS 10.14
  Node: 9.8.0
  Yarn: Not Found
  npm: 6.4.1
  Watchman: 4.9.0
  Xcode: Xcode 10.0 Build version 10A255
  Android Studio: 3.2 AI-181.5540.7.32.5056338

Packages: (wanted => installed)
  react: ^16.0.0 => 16.4.1
  react-native: ^0.55.4 => 0.55.4

This issue only have in release build. Debug mode is not.

@vafada and @sinhpn92 thanks for pointing out the gradle version I downgraded to com.android.tools.build:gradle:3.1.4 and it started working.

Thanks

Look at this: https://medium.com/@adityasingh_32512/solved-unable-to-load-script-from-assets-index-android-bundle-bdc5e3a3d5ff

For my project using react-native 0.57.0, it is because I upgraded my Android gradle plugin from 3.1.4 to 3.4.1 to enable androidx support libraries. And the new gradle plugin uses a different intermidiate directory for assets, but the react.gradle copies the js bundle into the old directory.

So it builds with js bundle in assets after I changed the react.gradle as below.

// change currentAssetsCopyTask to below.
        def currentAssetsCopyTask = tasks.create(
            name: "copy${targetName}BundledJs",
            type: Copy) {
            group = "react"
            description = "copy bundled JS into ${targetName}."


             // Workaround for Android Gradle Plugin 3.4.1, new asset directory
            from jsBundleDir
            into file(config."jsBundleDir${targetName}" ?:
                "$buildDir/intermediates/merged_assets/${variant.name}/out")


            // mergeAssets must run first, as it clears the intermediates directory
            dependsOn(variant.mergeAssets)

            enabled currentBundleTask.enabled
        }

you can replace the new asset dir with the one your gradle plugin uses if it is not the same(for me it is "$buildDir/intermediates/merged_assets/${variant.name}/out"). You can find it as following.

1. add any file like a.a to your asset directory.
2. run ./gradlew assembleDebug
3. find a.a in ./app/build/intermidiates folder. The folder contains a.a is the intermidiate directory for asset files, change the destination dir in react.gradle to it.

I had this issue only on Mac OS and only while trying to build for Android. It started to happen after my update from RN 0.57 to 0.59.

To understand what is going on I started a new RN project and compared differences with my project. I noticed that there is a new folder in the new project - android/app/src/debug. And there is only one file in this folder - AndroidManifest.xml with the following contents:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

After adding this file to my old project Metro Bundler started working for Android as expected.

For some reason I had import com.facebook.react.BuildConfig; in my MainAplication file (I guess due to some smart ass auto import fixing feature of IntelliJ), and therefore BuildConfig.DEBUG was set to false. Because of this:

    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

React Native was always trying to load index.android.bundle from the app pacakge, not from the dev server. Removing the import com.facebook.react.BuildConfig line fixed the issue for me 🎆 🍺 👍

This worked for me 😃

@vinnyhoward solution works for me as well. This saved the few remaining hairs on my head. No need to change distributionUrl though, gradle-5.1.1-all.zip worked fine.

@vinnyhoward answer works for me.