2

I am using <Image> and <ImageBackground> with source:{{ uri: url }} inside my React Native project.

But the problem is an image is not showing inside Android simulator (But IOS simulator is fine)

This is my component

import React from 'react'
import {
  Text, StyleSheet, ImageBackground, Image,
} from 'react-native'

import { Header } from 'react-navigation'
import { dimens } from '../../../services/variables'

const CustomHeader = ({ bgSrc }) => (
  <ImageBackground
    source={
        bgSrc
          ? { uri: bgSrc }
          : require('../../../assets/images/placeholder_image_bg_wide.png')
      }
    style={styles.header}
  >
    <Text style={styles.description}>First element</Text>
    <Image source={{ uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg' }} style={{ width: 200, height: 45, backgroundColor: 'red' }} />
    <Text style={styles.description}>Second element</Text>
    <Image source={{ uri: 'http://i.vimeocdn.com/portrait/58832_300x300.jpg' }} style={{ width: 200, height: 45 }} />
    <Text style={styles.title}>Last element 1</Text>
  </ImageBackground>
)

export default CustomHeader

const styles = StyleSheet.create({
  header: {
    minHeight: Header.HEIGHT,
    height: dimens.header.height,
    marginTop: dimens.header.marginTop,
    paddingLeft: dimens.header.paddingLeft,
    paddingBottom: dimens.header.paddingBottom,
    backgroundColor: 'blue',
    flexDirection: 'column-reverse',
  },
  title: {
    ...dimens.header.title,
  },
  description: {
    ...dimens.header.description,
  },
})

I also already added permissions inside AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

This is the image of my both simulators enter image description here

You will see that on IOS simulator <Image> is showing correctly but not on Android none images were show (Both http and https)

So how can i fix these and make Android simulator works, Thanks!

Varis Darasirikul
  • 3,299
  • 8
  • 33
  • 67
  • it may help https://stackoverflow.com/questions/56012702/react-native-cant-show-remote-images-in-release-mode-on-android-device?noredirect=1#comment98671245_56012702 – Amas May 12 '19 at 19:30
  • 1
    According to screenshot, i think internet is not working in your android emulator... – Ankit Makwana May 13 '19 at 05:18
  • Probably @AnkitMakwana has right. You can also try to rebuild android project and try to run it again. Also rerun android emulator. – mmmatey May 13 '19 at 06:02
  • @AnkitMakwana right the internet is not working in my android simulator, Thanks! – Varis Darasirikul May 13 '19 at 07:47

2 Answers2

0

I have said this before in another question https://stackoverflow.com/a/71263771/8826164 but there is an issue with Image component is that if first time initialize the component with source={{uri : 'some link'}} it may not work (at least not for me when I fetch image from HTTPS URL from Firebase storage). The trick is you have to trigger a change to source props like first you need to keep source to source={undefined} and then change to source={{uri : 'some link'}}. And it seems like you have hard-coded URL for uri, so you might fall into the same issue as I did

Nishain de Silva
  • 41
  • 1
  • 3
0

Before : <Image source={{ url: http://stitch2stitch.azurewebsites.net/assets/img/FileFormats/${result}.png}} style={{ height: 40, width: 40, }} />

After : <Image source={{uri: http://stitch2stitch.azurewebsites.net/assets/img/FileFormats/${result}.png}} style={{ height: 40, width: 40, }} />

just change from url to uri works for me

Muhammad Mukthayar
  • 1
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 20 '22 at 04:13