title: Make image fit fullscreen on iphone x with React Native
body: <p>As the title says, i want my image to fit the whole screen on my Iphone X simulator. I have tested to set the imageContainer to "with: 100%" and also the container that holds everything, but it does not work. Happy with any suggestions.</p>
  
  <p>Image of the problem : 
  <a href="https://i.stack.imgur.com/JiVQu.jpg" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>Component:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { View, Text, ImageBackground, Image } from 'react-native'
  import { Avatar, Icon, Button, Tile } from 'react-native-elements'
  import { Actions } from 'react-native-router-flux'
  
  import styles from './ProfileInListModal.style'
  
  class ProfileInListModal extends Component {
  
    render (user) {
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.Imagecontainer}&gt;
            &lt;Image
              style={{height: '100%'}}
              source={{uri: this.props.user.data.profile_picture}} /&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.profileContent}&gt;
            &lt;Text style={styles.nameTextStyle}&gt;{this.props.user.data.name} {this.props.user.data.age}&lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.locationContainer}&gt;
            &lt;Icon name='place' type='place' color='#FFF' size={15} /&gt;
            &lt;Text style={styles.locationText}&gt; {this.props.user.data.position} &lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.descriptionTextContainer}&gt;
            &lt;Text style={styles.descriptionTextStyle}&gt; {this.props.user.data.descriptionText} &lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.socialIconContainer}&gt;
            &lt;Icon
              name='snapchat-ghost'
              type='font-awesome'
              color='white'
              onPress={() =&gt; console.log('hello')}
              iconStyle={styles.socialIcons}
              /&gt;
  
            &lt;Icon
              name='facebook'
              type='font-awesome'
              color='white'
              onPress={() =&gt; console.log('hello')}
              iconStyle={styles.socialIcons}
              /&gt;
  
            &lt;Icon
              name='instagram'
              type='font-awesome'
              color='white'
              onPress={() =&gt; console.log('hello')}
              iconStyle={styles.socialIcons}
              /&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.buttonContainer}&gt;
            &lt;Button
              icon={&lt;Icon name='message-plus' type='material-community' size={20} color='white' /&gt;}
              title='Send a message'
              titleStyle={{ fontFamily: 'GeosansLight' }}
              onPress={this.startchat.bind(this)}
              buttonStyle={styles.buttonStyle} /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
  
      )
    }
  }
  
  export default ProfileInListModal
  </code></pre>
  
  <p>Style : </p>
  
  <pre><code>const styles = {
    container: {
      height: '100%',
      marginBottom: 38,
    },
    Imagecontainer: {
      height: 370
    },
    profileContent: {
      flexDirection: 'column',
      width: '35%',
      marginTop: 30
    },
    nameTextStyle: {
      color: 'white',
      fontSize: 25,
      fontFamily: 'GeosansLight'
    },
    locationContainer: {
      flexDirection: 'row',
      marginTop: 10
    },
    locationText: {
      color: 'white',
      fontSize: 15,
      fontFamily: 'GeosansLight'
    },
    descriptionTextContainer: {
      justifyContent: 'center',
      alignItems: 'center',
      padding: 30
    },
    descriptionTextStyle: {
      color: 'white',
      fontSize: 20,
      fontFamily: 'GeosansLight',
      textAlign: 'center'
    },
    socialIconContainer: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      padding: 10,
      marginBottom: 25
    },
    socialIcons: {
      padding: 8
    },
    buttonContainer: {
      justifyContent: 'center',
      alignItems: 'center'
    },
    buttonStyle: {
      backgroundColor: '#D1AF46',
      width: 300,
      height: 45,
      borderColor: 'transparent',
      borderWidth: 0,
      borderRadius: 5
    }
  }
  
  export default styles
  </code></pre>