React Native: uri image not showing on android but perfectly displays on the ios emulator

Question

I am working on a react-native app. I am fetching some images from an API and displaying them as a flat-list. The problem is that these images show perfectly on the ios emulator but do not display on the android emulator. I have set the widths and heights to the images but the issue remains the same.
Here is the code below
Component

 <Image
          style={styles.image}
          source={{
            uri: image,
          }}
          resizeMode="contain"
        />

Styles

container__image: {
    width: '100%',
  },
  image: {
    width: '100%',
    height: 200,
    resizeMode: 'contain',
  },

The image in front of the uri is a prop that contains the http address of the image.

Answer 1

Perhaps it seems to be a problem that arises because Android does not allow http .

Please build a new Android after changing Android settings as follows.

• android/app/src/main/AndroidManifest.xml

<application
        android:usesCleartextTraffic="true"> // you add this
...
</application>

Answer 2

you can solve this problem? I have the same problem and I fixed it by

1. close android simulator
2. cd android &&./gradlew clean
3. wipe data in android studio device manager

and run react-native start --reset-cache && react-native run-android

Answer 3

Try giving direct link in the uri within quotes (single or double).This might work in android and your resizemode will also have to come inside the styles.

 <Image style={styles.image} source={{ uri: 'https://reactnative.dev/img/tiny_logo.png', }} />

Answer 4

I don't rely on the Android simulator regarding images from URL, especially if those are coming from API's. Hardcoded URL's, in general, are working fine.

However, I've noticed the iOS simulator regarding that aspect gives similar results to an iPhone . It's not the case for Android . While fetching images from API's, storing it on the phone in store logic/ AsyncStorage I've noticed the real Android device shows way more pictures than the Android simulator. It took me such a long time to find out why images do not work on Android, but work on iOS with lots of topics on Stack Overflow. Apparently, they did work, but on real device... Yes, during debugging I've checked http & https . Those images were served over https . I've had also width and height set.

A bit frustrating, but I'm quite curious if there are more folks experienced that issue.

Answer 5

I had the same problem, but when I quit the app in the emulator and reopened it, it was fine, although it's not the best solution, I guess

Answer 6

It might be the Storage Permission .

Check the app details on the phone and give storage permission to the app