Image Not Loading in React Tutorial

Question

Does anyone know why the image may not be loading? index.ios.js is below, rest of the code is simply generated from

react-native init TestApp

I am not sure if the opening and closing tags are wrong or what. The image appears to load when I put it into my browser.

    import React, { Component } from 'react';
var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

import {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class TestApp extends Component {
  render() {
    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>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

AppRegistry.registerComponent('TestApp', () => TestApp);

Answer 1

Add to your Info.plist

 <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict> 

Answer 2

The problem is that you are trying to load the image from a http connection and not from a https connection as recommended by apple.

You can fix it by editing info.plist as answered by Kawatare267

You can see more details here

Hope this helps.

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