Can't show Image by URI in React Native iOS Simulator

Question

I'm using react-native 0.28.0

I'm trying to show an image on iPhone simulator according to this tutorial:

Introduction to React Native: Building iOS Apps with JavaScript | Appcoda

var styles = StyleSheet.create({
image: {
    width: 107,
    height: 165,
    padding: 10
  }
}

var imageURI = 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'

Then in the render() function, I add this:

<Image style={styles.image} source={{uri:imageURI}} />

The space allocated for the image is there, but the image is not shown.

---

However, if I use local image instead, the image will be shown.

var Picture = require('./content.jpeg')

In render() function:

<Image source={Picture} style={styles.thumbnail} />

How can I show picture using URI as source?

Answer 1

The problem is that your are trying to load the image from a http connection and not from a https connection as it is demanded by Apple.

Try if your code works with another uri which uses https instead of http. In Android it should work fine with either http or https.

Read more at https://github.com/facebook/react-native/issues/8520 and WWDC 2016: Apple to require HTTPS encryption on all iOS apps by 2017.

If you really want to load something over http you can edit the info.plist file and add your exception there. More detailed info here: Configuring App Transport Security Exceptions in iOS 9 and OSX 10.11.

See also my StackOverflow question here: React-native loading image over https works while http does not work.