[Android] Images are not showing using local assets or remote image.

React Native version: React Native Environment Info: System: OS: Windows 10 CPU: (8) x64 Intel® Core™ 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>
....

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.

[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…

[eltongonc]

I had the same issue and in my case, the solution was to give the image a default styling and resize mode.

 <Image resizeMode="cover" style={styles.image} />


const styles = Stylesheet.create({
  image: {
     width: '100%',
     height: '100%'
  }
})