9

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

  <Image source={require("../assets/preview-full-img-title-logo@2x.png")} />

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
Waleed Arshad
  • 1,081
  • 3
  • 12
  • 24
  • 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. – Burak Karasoy Aug 14 '16 at 14:10
  • Alright need to focus on solution. any other suggestion – Waleed Arshad Aug 14 '16 at 16:44
  • 1
    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 :) – hasseio Aug 15 '16 at 09:44
  • 1
    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 – Waleed Arshad Aug 15 '16 at 10:09
  • i've encountered a similar issue and came finally up to assign "width" and "height" properties within the -Tag and also in the style-sheet. Without this no image was drawn in production-apk on some devices (not all) – itinance Aug 15 '16 at 11:07
  • @itinancei have checked it by giving inline style as well as in styles like this but it is not working – Waleed Arshad Aug 23 '16 at 10:52
  • Is is something about putting images into the src folder. do i need to put image android/src/main/assets. – Waleed Arshad Aug 23 '16 at 10:56
  • @hasseio i am still unable to resolve – Waleed Arshad Aug 24 '16 at 10:48
  • 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. – hasseio Aug 25 '16 at 01:46
  • Are you using data binding in your app? – sooper Sep 21 '16 at 09:26
  • you mean bind(this) or two way binding. i am using both the way that react applied – Waleed Arshad Sep 25 '16 at 06:36

6 Answers6

7

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>

Norfeldt
  • 8,272
  • 23
  • 96
  • 152
Waleed Arshad
  • 94
  • 2
  • 2
    it gives me `error: option '--bundle-output' missing` – Made in Moon Sep 16 '17 at 13:05
  • 8
    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/` – Made in Moon Sep 16 '17 at 13:12
  • 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 ... Ideas? – mtoninelli May 30 '20 at 11:55
  • can you please check the link in your answer again. is it correct? – Dami Jan 14 '21 at 07:58
  • https://github.com/facebook/react-native/issues/9451 – Dami Jan 14 '21 at 07:59
4

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.

surga
  • 1,436
  • 21
  • 25
2

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/

Aqeeb Imtiaz Harun
  • 157
  • 2
  • 10
  • 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. – mtoninelli May 30 '20 at 11:50
  • @mtoninelli 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. – Aqeeb Imtiaz Harun May 11 '21 at 07:05
1

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.

Michael Harley
  • 831
  • 1
  • 9
  • 20
Pawan Maheshwari
  • 15,088
  • 1
  • 48
  • 50
0

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

Justin.Mathew
  • 413
  • 5
  • 12
0

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.

Akhilesh Sinha
  • 861
  • 12
  • 20