react-native: [Android] Requiring images with Gradle 4 fails release builds
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:
- Init a new project:
react-native init Test
- 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
- Require an image in
index.js
- 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.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 221
- Comments: 122 (15 by maintainers)
Commits related to this issue
- Better Android Gradle Plugin 3.x integration Summary: Better integration with the Android Gradle-based build process, especially the changes introduced by the [Android Gradle Plugin 3.x and AAPT2](ht... — committed to Plo4ox/react-native by CFKevinRef 6 years ago
- Workaround to compile with Gradle 3. - https://github.com/facebook/react-native/issues/16906 - https://github.com/facebook/react-native/pull/17967 — committed to coopcycle/coopcycle-app by alexsegura 6 years ago
- Android: fixing release build new version of react-navigation bundles images in gradle 3 incompatible way. This commit applies a workaround for the problem. More details: https://github.com/react-na... — committed to chrmod/cliqz-s by chrmod 6 years ago
- Android: fixing release build new version of react-navigation bundles images in gradle 3 incompatible way. This commit applies a workaround for the problem. More details: https://github.com/react-na... — committed to chrmod/cliqz-s by chrmod 6 years ago
- Android: fixing release build new version of react-navigation bundles images in gradle 3 incompatible way. This commit applies a workaround for the problem. More details: https://github.com/react-na... — committed to cliqz-oss/cliqz-s by chrmod 6 years ago
- added android.enableAapt2=false in gradle.properties to fix build issues. https://github.com/facebook/react-native/issues/16906 — committed to viswatejan/sequence-board-react-native by viswatejan 6 years ago
- Disable AAPT2 because of a bug preventing release builds * https://github.com/facebook/react-native/issues/16906 — committed to NSWSESMembers/availability-poc by sdunster 6 years ago
- Disable AAPT2 because of a bug preventing release builds * https://github.com/facebook/react-native/issues/16906 — committed to NSWSESMembers/availability-poc by sdunster 6 years ago
- Fix bug in asset build process https://github.com/facebook/react-native/issues/16906#issuecomment-382605516 — committed to cndy-store/mobile-wallet by fabrik42 6 years ago
- Workaround for release APK with new Gradle https://github.com/facebook/react-native/issues/16906 — committed to baygeldin/StressDetectionKit by baygeldin 6 years ago
- Add setting to disable aapt workaround for issue described here ref: https://github.com/facebook/react-native/issues/16906 — committed to CruGlobal/missionhub-react-native by ryancarlson 6 years ago
- new step 12: Android release OK ref to: https://github.com/flyskywhy/g/blob/master/i%E4%B8%BB%E8%A7%82%E7%9A%84%E4%BD%93%E9%AA%8C%E6%96%B9%E5%BC%8F/t%E5%BF%AB%E4%B9%90%E7%9A%84%E4%BD%93%E9%AA%8C/%... — committed to flyskywhy/UvcCameraManager by flyskywhy 6 years ago
- Workaround for release APK with new Gradle https://github.com/facebook/react-native/issues/16906 — committed to baygeldin/StressDetectionKit by baygeldin 6 years ago
- update for fix react release build as seen on https://github.com/facebook/react-native/issues/16906#issuecomment-364960908 — committed to GustavoHGS/react-native by GustavoHGS 6 years ago
- Better Android Gradle Plugin 3.x integration Summary: Better integration with the Android Gradle-based build process, especially the changes introduced by the [Android Gradle Plugin 3.x and AAPT2](ht... — committed to janicduplessis/react-native by CFKevinRef 6 years ago
- Better Android Gradle Plugin 3.x integration Summary: Better integration with the Android Gradle-based build process, especially the changes introduced by the [Android Gradle Plugin 3.x and AAPT2](ht... — committed to janicduplessis/react-native by CFKevinRef 6 years ago
- š¤ Disable AAPT2 Temp fix until https://github.com/facebook/react-native/issues/16906 release — committed to alvinthen/react-native-starter-pack by alvinthen 6 years ago
- android: Disable AAPT2 for now, to unblock release builds. This became the default with Android Gradle Plugin version 3.0.0: https://developer.android.com/studio/releases/gradle-plugin#3-0-0 So tur... — committed to zulip/zulip-mobile by gnprice 6 years ago
- Better Android Gradle Plugin 3.x integration (#20526) Summary: Mirrors #17967 which was imported and reverted Original: Better integration with the Android Gradle-based build process, especially th... — committed to KusStar/react-native by CFKevinRef 6 years ago
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.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.Canāt use
android.enableAapt2=false
since then other necessary components fail. A bad situation to find this near the end of a project.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
andREACT_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:
Overall this feels a lot friendlier to the Android build system, as the resources and assets actually go through the
merge${VariantName}Assets
andmerge${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:
merge${VariantName}Assets
andmerge${VariantName}Resources
depend on the bundling stepIāll try to find some time to put a PR together if that sounds reasonable.
Eu resolvi o problema! node_modules_reactnavigation_src_views_assets_backicon.png NĆ£o sei qual procedimento exatamente resolveuā¦
Primeiro renomeei todas as imagens retirando todos os '@'em node/modules/reactnavigation/src/views/assets/
depois em react native//node_modules/react-navigation/src/views/Header
Em Header.js comentei a linha 478 //source={require(āā¦/assets/back-icon-mask.pngā)}
Em HeaderBackButton.js linha 13 const defaultBackImage = null;//require(āā¦/assets/back-icon.pngā);
Em ModularHeaderBackButton.js linha 6 const defaultBackImage = null;//require(āā¦/assets/back-icon.pngā);
Aparentemente o pacote react-navigation era o culpado pelo bug.
This should be fixed in 0.57 (see da6a5e0439c168147271ef66ad5ebbeebd6fce3b).
@samehgerges solution work for me with some fixes. in
app/build.gradle
file replacewith
We were hit with this bug as well. I found a work around without disabling things.
In my app/build.gradle file, I simply put this:
Was able to successfully build in my build system. Thanks for all the help!
Still having the same issue.
Have gone through each possible solution individually and nothing works.
android.enableAapt2=false
is not a fix for more complicated apps, as others have pointed out, it causes build failures on other dependencies. None of the other workarounds solve the problem, is there any timeline for a fix on this?Versions: react-native: 0.55.3 gradle: 3.1.0
None of the solutions on this thread worked for me, still canāt build my release.
Please give https://github.com/facebook/react-native/pull/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!
I have the same issue
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
please note that properties names are dynamic and depends on your target names, bundleIn<Target>, resourcesDir<Target>
android/app/src/*/res/*/reactnative_*.png
android/app/src/*/res/*/node_modules_*.png
{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 replacewith
I have the same issue. I Adding android.enableAapt2=false to android/gradle.properties but no effect.
org.gradle.configureondemand=true
work for me. i justrm -rf build && ./gradlew assembleRelease
and it worked. thank you for all the people in the thread who helped with this issue. you guys rock.Any solution?
@iqbalshirolās answer worked for me but I will point out that you should add
org.gradle.configureondemand=true
in your ~properties.gradle~ gradle.properties file not build.gradle. I agree itās the best solution as of nowSame error:
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.
Hello guys, any update about an official fix for this bug?
@dj-hedgehog https://github.com/facebook/react-native/commit/da6a5e0439c168147271ef66ad5ebbeebd6fce3b
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.Hey guys, I found a temporary solution for this, not sure is this a good idea, but it work for me. I also used the
org.gradle.configureondemand=true
andandroid.enableAapt2=false
before, but it also cause me other issue. I saw there are few library have the png flat file issue, likereact-navigation
,react-native-calendars
,react-native-datepicker
, even I put my png file to the resources folder also have the issue, but I make it to jpeg solve the tinny issue. Now get into the point.I using
react-native-calendars
and I found those png file in the folder and delete it all. Then, I rebuild to see whichjs file
using it, then I comment the code mostlyImage require
, then you can decide you want to usereact-native-vector-icons
for replacement or just leave it alone if you not using it. Then flat file problem temporary solved, basically I no using any of the arrow for the png file, but I doing this is not a bad things.Hope help others =)
This works for me on latest RN
I did have to remove
android.enableAapt2=false
fromandroid/gradle.properties
first because I had added it there before as the temp fix.Thanks RN team
See this PR for the official fix coming soonā¢.
https://github.com/facebook/react-native/pull/17967
any update on this?
I hate @react-native-bot
The best fix for me was to temporarily revert to gradle 2.3.3 as suggested by @akrumel
android.enableAapt2=false
works (when there are no images in drawable)@CFKevinRef Thanks for the feedback and the great work. For those also seeing this thread, I reverted to Android Studio 2.3.3 to wait for this to settle out, which was pretty painless. I will ensure a bug is exists with codepush and reference the appropriate RN issue(s).
I am using the
0.57.3
and didnāt find any significant bug.If somebody is actually interested into renaming png to try out one of the possible workaround of this thread:
+1, the same issue
+1, I have the same issue
Thanks @IljaDaderko I was having a dex exception but adding that fixed it!!! Only spent 3 hours pulling out my hair š
Hello guys, I have the same issue and so is there a solution for that problem.
@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: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.
@khemrajsharma you need to bump to the version
0.57.3
.@iqbalshirol after that adjustments: https://github.com/facebook/react-native/issues/16906#issuecomment-365790350
org.gradle.configureondemand=true
worked for me, but you need to add it to grade.properties not build.gradle
With the workaround applied (
android.enableAapt2=false
) not only will android gradle build spit countless warningsbut also my project wonāt build in Android Studio 3.1+ (it will still build from the terminal).
Removing
android.enableAapt2=false
fixes this but then it hits the current bugā¦@ujwal-setlur I need to see if I can fix the PR to work with a build-from-source of React Native.
For anyone experiencing dex related errors try this inside of your
android/app/build.gradle
Related: https://developers.soundcloud.com/blog/congratulations-you-have-a-lot-of-code-remedying-androids-method-limit-part-1
I have āreact-nativeā: ā^0.57.1ā, this issue still occurs.
RN 0.55.2 combination of
org.gradle.configureondemand=true
android.enableAapt2=false
worked for meI had the same issue as in https://github.com/react-navigation/react-navigation/issues/3315 I solved it this way: Firstly bundled JS project with this 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
and then generated signed APK on Android Studio, which fortunately worked for me (I did not changed anything in gradle.propertiesThis is still happening in
0.55.4
.@steveamaza It works for me too. By the way, you should clean the
android/app/build
first after addingorg.gradle.configureondemand=true
in the gradle.properties.None of
org.gradle.configureondemand=true
or disablingaapt2
work arounds fixed my case. I end up putting all my image resources in Android projectāsdrawable
folder, and change my RN code to reference images from there.Any update on this issue?
Any update on this issue?
@FSPinho Also have the same issue, vector icons not showing but I also removed
org.gradle.configureondemand=true
and enabled aapt, assembleRelease now works but vector-icons donāt show anymore, no update on this?0.55.4 the same.
org.gradle.configureondemand=true works, but the react-native-vector-icons are not loading =//
0.55.3 the same
I agree. This is still an issue
Hi, coming late to the party I know. But I found a fix for the problem in my case that may work for others. As described in the React Native Images I had
@2x
and@3x
suffixes on some.png
files, e.g.:Turns out if I delete the plain
.png
file and leave the@2x.png
and@3x.png
files the problem goes away, and the images are sized correctly in my app. I also have plain.png
files in my project and they work fine. So it would appear that are supposed to have either have one or the other, but not both. šUPDATE 5/29/2018: OK, this stopped working for me. I also tried to rename the file xxx@1.png as mentioned below, but that didnāt work either. In the end the only thing that worked consistently was the
android.enableAapt2=false
in thegradle.properties
file.Using the following configuration and everything works fine
project level
build.gradle
In order to use gradle 4.4 you will need to modify your gradle.properties file to look like this
i managed to solve this problem by change gradle version from 3.1.1 to 3.0.1
@Xing-He I donāt know anything about gradle. But using your solution create another error which is duplicate files error. And using the stackoverflow solution (see link) create another error :
Ć.Ć
And about the @CFKevinRef solution, what are the values to set for
REACT_NATIVE_JS_DIR
andREACT_NATIVE_ASSETS_DIR
?Any news about this error?
@CFKevinRef I am getting the following error from the proposed
react.gradle
file: