Image that doesn’t appear on the device for the “Respond to native films” tutorial in an existing application

Question

I am currently working on a native movie tutorial ( https://facebook.imtqy.com/react-native/docs/tutorial.html ) and I am using the device to display the results. I used an existing project, staged a view using a storyboard, and correctly subclassed it. For some reason, the image is not displayed, and a red box is displayed instead. Am I doing something wrong? My reagent code:

'use strict'; var React = require('react-native'); var { AppRegistry, Image, StyleSheet, Text, View, } = React; var MOCKED_MOVIES_DATA = [ {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}, ]; var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, thumbnail: { width: 53, height: 81, }, }); var Movies = React.createClass({ render: function() { var movie = MOCKED_MOVIES_DATA[0]; return ( <View style={styles.container}> <Text>{movie.title}</Text> <Text>{movie.year}</Text> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> </View> ); } }); React.AppRegistry.registerComponent('Movies', () => Movies); 

This is a screenshot of what is displayed on my phone:

Answer 1

Just write https instead of http and it will work. But it will only work if the server accepts https. Otherwise, modify the info.plist file.

Answer 2

The problem is that you are trying to download an image from an http connection, not from an https connection, as Apple requires. Try it if your code works with a different uri that uses https instead of http. On Android, it should work well with http or https. Read more at https://github.com/facebook/react-native/issues/8520 and http://www.techrepublic.com/article/wwdc-2016-apple-to-require-https-encryption-on-all- ios-apps-by-2017 / .

If you really want to download something via http, you can edit the info.plist file and add your exception. More information here https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

See also my stackoverflow question here: React-native loading an image on top of https works while http doesn't work

With this fixer, they also changed the example to now use an https connection that solves the problem: https://github.com/facebook/react-native/pull/367/commits/b00d4b394f590a3d8365d7a63cf5436c499483ec p>

Answer 3

I had the same problem and it was solved by adding RCTImage to my podspec.