5

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.

Improve this question

7 Answers 7

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

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

Improve this answer

Comments

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>
Improve this answer

14 Comments

Sorry I misspelled its https
@AliRaza Can you share the image path for the test?
I have added your solution to my file as well but its not working
I have hardcoded these values but it works fine on the ios but not on the android emulator its displays nothing
The problem is it's working fine on IOS but not on android.
|
0

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

Improve this answer

1 Comment

I tried that. does not work on android sim. works on ios sim. set width:100 height:100. i also tried resize mode cover/contain. no image shows.
0

It might be the Storage Permission.

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

-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

Improve this answer

1 Comment

still didnt help.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.