Unable to display image with React Native with uri

Question

I'm tinkering with React Native and am trying to simply display an image with the image library from a URL. When I run this, all that is shown is the 'React Native' text, but no image. What am I doing wrong?

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Image,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          React Native
        </Text>
        <Image 
          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
        />
      </View>
    );
  }
});

Answer 1

Try giving the image component a height and width value.

<Image style= {{ height:50, width: 50 }} >

Answer 2

flex: 1,
width: null,
height: null,
resizeMode: 'cover',

This style will make image flexible and cover the whole container

Answer 3

In iOS you are unable to receive http requests, only https. Try adding this to your info.plist file in xcode (make sure it is in this order exactly):

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>example.com</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSIncludesSubdomains</key>
            <true/>
        </dict>
    </dict>
</dict>

Answer 4

when we use an image in react-native the image will not expand to fill the space available to it by default instead we have to add style rule that how big the image should be.if your not add style for image with height and width you cant appear the image