Image.resizeMode.contain creates empty space above element

Question

I'm trying React native on android, But when making a full-screen background with Image.resizeMode.contain React native creates an empty space above my element.

The code:

render: function() {
  return (
    <View style={Styles.restaurant_container}>
      <Image
        style={Styles.backdrop}
        resizeMode={Image.resizeMode.contain}
        source={require('image!login_background')}>
          <View style={Styles.backdropView}>
            <Text style={Styles.headline}>Headline</Text>
          </View>
      </Image>
    </View>
  );
}

with style:

var Styles = StyleSheet.create({
  restaurant_container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#000000',
  },
  backdrop: {
    flex: 1,
    paddingTop: 60
  },
  backdropView: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0)',
    alignItems: 'center'
  },
  headline: {
    fontSize: 20,
    textAlign: 'center',
    backgroundColor: 'rgba(240,240,240,0.7)',
    color: 'Black'
  }
})

results in:

Rremoving the view inside the doesn't seem to fix this. when removing the resizeMode.contain rule and/or using cover or stretch the picture in the background gets scaled to actual size, it's ignoring the size.

Answer 1

The main problem is that resizeMode = "contain" does not decrease the height of the image and centers it within its original size. One solution is to set the height and width of the image and remove the resizeMode. So you code will be:

render: function() {
  return (
    <View style={Styles.restaurant_container}>
      <Image
        style={Styles.backdrop}
        source={require('image!login_background')}>
          <View style={Styles.backdropView}>
            <Text style={Styles.headline}>Headline</Text>
          </View>
      </Image>
    </View>
  );
}

And your style will be like:

var Styles = StyleSheet.create({
  backdrop: {
    flex: 1,
    paddingTop: 60,
    width: null,
    height: 400

  },
})

In height you set the desired size.