0

I am trying to stretch a background-image to full screen.
Images seem to behave differently when fetched from Network and from Local storage.

This function does not stretch the image as requested (there is a white margin of around 70 pixels from the right): This is my render() fundtion:

  var BackgroundImage = require('./images/logo_og.png');

  render(){
    return(
      <View style={[{flex: 1, alignItems: 'stretch'}]}>
      <Image source={BackgroundImage} style={[{flex: 1}]} >
      </Image>
    </View>
  );

The same render function works well displaying the image being fetched from the network:

  render(){
    return(
      <View style={[{flex: 1, alignItems: 'stretch'}]}>
      <Image source={{uri:'https://facebook.github.io/react/img/logo_og.png'}} style={[{flex: 1}]} >
      </Image>
    </View>
  );

any idea what is going on?

Ted
  • 3,805
  • 14
  • 56
  • 98

1 Answers1

1

Similar issue was reported here. Try setting the Image's width to null:

<Image source={BackgroundImage} style={[{flex: 1, width: null}]} >
max23_
  • 6,531
  • 4
  • 22
  • 36