[0.57][ANDROID] Signed release do not show local assets images. #21309

anjapadu · 2018-09-25T04:44:38Z

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

The text was updated successfully, but these errors were encountered:

arno-le · 2018-09-26T12:27:28Z

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 · 2018-09-28T05:46:53Z

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 · 2018-10-03T10:00:42Z

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 · 2018-10-03T17:02:06Z

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

jfbaraky · 2018-10-04T13:19:05Z

@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 · 2018-10-06T21:08:18Z

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 · 2018-10-09T23:14:11Z

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

from
#18472

shinriyo · 2018-10-09T23:15:18Z

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 · 2018-10-09T23:19:34Z

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.

arno-le · 2018-10-10T11:06:27Z

@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 · 2018-10-11T12:49:12Z

@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 · 2018-10-12T14:58:43Z

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 · 2018-10-26T11:19:38Z

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 · 2018-10-27T12:53:39Z

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 · 2018-10-30T11:42:20Z

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

anjapadu · 2018-10-30T14:01:18Z

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.

ghost · 2018-11-22T10:04:33Z

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

ghost · 2018-11-28T08:10:05Z

I found right way for Android.

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.
Use right source via uri for android:
<Image source={Platform.OS === 'android' ? {uri: "asset:/image.png"} : require('./image.png')} />
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 · 2018-12-08T17:08:53Z

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 · 2018-12-18T17:25:58Z

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 · 2019-01-27T08:01:59Z

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 · 2019-02-01T12:23:38Z

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",

anjapadu · 2019-02-01T14:31:24Z

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 · 2019-03-19T14:32:16Z

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 · 2019-04-23T04:51:25Z

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

romreed · 2019-04-24T14:33:29Z

I am using the 0.59.6 and I am have this issue

xempie · 2019-05-11T13:08:28Z

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 · 2019-05-11T14:54:42Z

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 · 2019-05-11T16:19:32Z

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 · 2019-06-04T06:39:30Z

0.59.8 still same issue..

Aung-Myint-Thein · 2019-06-13T04:02:56Z

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 · 2019-07-07T05:45:53Z

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?

Simarrajput12 · 2019-07-15T08:23:19Z

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

rahamin1 · 2019-07-15T10:22:27Z

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

nene · 2019-07-17T12:08:23Z

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 · 2019-10-13T19:32:58Z

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 · 2019-10-28T16:37:10Z

I found right way for Android.

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.

Use right source via uri for android:
<Image source={Platform.OS === 'android' ? {uri: "asset:/image.png"} : require('./image.png')} />

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 · 2020-01-13T12:27:05Z

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

jimallen · 2020-02-23T21:53:57Z

Also seeing this issue..

react-native-bot added Platform: Android Android applications. 🔶Components labels Sep 25, 2018

anjapadu changed the title ~~[ANDROID] Signed release do not show local assets images.~~ [0.57][ANDROID] Signed release do not show local assets images. Sep 25, 2018

vonovak mentioned this issue Oct 9, 2018

"<" back image not shown in release build react-navigation/react-navigation#5075

Closed

DaniAkash mentioned this issue Oct 30, 2018

No info about upgrading gradle version react-native-community/releases#59

Closed

DaniAkash mentioned this issue Nov 8, 2018

0.57 upgrade Added steps to upgrade gradle version react-native-community/releases#60

Merged

wawoon mentioned this issue Jan 15, 2019

Release build Android APK won't show local image assets expo/expo#3226

Closed

hramos removed the 🔶Components label Jan 24, 2019

react-native-bot added the Bug Report label Jan 26, 2019

hramos removed the Bug Report label Feb 6, 2019

cpojer mentioned this issue Mar 19, 2019

RN Issue Triage Group 4 #24031

Closed

ferrannp closed this as completed Mar 19, 2019

react-native-bot added the Bug label May 4, 2019

manbod mentioned this issue Jul 26, 2019

Viro360 image does not render until entering the portal when building the APK viromedia/virocore#299

Open

4 tasks

facebook locked as resolved and limited conversation to collaborators Mar 19, 2020

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 19, 2020

[0.57][ANDROID] Signed release do not show local assets images. #21309

[0.57][ANDROID] Signed release do not show local assets images. #21309

Comments

anjapadu commented Sep 25, 2018 • edited

Environment

Description

Reproducible Demo

arno-le commented Sep 26, 2018

anjapadu commented Sep 28, 2018

zkrige commented Oct 3, 2018

rcidt commented Oct 3, 2018

jfbaraky commented Oct 4, 2018 • edited

anjapadu commented Oct 6, 2018

shinriyo commented Oct 9, 2018

shinriyo commented Oct 9, 2018

shinriyo commented Oct 9, 2018

arno-le commented Oct 10, 2018 • edited

shinriyo commented Oct 11, 2018

shinriyo commented Oct 12, 2018 • edited

DaniAkash commented Oct 26, 2018

spotsadmin commented Oct 27, 2018 • edited

DaniAkash commented Oct 30, 2018

anjapadu commented Oct 30, 2018 • edited

ghost commented Nov 22, 2018

ghost commented Nov 28, 2018 • edited by ghost

spotsadmin commented Dec 8, 2018

GaneshSaiKumar commented Dec 18, 2018

keermanish commented Jan 27, 2019

el-lsan commented Feb 1, 2019 • edited

anjapadu commented Feb 1, 2019

ferrannp commented Mar 19, 2019

hariegnify commented Apr 23, 2019 • edited

romreed commented Apr 24, 2019

xempie commented May 11, 2019

jwesselink commented May 11, 2019

hariegnify commented May 11, 2019 • edited

Relax594 commented Jun 4, 2019

Aung-Myint-Thein commented Jun 13, 2019

rahamin1 commented Jul 7, 2019 • edited

Simarrajput12 commented Jul 15, 2019

rahamin1 commented Jul 15, 2019

nene commented Jul 17, 2019 • edited

kumarparth380 commented Oct 13, 2019

michael-harley commented Oct 28, 2019

yeeChenXie commented Jan 13, 2020

jimallen commented Feb 23, 2020

anjapadu commented Sep 25, 2018 •

edited

jfbaraky commented Oct 4, 2018 •

edited

arno-le commented Oct 10, 2018 •

edited

shinriyo commented Oct 12, 2018 •

edited

spotsadmin commented Oct 27, 2018 •

edited

anjapadu commented Oct 30, 2018 •

edited

ghost commented Nov 28, 2018 •

edited by ghost

el-lsan commented Feb 1, 2019 •

edited

hariegnify commented Apr 23, 2019 •

edited

hariegnify commented May 11, 2019 •

edited

rahamin1 commented Jul 7, 2019 •

edited

nene commented Jul 17, 2019 •

edited