CODEWITHSUNDEEP
javascriptioscssiphonereact-native
Ollie Jennings
Ollie Jennings

Reputation: 92

React-Native FullScreen Backaground Image

So, l have been trying for about 4 days, but l just can't seem to get an image to behave like it should in flexbox, especially with the cover resizeMode.

My code is:

var Creator = React.createClass({
  render: function() {
  return (
    <View style={ styles.container }>
      <Image source={ require('image!createBg') } style={ styles.image }></Image>
    </View>
  );
 }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    resizeMode: 'cover'
  }
});

and outputs with the following (the image is massively stretched instead of being 100% width):

flexbox not working

Any help would be appreciated, just can't see why its not working!

Upvotes: 0

Views: 1199

Answers (1)

Yair
Yair

Reputation: 192

resizeMode is a separate prop for the Image component, it has no effect inside the style prop. It also expects an enum from the Image component. So you should be using it like so:

<Image
 source={require('image!createBg')}
 style={styles.image}
 resizeMode={Image.resizeMode.contain} />

Upvotes: 1

Related Questions