React-native: [0.57][ANDROID] Signed release do not show local assets images.

[anjapadu]

Environment

System
  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
      Memory: 422.77 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.11.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /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 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 23.0.1, 26.0.3, 27.0.0, 27.0.3, 28.0.2
        API Levels: 23, 26, 27, 28
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0
      react-native: 0.57.1 => 0.57.1
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-rename: 2.2.2

Description

Debug is all alright. After build release apk version can't see local images.
Tried the #20358 workaround but get this error:

on al my resources of all my images. Any ideas? Maybe could be the bundle?

Reproducible Demo

Just release build android signed release.
Gradle 4.4.1

[ygerg]

I was able to solve the problem by manually running
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

However, why was copying images to their respective asset folders not required before?

[anjapadu]

I can't, after execute that command i get the duplicated assets error, and if i don't remove the assets moved to the res folder the application won't run :/ Probably will just need to downgrade just to make the signed APK.

[zkrige]

I have this exact same issue. I end up manually removing the images from android/app/src/main/res when building signed apk with Android Studio, then it works.

This isnt ideal as its a bit of manual work each time I need to build an apk

[rcidt]

Same issue here. What @ygerg suggested does work, but I am wondering why this is.

[jfbaraky]

@ygerg solution didn't worked for me. To make the build I had to rollback the react.gradle to a previous version. The custom file on this stackoverflow answer also worked.

[anjapadu]

I tried almost all possible solutions and the images still don't show after a successful build. For the moment i uploaded all images to the server and i'm using the url to load them but gonna have to downgrade to generate my final release if i can't find a solution that works :C

[shinriyo]

iOS is react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios?

from
https://github.com/facebook/react-native/issues/18472

[shinriyo]

what is module:react-native?

Loading dependency graph, done.

/Users/shinriyo/development/react_apps/kazoemon/index.js: Cannot find module 'babel-preset-react-native' from '/Users/shinriyo/development/react_apps/kazoemon'
- If you want to resolve "react-native", use "module:react-native"

Error: Cannot find module 'babel-preset-react-native' from '/Users/shinriyo/development/react_apps/kazoemon'
- If you want to resolve "react-native", use "module:react-native"
    at Function.module.exports [as sync] (/Users/shinriyo/development/react_apps/kazoemon/node_modules/resolve/lib/sync.js:43:15)
    at resolveStandardizedName (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-descriptors.js:114:9)
    at items.map (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-descriptors.js:69:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-descriptors.js:69:29)
    at createPresetDescriptors (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-descriptors.js:61:10)

[shinriyo]

I changed

  "presets": [
    "react-native"
  ],

to

  "presets": [
    "module:react-native"
  ],

in
.babelrc file.

error was changed.

yarn run v1.5.1
warning ../../../package.json: No license field
$ react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
Loading dependency graph, done.

/Users/shinriyo/development/react_apps/kazoemon/index.js: Plugin/Preset files are not allowed to export objects, only functions. In /Users/shinriyo/development/react_apps/kazoemon/node_modules/react-native/Libraries/react-native/react-native-implementation.js

Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/shinriyo/development/react_apps/kazoemon/node_modules/react-native/Libraries/react-native/react-native-implementation.js
    at createDescriptor (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-descriptors.js:138:11)
    at items.map (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-descriptors.js:69:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-descriptors.js:69:29)
    at createPresetDescriptors (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-descriptors.js:61:10)
    at presets (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-descriptors.js:43:19)
    at mergeChainOpts (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-chain.js:303:26)
    at /Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-chain.js:266:7
    at mergeExtendsChain (/Users/shinriyo/development/react_apps/kazoemon/node_modules/@babel/core/lib/config/config-chain.js:282:21)

error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
Directory: /Users/shinriyo/development/react_apps/kazoemon
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/Users/shinriyo/development/react_apps/kazoemon/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[ygerg]

@shinriyo That is a completely separate issue, in order to update to 0.57 you need to first run
yarn add metro-react-native-babel-preset

Then, change .babelrc preset to

{
  "presets": ["module:metro-react-native-babel-preset"]
}

[shinriyo]

@ygerg thank you for response
I use 0.57.0-rc.3. for using TypeScript.
Is 0.57 higher than 0.57.0-rc.3?

[shinriyo]

Finally I don't know what is bad, but worked

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    "transform-decorators-legacy",
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": true,
        "polyfill": false,
        "regenerator": false
      }
    ]
  ]
}

And I ran react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
command.

[DaniAkash]

Faced the same problem after upgrading to React Native 0.57 on Android (iOS seems to be working fine)

Here's what I did:

• From my project root folder, I first created the asset files and moved them to android resources folder using the following 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

• Then did a production build for android normally:

cd android && ./gradlew assembleRelease

• (optional) Finally the first step created lots of untracked images in my git repository, hence to clear the new untracked files, I ran:

git clean -fd

make sure you have committed your code before running the git clean -fd command

This will create the release apk with all the required local images. However, a fix for the usual way will be really appreciated...

[spotsadmin]

Yeah, it broke our Android build. Copying the assets over manually leaves the project unclean. Hope there will be a fix soon. Any idea which commit in 0.57 introduced this issue? Just so that we can think about a real fix.

[DaniAkash]

Upgrading gradle version to 4.4 actually fixes this issue. Steps available in this documentation

[anjapadu]

Actually i upgraded gradle to 4.4 coz im also using rnfirebase but had no luck. The only solution i found is transform all my image assets to base64 literals and import them as string variables.

[NeliHarbuzava]

@DaniAkash how do you write path to images to make it work with 4.4 gradle?

[NeliHarbuzava]

I found right way for Android.
1) First of all, you need to copy you image to android/app/srs/main/assets/ . You may do this manually or with a help of gradle tasks.
2) Use right source via uri for android:
<Image source={Platform.OS === 'android' ? {uri: "asset:/image.png"} : require('./image.png')} />
3) Then just build release version of apk.

For iOS it is a bit simplier, you just copy assets and use require .

I think, issue may be closed.

EDIT. Example of my task plased in android/app/build.gradle:

task copyLogo(type: Copy) {
    from '../../assets/images/login_logo.png' // destination to where your image placed
    into 'src/main/assets'
}
// Note that you may need to add other build variants
gradle.projectsEvaluated {
    bundleDebugJsAndAssets.dependsOn([copyLogo])
    bundleReleaseJsAndAssets.dependsOn([copyLogo])
}

And requiring that image:

<Image
   source={Platform.OS === 'ios' ? require('./login_logo.png') : {uri: "asset:/login_logo.png"}}
   style={STYLES.logoImage}
/>

[spotsadmin]

Unfortunately problem still exists in react-native 0.57.7
How other fellow React-Native/Android developers are working around this issue?
It seems major that local images are missing in the release build..

[GaneshSaiKumar]

I've upgraded my react native to 57.7
react to 16.3.2
build tools gradle to 3.2.0
gradle to 4.6

and removed all drawable* folders

rm -rf android/app/src/main/res/drawable-*

from gradle.properties remove android.enableAapt2=false

use the following command to bundle assets:

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/build/intermediates/res/merged/release/

now generate release apk using following command.
cd android && ./gradlew assembleRelease && cd ..

Note: bundled assets folder in RN > 57 has changed to android/app/build/intermediates/res/merged/release/

[keermanish]

Any progress on this issue or any solution available, I'm also facing the same issue. Unfortunately, for me, it's on the landing page and happening only when I install the APK and immediately launch the application.(if I open application for next time, images are getting load/render)

[el-lsan]

Any fix/temporary solution for this ? 😕

I tried
https://github.com/facebook/react-native/issues/21309#issuecomment-448301534
But didn't help!

Here's my env:

"react": "16.7.0",
"react-native": "0.57.8",

[anjapadu]

Any fix/temporary solution for this ? 😕

I tried
#21309 (comment)
But didn't help!

Here's my env:

"react": "16.7.0",
"react-native": "0.57.8",

Dirty fix: Transform images to base64 and import them as js files

[ferrannp]

Hello there 👋 this issue has been reported for an old version of React Native. Ideally we'd like everyone to be using 0.59 (see the awesome changes it brought) but we know updating can be a pain. We are going to close this issue because it's from a version before 0.57, which is really old.

But please, if it's actually still an issue with 0.59 please comment below and we can reopen it 😊

[hariegnify]

I am using the 0.59 version but I am still facing this issue

[romreed]

I am using the 0.59.6 and I am have this issue

[xempie]

I have the same issue for more than 2 years! why nobody can find a solution!!!? none of the provided solutions is working permanently!
react native 0.59.6
gradle 4.4
android 27,28 none working

[jwesselink]

I also had this issue, but I can’t exactly remember how I fixed it. I think I upgraded the Gradle version and compared the .gradle files to the files of a brand new project generated by react-native-cli.

[hariegnify]

Manually create a bundle(react-native bundle command) and comment this line "../../node_modules/react-native/react.gradle" from android/app/build.gradle file. If you face any issue like index.js/index.android.js not found give, the absolute path(for linux - /home/{user}/project-dir) of index.js file and output file.

[Relax594]

0.59.8 still same issue..

[Aung-Myint-Thein]

somehow I fixed the issue and I don't remember how a few months back when I upgraded to .59.1 then slowly the project fine till 0.59.8. Yesterday, I upgraded to 0.59.9 and this issue came up. :( .. look like this could be linked to gradle properties.

[rahamin1]

I have recently upgraded to 0.59.9 and experienced this the first time.

I followed @ygerg advice:
I was able to solve the problem by manually running 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

Then I got a 'duplicate assests error' and followed @anjapadu advice to remove the assets from android\app\src\main\res (there was a new 'drawable-mdpi' folder which I removed).

Problem seems to be solved this way, but I don't understand: why do I get the duplicate assets error?

[SimaRajput]

Delete all drawable folder from your res folder then run ./gradlew assebleRelease command.. this will work

[rahamin1]

@SimaRajput I think that you misunderstood me... I know how to make it work, I just asked a question...

[nene]

Using 0.59.5 and also getting this problem.

I've tried to fix it with the suggested react-native bundle command, but it doesn't help either. (not getting the duplicate assets error though).

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

I would expect that --assets-dest android/app/src/main/res places my resources to this directory, and indeed, it creates bunch of drawable-* directories inside there, but these all are empty. I think that somehow this command is unable to locate my resource files.

Nevermind: I had a script that helpfully deleted all these resources that I had generated :P

[kumarparth380]

Set shrinkResources to false will work in this case. shrinkResource compress the local assets and hence it does not appear in the release build.

release {
            ..
            minifyEnabled true
            shrinkResources false

        }

[michael-harley]

I found right way for Android.

1. First of all, you need to copy you image to android/app/srs/main/assets/ . You may do this manually or with a help of gradle tasks.
2. Use right source via uri for android:
   <Image source={Platform.OS === 'android' ? {uri: "asset:/image.png"} : require('./image.png')} />
3. Then just build release version of apk.

For iOS it is a bit simplier, you just copy assets and use require .

I think, issue may be closed.

EDIT. Example of my task plased in android/app/build.gradle:

task copyLogo(type: Copy) {
    from '../../assets/images/login_logo.png' // destination to where your image placed
    into 'src/main/assets'
}
// Note that you may need to add other build variants
gradle.projectsEvaluated {
    bundleDebugJsAndAssets.dependsOn([copyLogo])
    bundleReleaseJsAndAssets.dependsOn([copyLogo])
}

And requiring that image:

<Image
   source={Platform.OS === 'ios' ? require('./login_logo.png') : {uri: "asset:/login_logo.png"}}
   style={STYLES.logoImage}
/>

This is actually worked.
I'm using react-native 0.59.

use {uri: "asset:/file_name.png"}
(You can manually copy your image on android/app/src/main/assets/)

Well, I don't have much time to spend for 1 local image only, may as well do things dirty to make time more efficient.

Either way, this worked for me.

[yeeChenXie]

change build.grandle
buildTypes:{
// shrinkResources true
}

[jimallen]

Also seeing this issue..