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.
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.
<application
android:usesCleartextTraffic="true"> // you add this
...
</application>
you can solve this problem? I have the same problem and I fixed it by
cd android && ./gradlew cleanand run react-native start --reset-cache && react-native run-android
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',
}}
/>