React Native Android: Static Image is not showing in production released apk

Question

I have static image in my react-native app accessing via

  <Image source={require("../assets/[email protected]")} />

in development it is showing well but in production release APK is not showing what can be the reason? I have followed steps mention here.

https://facebook.github.io/react-native/docs/signed-apk-android.html

Siena

try to assign your image source to a global var like var _logo = require(...) and try again.source ={_logo} Even if it does not work you will have a better implementation. – Whish

Alright need to focus on solution. any other suggestion – Siena

You don't need the @2x in the url. Just do require("../assets/preview-full-img-title-logo.png") But not sure if thats is related to your issue though. Worth a try :) – Spickandspan

Not only this image but every image that i am using in the app, is no getting load in production, just static image not dynamic – Siena

i've encountered a similar issue and came finally up to assign "width" and "height" properties within the <Image>-Tag and also in the style-sheet. Without this no image was drawn in production-apk on some devices (not all) – Proterozoic

@itinancei have checked it by giving inline style as well as in styles like this <Image source={require("../assets/tick-mark.png")} style={[styles.addIcon],{height:45,width:45}}/> but it is not working – Siena

Is is something about putting images into the src folder. do i need to put image android/src/main/assets. – Siena

@Spickandspan i am still unable to resolve – Siena

Build a tiny app that shows the problem, and then publish it on github or bitbucket. Without a larger set of code, its difficult to debug this problem. – Spickandspan

Are you using data binding in your app? – Obliterate

you mean bind(this) or two way binding. i am using both the way that react applied – Siena

Answer 1

This is the command that did it for me:

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/

take a look at github issue>

Siena

it gives me error: option '--bundle-output' missing – Vasodilator

deleting both "\" works form me : 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/ – Vasodilator

Version 61.5. This command creates folder and copy images. But once I close the terminal (and disconnect the cable) and I run the app again the images are not visible anymore. I use <Image source="./assets/image.png" /> ... Ideas? – Croesus

can you please check the link in your answer again. is it correct? – Wispy

github.com/facebook/react-native/issues/9451 – Wispy

Answer 2

I'm using react-native v0.59.9 with shrinkResources true configuration. It makes react-native could not find the assets.

Make sure you do not set shrinkResources on android build.gradle unless the new version of react-native support it later on.

Underfur

Answer 3

I'm using RN 0.61.2

As stated by @made-in-moon here this worked for me:

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/

Orthohydrogen

I'm using 61.5 and this command creates in res few folders with inside the images that I use in the app. If I run the app: "npx react-native run-android" with the cable connected the images are visible. Once I disconnect the cable and reopen the app on my phone, the images are not visible. – Croesus

@Croesus I'm not aware of this issue TBH. On my device, the images are showing perfectly. Try uninstalling & making a fresh install. Let us know what worked. – Orthohydrogen

Answer 4

Verify whether images are in ../res folder or not ${project}/android/app/src/res. If not then you need to copy images in that folder. That can be done using following react command

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/

Ideally, this happens in Android when images sizes are larger. Another way to avoid such issues at runtime is to optimize image sizes.

Onanism

Answer 5

For iOS 14 one can also upgrade to the latest version of react-native 0.63.3

Peroxide

Answer 6

Check the name of the image file or try renaming.In my case, it was the name of the image. I renamed(removed '-' character) the image and it worked.

Imaimage