[Android] Requiring images with Gradle 4 fails release builds

[Almouro]

Hello guys,

I ran into this issue when updating Gradle and Android Studio.

Thanks for your help!

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.5.0
Yarn: 1.3.2
npm: 5.3.0
Watchman: 4.7.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 3.0 AI-171.4408382

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.50.3 => 0.50.3

Target Platform: Android (22)

Steps to Reproduce

Requiring images with latest gradle fails release builds

I created a small test project but here are the steps to reproduce it:

1. Init a new project: react-native init Test
2. Update to latest Gradle:

• Open Android Studio and install recommended version
• Build from Android Studio, it should ask you to update build tools, do so

3. Require an image in index.js
4. Run cd android && ./gradlew assembleRelease

Expected Behavior

The command ./gradlew assembleRelease should not fail

Actual Behavior

Running ./gradlew assembleRelease when the image is required from the JS fails with:

/Users/almouro/bam/uefa/TestGradle3/android/app/build/intermediates/res/merged/release/drawable-mdpi/image.png: error: uncompiled PNG file passed as argument. Must be compiled first into .flat file..
error: failed parsing overlays.

If the image is not required, the command works fine.

Reproducible Demo

git clone https://github.com/Almouro/react-native-with-gradle-4
yarn
cd android
./gradlew assembleRelease

Workaround

Adding android.enableAapt2=false to android/gradle.properties fixes the issue but it is only a workaround.

[vladp]

+1 have same issue with react-native 0.50
setting android.enableAapt2=false to android/gradle.properties
helps with this issue. However, I am running into a next problem (and not sure if this due to the above setting).

  Task :app:bundleReleaseJsAndAssets
 Scanning folders for symlinks in /home/v/devel/mine/proj/mob/rn.common/node_modules (12ms)
 Scanning folders for symlinks in /home/v/devel/mine/proj/mob/rn.common/node_modules (10ms)
 Loading dependency graph, done.
 warning: the transform cache was reset.
 bundle: start
 bundle: finish
 bundle: Writing bundle output to: /home/v/tmp/u1b/app/intermediates/assets/release/index.android.bundle
 bundle: Done writing bundle output
 bundle: Copying 18 asset files
 bundle: Done copying assets
 
/home/v/tmp/u1b/app/intermediates/res/merged/release/drawable-mdpi/src_jsapp_img_material_ic_local_library_black_48dp_android_drawablexxhdpi_ic_local_library_black_48dp.png: error: Invalid filename.  Unable to add.
 

The file

/home/v/tmp/u1b/app/intermediates/res/merged/release/drawable-mdpi/src_jsapp_img_material_ic_local_library_black_48dp_android_drawablexxhdpi_ic_local_library_black_48dp.png

indeed, is not present in the merged/release directory. But I have no idea who generates that file name for what reason/etc.

[Almouro]

My understanding is that the React Native bundleJS gradle task copies all the images in the android merged resources folder, but aapt now expects images there to be compiled in .flat files.

[vladp]

@Almouro I sorted out the issue with
src_jsapp_img_material_ic_local_library_black_48dp_android_drawablexxhdpi_ic_local_library_black_48dp.png

it turns out that something in aapt (or somewhere in gradle) chokes on image file names that are located in deep directory structures.
The above name was created by concatenating (with '_') the directory tree where local_library_black_48dp.png was. I basically moved the file into a simpler directory structure, then updated my require ('path_to_image/..) in my index.android.js and that particular problem went away

the need to do the android.enableAapt2=false workaround is still there, unfortunately

[wmonecke]

Same error:

Scanning 766 folders for symlinks in /Users/waltermonecke/Code_Projects/reactNative/lisdo/node_modules (15ms)
Scanning 766 folders for symlinks in /Users/waltermonecke/Code_Projects/reactNative/lisdo/node_modules (100ms)
Loading dependency graph, done.
warning: the transform cache was reset.
bundle: start
bundle: finish
bundle: Writing bundle output to: /Users/waltermonecke/Code_Projects/reactNative/lisdo/android/app/build/intermediates/assets/release/index.android.bundle
bundle: Done writing bundle output
bundle: Copying 106 asset files
bundle: Done copying assets

/Users/waltermonecke/Code_Projects/reactNative/lisdo/android/app/build/intermediates/res/merged/release/drawable-hdpi/node_modules_reactnativerouterflux_node_modules_reactnavigation_src_views_assets_backicon.png: error: uncompiled PNG file passed as argument. Must be compiled first into .flat file..
error: failed parsing overlays.

node_modules:
"react": "16.0.0-alpha.12",
"react-native": "0.48.3",

Has anyone had any success fixing this? I can't test the production app because of this.

[wuyunqiang]

I have the same issue.
I Adding android.enableAapt2=false to android/gradle.properties
but no effect.

[SharpMobileCode]

This bug has been a pain since we've upgraded to Android 3.x and setting android.enableAapt2 = false is not a sustainable long term workaround. It's disappointing that there is no traction on this serious issue.

[allison7]

Can't use android.enableAapt2=false since then other necessary components fail. A bad situation to find this near the end of a project.

[xzilja]

android.enableAapt2=false works (when there are no images in drawable)

[Alexispap]

1. Delete the tmp files of the images that were created during the build process. (in tmp\YOURAPP\app\intermediates\res\merged\release\drawable....). The exact path is given by the compiler error.
2. Search for files that have a @-suffix different from @2x or @3x in your app folder and delete them. See https://facebook.github.io/react-native/docs/images.html
3. Sometimes the issue stems from images of a module you use. Search for the images with wrong suffix in the respective node_modules folder and delete them.
4. DON'T USE the common workaround (which consists in disabling aapt2).

[CFKevinRef]

tl;dr - I think the bundling step in react.gradle should hand off to the Android build system much earlier in the build process

I may have killed a few birds with one stone while working out a solution for something unrelated.

I wanted to bundle the js ahead of time, then build multiple variants using that same bundle. The solution I came up with also allows you to keep AAPT2 enabled, which was a major plus.

First I set a few environment variables, REACT_NATIVE_JS_DIR and REACT_NATIVE_ASSETS_DIR.

Then I bundle with --bundle-output "$REACT_NATIVE_JS_DIR/index.android.bundle" --assets-dest "$REACT_NATIVE_ASSETS_DIR".

The build.gradle adds those to the main source set:

// not needed anymore in this setup:
// apply from: "../../node_modules/react-native/react.gradle"
android {
    ...
    sourceSets {
        // Android includes "main" in all application variants
        main {
            assets.srcDirs += System.env.REACT_NATIVE_JS_DIR
            res.srcDirs += System.env.REACT_NATIVE_ASSETS_DIR
        }
    }
}

Overall this feels a lot friendlier to the Android build system, as the resources and assets actually go through the merge${VariantName}Assets and merge${VariantName}Resources tasks. As a bonus, my universal APK was even 4% smaller.

I have a feeling that react.gradle could be modified to do something similar, like:

• Output to "build/generated" instead of "build/intermediates"
• Append those directories to the source sets like above
• Make merge${VariantName}Assets and merge${VariantName}Resources depend on the bundling step
  • Currently this is reversed - it requires the merge tasks to happen first, then tries to output to those already-merged (and AAPT2-processed) intermediate directories, with a fair amount of hard-coded paths and build task dependency ordering

I'll try to find some time to put a PR together if that sounds reasonable.

[jeaye]

@CFKevinRef I've verified your approach works, as long as REACT_NATIVE_ASSETS_DIR isn't actually pointing to ./android/app/build/intermediates/res/merged/$build_type. This did it for me:

android_intermediates=$(mktemp -d)
export REACT_NATIVE_JS_DIR=$android_intermediates/assets/$build_type_lower
export REACT_NATIVE_ASSETS_DIR=$android_intermediates/res/merged/$build_type_lower

It's not a great long-term solution, though, since avoiding the default gradle support may cause issues down the road, when new behavior is added, or something is changed. For now, it does allow things to work with AAPT2. Thank you!

It'd be great to see that PR and have this ball rolling.

[samehmikhail]

Until this got fixed, there is another workaround similar to solution proposed by @CFKevinRef. This solution also allows you to keep using AAPT2. Workaround consists of three steps

• change default bundling output folder to be in src/ directory instead of build folder. You can do this by changing react properties at the top of your build.gradle (app build gradle)

ext.react = [
        bundleInRelease        : true,
        resourcesDirRelease   : "src/release/res"
]
apply from: "../react.gradle" /*Check file for more information*/
apply plugin: 'com.android.application'

please note that properties names are dynamic and depends on your target names, bundleIn, resourcesDir

• Add generated files to git ignore, to keep your native resources folder clean
  android/app/src/*/res/*/reactnative_*.png
android/app/src/*/res/*/node_modules_*.png
• Reverse dependency between this react gradle task (bundling) and merging assets and resources.
  This is the hardest part, you need to change this file {project_root_dir}/node_modules/react-native/react.gradle, In my case I copied this file to my project and keep updating it with each react release. The change is quite simple
  replace

currentBundleTask.dependsOn("merge${targetName}Resources")
currentBundleTask.dependsOn("merge${targetName}Assets")

with

runBefore("merge${targetName}Resources", currentBundleTask)
runBefore("merge${targetName}Assets", currentBundleTask)

[CFKevinRef]

Please give #17967 a try. You should be able to just replace your react.gradle with that one.

Also if you have some old projects lying around based on the Android Gradle Plugin 1.x or 2.x I would appreciate a test as well!

[iqbalshirol]

I had the same issue. But did not fix with - android.enableAapt2=false, as this has issues with other drawable resources in the project.

Fixed it with adding org.gradle.configureondemand=true in build.gradle, which shall disable the 'bundleReleaseJsAndAssets' task to run, which is the best solution and works in any condition. Hope this helps.

[hramos]

This should be fixed in 0.57 (see da6a5e0).

[marcosbenevides]

Until this got fixed, there is another workaround similar to solution proposed by @CFKevinRef. This solution also allows you to keep using AAPT2. Workaround consists of three steps

• change default bundling output folder to be in src/ directory instead of build folder. You can do this by changing react properties at the top of your build.gradle (app build gradle)

ext.react = [
        bundleInRelease        : true,
        resourcesDirRelease   : "src/release/res"
]
apply from: "../react.gradle" /*Check file for more information*/
apply plugin: 'com.android.application'

please note that properties names are dynamic and depends on your target names, bundleIn, resourcesDir

• Add generated files to git ignore, to keep your native resources folder clean
  android/app/src/*/res/*/reactnative_*.png
android/app/src/*/res/*/node_modules_*.png
• Reverse dependency between this react gradle task (bundling) and merging assets and resources.
  This is the hardest part, you need to change this file {project_root_dir}/node_modules/react-native/react.gradle, In my case I copied this file to my project and keep updating it with each react release. The change is quite simple
  replace

currentBundleTask.dependsOn("merge${targetName}Resources")
currentBundleTask.dependsOn("merge${targetName}Assets")

with

runBefore("merge${targetName}Resources", currentBundleTask)
runBefore("merge${targetName}Assets", currentBundleTask)

THIS WORKED FOR ME, THANK YOU!

[lucidtheory]

This works for me on latest RN

I did have to remove android.enableAapt2=false from android/gradle.properties first because I had added it there before as the temp fix.

Thanks RN team

[AdrianZghibarta]

Is this fix also added to 0.56.0 RN version?

[i6mi6]

The reason it didn't work for me was because my gradle.properties file was missing ...

[mrruby]

React Native 0.48 I found solution for my issues, updating
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10-all.zip
classpath 'com.android.tools.build:gradle:3.2.0'
and
https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows/44476757#44476757

[kaushikwavhal]

android.enableAapt2=false initially did not work for me until i did sudo gem install cocoapods on OSX.
On ubuntu, sudo apt-get install libncurses5:i386 libstdc++6:i386 zlib1g:i386 should make it work.

[valerybodak]

@marcosbenevides

Could you please clarify what is your version of React and React Native? And maybe you will provide your full react.gradle file. Thanks in advance!

[khemrajsharma]

This should be fixed in 0.57 (see da6a5e0).

I have "react-native": "^0.57.1", this issue still occurs.

[SandroMachado]

@khemrajsharma you need to bump to the version 0.57.3.

[MwirabuaTimothy]

@SandroMachado react-native@0.57.3 expects peer dependency react@16.6.0-alpha.8af6728 which is still buggy

[MwirabuaTimothy]

The issue seemed to disappeared after I stepped back to this and deleted my build folder and rebuilt.

    "react": "16.5.0",
    "react-native": "0.57.1"

[SandroMachado]

I am using the 0.57.3 and didn't find any significant bug.

[valerybodak]

@rumax
Do yo use react-native-toast-native library in your project? It was a reason of the issue with uncompiled PNG for me. I have a react native 0.57.0

[claudioviola]

I had the same issue. But did not fix with - android.enableAapt2=false, as this has issues with other drawable resources in the project.

Fixed it with adding org.gradle.configureondemand=true in build.gradle, which shall disable the 'bundleReleaseJsAndAssets' task to run, which is the best solution and works in any condition. Hope this helps.

@iqbalshirol thanks for your suggestion. My project works again but what does org.gradle.configureondemand do? Doesn't configure the native libraries in node_modules? Is it necessary?

This is my list of native libraries at the moment:

"react-native-animatable": "^1.3.0",
    "react-native-config": "^0.11.5",
    "react-native-countdown-component": "^1.7.3",
    "react-native-dropdownalert": "^3.5.0",
    "react-native-firebase": "^5.0.0",
    "react-native-image-pan-zoom": "^2.1.9",
    "react-native-modal-overlay": "^1.2.3",
    "react-native-modalbox": "^1.6.0",
    "react-native-qrcode-svg": "^5.1.0",
    "react-native-splash-screen": "3.0.6",
    "react-native-svg": "^6.5.2",
    "react-native-table-component": "^1.1.8",
    "react-native-version-number": "^0.3.4",
    "react-native-version-up": "^1.0.9",
    "react-navigation": "^2.5.5",

Thank you!

[sunithakk]

android.enableAapt2=false

android.enableAapt2=false not working for me.is there any other solution?

[DeependraCSE]

android/app/build/intermediates/res/merged/debug/drawable-hdpi/node_modules_reactnavigationstack_dist_v iews_assets_backicon.png: error: uncompiled PNG file passed as argument. Must be compiled first into .flat file.. error: failed parsing overlays.

this is the issue for me
Adding android.enableAapt2=false to android/gradle.properties
is work for me

[SandroMachado]

It is fixed in >=0.57.3.