CODEWITHSUNDEEP
javascriptreactjsreact-native
Ali Raza
Ali Raza

Reputation: 615

React Native: uri image not showing on android but displays on the iOS Simulator

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 Simulator 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.

Upvotes: 5

Views: 10413

Answers (7)

Asad Mehmood
Asad Mehmood

Reputation: 359

Some folks who are reaching here, this might work for them.

There might be an issue with prop you are providing:

For both Android and iOS to work the; prop should be "uri" For only iOS prop is "url". This will not load images on android, even it will not start network request.

Upvotes: 0

Daniel Danielecki
Daniel Danielecki

Reputation: 10570

I don't rely on the Android emulator regarding images from URL, especially if those are coming from APIs. Hardcoded URLs, 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 APIs, storing it on the phone in store logic/AsyncStorage I've noticed the real Android device shows way more pictures than the Android emulator. 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.

Upvotes: 3

hkniyi
hkniyi

Reputation: 353

It might be the Storage Permission.

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

Upvotes: 0

Shika
Shika

Reputation: 41

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

Upvotes: 2

Bala Vigness
Bala Vigness

Reputation: 457

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

Upvotes: 0

toto
toto

Reputation: 1

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

Upvotes: -1

hong developer
hong developer

Reputation: 13926

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>

Upvotes: 1

Related Questions