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!

http://stackoverflow.com/questions/29322973/whats-the-best-way-to-add-a-full-screen-background-image-in-react-native — boredgames, Aug 27 '15 at 01:55

score 1 · Accepted Answer · answered Aug 26 '15 at 23:15

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

answered Aug 26 '15 at 23:15

Yair

182
2
10

Cheers dude. Also needed to add `alignItems: 'center'` to the container to make it work completely – Ollie Jennings Aug 27 '15 at 19:49
1

Yup, glad to hear it worked for you. It seems like the answer in the question boredgames linked to is out of date. Not surprising given how rapidly the React Native API is changing. – Yair Aug 27 '15 at 21:23

React-Native FullScreen Backaground Image

1 Answers1