React-native: Android: Bundled assets not being included in generated (signed) APK

[djw27]

Environment

React Native Environment Info:
  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 2.79 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.11.1 - /usr/local/bin/node
    Yarn: 1.0.2 - /usr/local/bin/yarn
    npm: 6.1.0 - /usr/local/bin/npm
    Watchman: 4.7.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    Android SDK:
      Build Tools: 23.0.1, 23.0.2, 24.0.0, 24.0.1, 24.0.2, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.1, 27.0.3
      API Levels: 23, 24, 25, 26, 27
  IDEs:
    Android Studio: 3.1 AI-173.4907809
    Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
  npmPackages:
    react: ^16.5.0 => 16.5.1
    react-native: ^0.57.0 => 0.57.0
  npmGlobalPackages:
    create-react-native-app: 1.0.0
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7

Description

This has been an issue for a long time, however, we've put up with it until now.

When following the official guide on generating release builds for Android (https://facebook.github.io/react-native/docs/signed-apk-android), we correctly generate a signed APK at android/app/build/outputs/apk/${flavorName}/app-${flavorName}.apk, however, the app crashes on launch as there are no assets included in the APK:

During build, the assets are correctly generated at android/app/build/intermediates/assets/${flavourName}/, but simply aren't included in the output APK.

Now the workaround, which there seem to be a lot of people using in one form or another, is to copy the contents of android/app/build/intermediates/assets/${flavourName}/ to android/app/src/main/assets/ and generate the APK again (either through $ ./gradlew assembleRelease or Android Studio, it makes no difference).

A lot of people have put up with this as an issue by running $ 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/ manually before running assembleRelease, which simply outputs the generated assets in the folder I mentioned above.

The question is, why aren't the assets generated during the build process (the ones found in android/app/build/intermediates/assets/${flavourName}/), included in the APK?

This is what the APK should look like:

Like I say, this has been a long term issue for us, and we're not on the latest version of react native but there have been no changes to the react.gradle since 0.53. I will of course test the latest version all the same.

EDIT: Upgrading to 0.57 this is still an issue

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[Christian-Athom]

I have had the same problems on 0.56, upgrading to 0.57 and i'm unable to build my project because of a Metro crash "FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory"

[kigawas]

Same here. Using the latest RN 😕

As the reference above, the PR #21408 can resolve the index.android.bundle problem 😄

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

            from jsBundleDir
            into file(config."jsBundleDir${targetName}" ?:
                "$buildDir/intermediates/assets/${targetPath}")

+            // Workaround for Android Gradle Plugin 3.2+ new asset directory
+            from jsBundleDir
+            into file(config."jsBundleDir${targetName}" ?:
+                "$buildDir/intermediates/merged_assets/${targetPath}/merge${targetName}Assets/out")

[tawanorg]

Same here. Using the latest RN 😕

As the reference above, the PR #21408 can resolve the index.android.bundle problem 😄

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

            from jsBundleDir
            into file(config."jsBundleDir${targetName}" ?:
                "$buildDir/intermediates/assets/${targetPath}")

+            // Workaround for Android Gradle Plugin 3.2+ new asset directory
+            from jsBundleDir
+            into file(config."jsBundleDir${targetName}" ?:
+                "$buildDir/intermediates/merged_assets/${targetPath}/merge${targetName}Assets/out")

Thanks! for this. Problem is solved!

[GitHubGreg]

Is there a similar workaround for apps built using Expo?

[motogod]

@ttawan I face the similar issue recently, where is the file about from jsBundleDir ? Thanks.

[brianinator]

I recently upgraded to 0.59.8 and this seem still be an issue. App Center creates the bundle but it is not included in final apk as issue states. I do see an assets and res dir but no android.index.bundle.

react: 16.8.3
react-native: 0.59.8
build gradle: 3.3.1

Update:

I was able to solve it by changing the JSBundleDir as explained in: https://github.com/Microsoft/react-native-code-push/issues/1427#issuecomment-430913598

[anmol-appzoy]

Hi, can someone please help me out in including my index.android.bundle file in release APK build. My react-native version - 0.58.6 and Gradle version is 4.7. Thanks