CODEWITHSUNDEEP
javascriptreact-native
csakon
csakon

Reputation: 611

Unable to display image with React Native with uri

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>
    );
  }
});

Upvotes: 12

Views: 17782

Answers (4)

boredgames
boredgames

Reputation: 11600

Try giving the image component a height and width value.

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

Upvotes: 34

Dulanga Heshan
Dulanga Heshan

Reputation: 1425

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

Upvotes: 1

Kristina Darroch
Kristina Darroch

Reputation: 171

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>

Upvotes: 1

ArtixZ
ArtixZ

Reputation: 387

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

This style will make image flexible and cover the whole container

Upvotes: 1

Related Questions