React-native: [Android] Images are not showing using local assets or remote image.

[abhagsain]

React Native version:
React Native Environment Info:
System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
Memory: 7.54 GB / 15.85 GB
Binaries:
Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338

Steps To Reproduce

Here's the code
Poster.js

const Poster = ({ imageURL }) => {
  const { width } = Dimensions.get("window");
  console.log(imageURL);
  return (
    <View style={{ padding: 5 }}>
      <Image
        source={imageURL}
        style={{
          width: Math.floor(width / 2 - 30),
          height: 300,
          flex: 1,
          borderRadius: 10,
        }}
      />
    </View>
  );
};

It's being called from here.
MovieGrid.js

....
     <View style={movieGrid}>
          <Poster imageURL={require("../images/image.jpg")} />
          <Poster imageURL={require("../images/1.jpg")} />
          <Poster imageURL={require("../images/2.jpg")} />
        </View>
      </View>
....

1.
When I run the same app in the browser using Expo it works fine but when I run it on an emulator or a physical device it doesn't show the images.
In the Web Browser

On Emulator

Also require('../images/image.jpg') returns a number

Working with images is such a pain 😥
Thank you for your time.

[karltaylor]

I currently have this issue too. My images appear fine on a fresh react-native init app when running on android in debug and release mode.

However in my current application, images and assets appear fine in debug but do not appear in release.

  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
      Memory: 1.28 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.2.1 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.8.3 => 16.8.6
      react-native: ^0.59.8 => 0.59.9
    npmGlobalPackages:
      react-native-cli: 2.0.1

[rochapablo]

I'm having quite the same here. On emulator works but on real device there's no image (android only).

return (<Image style={styles.image} resizeMode={'contain'} source={require('../../assets/images/logo.png')} />);

[UPDATE]

I didn't test, but is it possible this issue because I'm uploading the build Android App Bundle (.aab) instead APK?

[UPDATE]

Now it's working.

For some reason I used to get an error about my assets, that was duplicated or something. So I start to run

cd android/app/src/main/res/ && rm -rf drawable-*/src_assets_images_*.png drawable-*/node_modules_*.png

every time before build a new version, but I didn't notice that src_assets_images_*.png was my images, I just though that was junk files.

So this time, I build with those drawable files and all good. Build success and all images showing up.

"react": "16.8.3",
"react-native": "0.59.5",

[karltaylor]

Might not be related, but in my release build configs, I had minify and Shrink Resources, which made all files turn black:

```gradle
buildTypes {
release {
singingConfig signingConfigs.release

// commenting out below because they break assets on android release

// minifyEnabled true
// shrinkResources true

}
}

[rochapablo]

Crazy!

I'm in another project right now, with a different RN version, but the images are called in the same way.

Turns out when I had to build a new version I got the error about duplicate drawable images, so I thought "I'll delete them and my build will not show my images". But no, it is all working.

"react": "16.8.3",
"react-native": "0.59.9",

[srivatsav]

Looks like shrinkResources true is messing up with assets. However, minifyEnabled can still be true. Keeping that true and building a release apk didn't affect my assets. Any step to skip the assets when shrinkResources is enabled ??

buildTypes {
  release {
    singingConfig signingConfigs.release

    // commenting out below because they break assets on android release

    minifyEnabled true
    // shrinkResources true
  }
}

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[rochapablo]

It still need attention.

[wincod75]

Same thing, none of my emulators are showing images, regardless if they are local or remote. All of my images in both dev and prod are sent via HTTPS. They are not showing in my debug APKs or my release APKs. I have tried various Android emulators: 7, 8 and 9. iOS is working just fine, as usual.

"react": "16.6.3",
"react-native": "0.59.10"

Update

After running Android Studio and reviewing the logcat output I discovered a warning:
"Dependency ':native-imagetranscoder'"

This lead me to: https://github.com/facebook/fresco

And in my android/app/build.gradle file I added...

This: "implementation 'com.facebook.fresco:fresco:2.0.0'"

If you are using GIF's you will also need need...

This: "implementation 'com.facebook.fresco:animated-gif:2.0.0'"

And just like that my images are back...

[marcelschulze]

I had something similar, until I found out, that I had "url" instead of
"uri" as the source object passed to the image. It was working fine on ios,
so I didn't even think about it. Hope that helps somebody else!

[yusufbadurohman]

@wincod75 works for me, thanks 👍

[DavidAPears]

I am having something similar, ReactNative/Expo - both images and some line graphs rendering perfectly in iOS but not showing in Android. There are no error messages.

[I have tried adding resizeMode={'contain'} as suggested elsewhere]

iOS:

Android:

[DavidAPears]

FYI: I down-graded my react-native-svg package from '10.0.0' to "react-native-svg": "9.5.3" & that seemed to clear it. Images coming through now. I _know_ this is slightly diff from other situations on here, but this may help someone 🤟🏻

[choudharyjji]

Facing Same problem.. Images showing in emulator but not after assemblerelease. Any Help :(

[AyoubXwire]

I had the same problem, found out that internet was not working on my Android device.. I restarted the device and the image showed up normally.. I hope that helps someone along the way.

[jasonbodily]

Same problem here, although I find that if I put the app in the background and then re-open it, the images show. Anyone else find that?

[fourstring]

Same thing, none of my emulators are showing images, regardless if they are local or remote. All of my images in both dev and prod are sent via HTTPS. They are not showing in my debug APKs or my release APKs. I have tried various Android emulators: 7, 8 and 9. iOS is working just fine, as usual.

"react": "16.6.3",
"react-native": "0.59.10"

Update

After running Android Studio and reviewing the logcat output I discovered a warning:
"Dependency ':native-imagetranscoder'"

This lead me to: https://github.com/facebook/fresco

And in my android/app/build.gradle file I added...

This: "implementation 'com.facebook.fresco:fresco:2.0.0'"

If you are using GIF's you will also need need...

This: "implementation 'com.facebook.fresco:animated-gif:2.0.0'"

And just like that my images are back...

Thanks a lot. It works for me. Maybe project template should be updated to include that dependency by default, at least in typescript one there is no such dependency.

[kisakyegordon]

In my case - the images were showing in IOS but not on Android.

• I later realised, i had applied the elevator which hid the image on android

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.