React-native: unable to load script from assets index.android.bundle - React Native

[sumittiwari87]

🐛 Bug Report

I am trying to create the native react app by learning some tutorials and using react-native-cli. I am getting this error while running the application on android platform using react-native run-androidscript. The error I am getting is unable to load script from assets index.android.bundle. Make sure your build is packaged correctly and you are running a packager server. I tried setting port for TCP. After reading a lot of articles here I found this solution by running the command

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 && react-native run-android

So I added this command in my package.json. Now every time I have to run this command for the changes in code, live refreshing is not working and as I have seen in many tutorial that a development server will start but nothing is starting.
I still didn't understand why this error occurs and why not a JS development server is starting ?

Here is the info of react version - react-native-cli: 2.0.1 react-native: 0.58.6

To Reproduce

Create a native app using react-native-cli

Expected Behavior

Should run app and development server

Code Example

https://stackoverflow.com/questions/54975709/unable-to-load-script-from-assets-index-android-bundle-react-native

Environment

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[kelset]

Can you post the link to the tutorial you are following?

[joseph-perez]

React version - react-native-cli: 2.0.1 react-native: 0.57.1

I'm running into the same issue also. When building a release variant for android I can see the bundleReleaseJsAndAssets task completing successfully but I noticed that the bundle is being generated in

/projectNameHere/android/app/build/generated/assets/react/release/index.android.bundle

I've fixed the "Unable to load script from assets" error by moving the generated bundle to android/app/src/main/assets/ but I'm not sure if this is the correct way to fix this or if this is just something you have to do when testing a release build on android? I also see that you can make adjustments to the bundle location in build.gradle so I figure I can just change the location that the js bundle will be generated at to android/app/src/main/assets/ so that the bundle doesn't have to be generated manually every time a change is made. Would this be an acceptable fix or should the release bundle be kept in /projectNameHere/android/app/build/generated/assets/react/release/?

Any help is much appreciated!

[joseph-perez]

Turns out I should pay more attention and read the release notes! 😂 😅 I was able to fix my issue by using gradle 3.1 as recommended in the react native release notes for 0.57.

In my project I modified /android/build.gradle and changed

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

to

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

Once that was done I tried building my app on a device again and everything worked as expected!

This issue helped me A LOT to understand what was happening - https://github.com/Microsoft/react-native-code-push/issues/1427#issuecomment-430913598

[kelset]

@sumittiwari87 can you please LMK if what @joseph-perez wrote works for you too?

[babakansari]

@kelset The solution @joseph-perez provided worked for me!

[kelset]

Great, closing.

[gorvinsky]

Hi, @joseph-perez solution will give me another error where the solution to resolve this error is by using at least

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

Using either 3.3.0 or 3.3.2 will keep giving me the error "unable to load script" as discussed here.

Below are some of the details. Let me know if you need more info.

package.json

{
  "name": "Dummy",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "ac-qrcode-rn": "^0.2.1",
    "react": "16.6.1",
    "react-native": "0.59.4",
    "react-native-camera": "^2.0.2",
    "react-native-device-detection": "^0.2.0",
    "react-native-extended-stylesheet": "^0.10.0",
    "react-native-firebase": "^5.3.1",
    "react-native-gesture-handler": "^1.0.10",
    "react-native-image-picker": "^0.28.0",
    "react-native-immersive": "^1.1.2",
    "react-native-webview": "^2.14.0",
    "react-navigation": "^3.0.5",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-saga": "^0.16.2"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.50.0",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

android/build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "28.0.0"
        supportVersion = "28.0.0"
        reactNativeVersion = "+"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.2'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}


task wrapper(type: Wrapper) {
    gradleVersion = '4.4'
    distributionUrl = distributionUrl.replace("bin", "all")
}

subprojects {
    project -> if (project.name.contains('react-native-webview')) {
        buildscript {
            dependencies {
                classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.11"
            }
        }
    }
}

android/app/build.gradle

apply plugin: "com.android.application"

import com.android.build.OutputFile

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

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

def enableSeparateBuildPerCPUArchitecture = false

def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion

    defaultConfig {
        applicationId "com.dudu_react_native"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
        missingDimensionStrategy 'react-native-camera', 'general'
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

dependencies {
    implementation project(':react-native-image-picker')
    implementation project(':react-native-camera')
    implementation project(':react-native-webview')
    implementation project(':react-native-gesture-handler')
    implementation project(':react-native-immersive')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

[gorvinsky]

@kelset Any update? Do you need more info from me?

[gorvinsky]

I was not able to reproduce the bug by creating a brand new project. So I just ditched the old project. Sorry for not trying more before asking here.

[jacquesdev]

This fixed the issue for me https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows/44476757#44476757

[Hesowcharov]

Highly recommend to take account this answer - https://stackoverflow.com/a/53326616: for 28 api-level (Starting with Android 9.0 (API level 28), cleartext support is disabled by default.)

[Vietvantue]

Highly recommend to take account this answer - https://stackoverflow.com/a/53326616: for 28 api-level (Starting with Android 9.0 (API level 28), cleartext support is disabled by default.)

Thank @Hesowcharov, you save my day :)

[lenichols]

After all these scenarios, the only solution that worked for me was to create the index.android.bundle file in the /src/assets folder using cli. I followed this Stack answer and my app loaded with no issue: https://stackoverflow.com/a/51865052/1417671

[longnk-1447]

After all these scenarios, the only solution that worked for me was to create the index.android.bundle file in the /src/assets folder using cli. I followed this Stack answer and my app loaded with no issue: https://stackoverflow.com/a/51865052/1417671

but after ./gradlew assembleRelease I have error dulicate resouce in raw? You have solution for it?