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

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

score 3 · Answer 1 · edited Jul 24 '23 at 21:53

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.

score 1 · Answer 2 · answered Oct 26 '22 at 07:44

1

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

answered Oct 26 '22 at 07:44

Shika

31
1

score 0 · Answer 3 · answered Jan 13 '22 at 07:31

0

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>

answered Jan 13 '22 at 07:31

hong developer

13,291
4
38
68

Sorry I misspelled its `https` – Ali Raza Jan 13 '22 at 07:34
@AliRaza Can you share the image path for the test? – hong developer Jan 13 '22 at 07:38
I have added your solution to my file as well but its not working – Ali Raza Jan 13 '22 at 07:39
https://digidrip-dev.s3.us-west-1.amazonaws.com/1641987422138-image.png – Ali Raza Jan 13 '22 at 07:40
It is working for me using the below code: `import React from 'react'; import {View, Image} from "react-native"; export default function App() { let image = 'https://digidrip-dev.s3.us-west-1.amazonaws.com/1641987422138-image.png' return( )}` – Sam Dani Jan 13 '22 at 08:15
1

I have hardcoded these values but it works fine on the ios but not on the android emulator its displays nothing – Ali Raza Jan 13 '22 at 10:10
@AliRaza threre no problem. here is example https://snack.expo.dev/U3npZ0Sj1H – hong developer Jan 13 '22 at 10:25
Ok, what should I do then? I have updated the .xml file but its not working. – Ali Raza Jan 13 '22 at 10:26
1

The problem is it's working fine on IOS but not on android. – Ali Raza Jan 13 '22 at 10:28
@AliRaza This question is completely different from the one you asked. End it and post a new one. – hong developer Jan 13 '22 at 10:28
My image component is in a `flatlist` – Ali Raza Jan 13 '22 at 10:28
@AliRaza Look at android on the link I shared. There's no problem at all. – hong developer Jan 13 '22 at 10:29
@AliRaza threre no problem. here is use flatlist example https://snack.expo.dev/x8d6rQV7U – hong developer Jan 13 '22 at 10:39
@aliRaza. i have the same problem. no idea, just misery loves company. I hard code url on with 100px width height. works fine on ios sim, fails on android sim. RN 0.66. – not_fubar_yet Aug 08 '22 at 22:07

score 0 · Answer 4 · answered Jun 04 '22 at 09:17

0

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

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

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

answered Jun 04 '22 at 09:17

toto

1
1

still didnt help. – not_fubar_yet Aug 08 '22 at 22:09

score 0 · Answer 5 · answered Jun 05 '22 at 10:52

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

answered Jun 05 '22 at 10:52

Bala Vigness

371
1
3
10

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. – not_fubar_yet Aug 08 '22 at 22:09

score 0 · Answer 6 · answered Nov 22 '22 at 00:27

0

It might be the Storage Permission.

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

answered Nov 22 '22 at 00:27

hkniyi

263
3
7

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

6 Answers6

Linked