React-Native FullScreen Backaground Image

Question

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):

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

Answer 1

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} />