12

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

4 Answers 4

34

Try giving the image component a height and width value.

<Image style= {{ height:50, width: 50 }} >
5
  • 3
    Unfortunately, that doesn't do anything for me. Thanks for the suggestion.
    – csakon
    May 7, 2015 at 13:38
  • OK, I think this did work after all. I accidentally destroyed my app when trying to rename it and started over. In the new app, adding the h and w was the difference between this working and not.
    – csakon
    May 7, 2015 at 15:00
  • 1
    it also need to be served over https from iOS 8 or add an exception: ste.vn/2015/06/10/… Oct 17, 2016 at 23:15
  • Is there another approach without using height and width as I want the image to be displayed in full screen?
    – SoundStage
    Aug 8, 2017 at 12:07
  • Raj, you could use the Dimensions, Get the window width and assign it to the image width variable, height can be anything you choose. Dimensions.get('window'); Nov 18, 2017 at 6:46
1
flex: 1,
width: null,
height: null,
resizeMode: 'cover',

This style will make image flexible and cover the whole container

1

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>

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.