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

user_14676682 0
Viewed 1183

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.

react-native reactjs javascript
4 Answers

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.

user_111273830

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>
user_112120740

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

user_130495380

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',
          }}
        />

user_185758690
Related