Image not showing on device for React Native movies tutorial on existing application

Question

I'm currently doing the react native movies tutorial (https://facebook.github.io/react-native/docs/tutorial.html), and I am using a device to display the results. I used an existing project, put a view using storyboard, and subclassed it correctly. For some reason, the image is not being displayed, and a red box is being shown instead. Am I doing something wrong? My React 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 being displayed on my phone: enter image description here

Are you including the RCTNetwork subspec? – Yinfeng Jun 09 '15 at 01:56 — Yinfeng, Jun 09 '15 at 01:56

score 2 · Answer 1 · answered May 29 '17 at 00:31

2

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

answered May 29 '17 at 00:31

Robi

21
2

Changing http: to https: was all that I needed. – Eric Engel Jul 09 '17 at 20:43

score 0 · Answer 2 · edited May 23 '17 at 12:08

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 http://www.techrepublic.com/article/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 https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

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

With this commit they also changed the example so that they are using a https connection now which solves the issue: https://github.com/facebook/react-native/pull/367/commits/b00d4b394f590a3d8365d7a63cf5436c499483ec

score 0 · Answer 3 · answered Dec 14 '16 at 12:50

0

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

answered Dec 14 '16 at 12:50

Moriya

7,750
3
35
53

Image not showing on device for React Native movies tutorial on existing application

3 Answers3