title: ReactNative: How to make background image fill up the portion that it should cover by flexbox
body: <p>I've been trying to get an image to fill up the space it should fill with flex. However, it only fills up to a certain portion of the space. The structure is as follows:</p>
  
  <ul>
  <li>mainWrapper
  
  <ul>
  <li>navBarWrapper</li>
  <li>image</li>
  <li>buttonWrapper</li>
  </ul></li>
  </ul>
  
  <p>mainWrapper is a View with flex: 1 so it covers the entire page.
  navBarWrapper has a flex: 1
  image has a flex: 7 and backgroundColor: 'pink' to see where it ends
  buttonWrapper has a flex: 2.5 and backgroundColor: 'lightgrey' to see where it ends</p>
  
  <p>In the screenshot, the image itself doesn't fill up the pink space entirely.</p>
  
  <p><a href="https://i.stack.imgur.com/y1FLl.png" rel="nofollow noreferrer">Screenshot</a></p>
  
  <p>My simplified code is here:</p>
  
  <pre><code>  &lt;View style={styles.mainWrapper}&gt;
      &lt;View style={styles.navBarWrapper}&gt;
        &lt;NavigationBar
          statusBar={this.statusBarConfig()}
          leftButton={this.leftButtonConfig()}
          title={this.titleConfig()}
          style={styles.navBar}&gt;
        &lt;/NavigationBar&gt;
      &lt;/View&gt;
  
      &lt;View style={styles.imageWrapper}&gt;
        &lt;Image source={require('../assets/images/user_screen/user_screen_background.png')} style={styles.image}&gt;
        &lt;/Image&gt;
      &lt;/View&gt;
  
      &lt;View style={styles.buttonWrapper}&gt;
      &lt;/View&gt;
  
    &lt;/View&gt;
  </code></pre>
  
  <p>And the stylesheet</p>
  
  <pre><code>mainWrapper:{
   flex: 1,
   flexDirection: 'column',
   justifyContent: 'flex-start',
   backgroundColor: 'white'
  },
  navBarWrapper:{
   flex: 1,
  },
  navBar:{
   flexDirection: 'row',
   alignItems: 'center',
   backgroundColor: "#1ca99e",
  },
  imageWrapper:{
   flex: 7,
   flexDirection: 'column',
   backgroundColor: 'pink',
  },
  image:{
   flex:1 ,
   height: null,
   width: null,
   resizeMode: 'cover'
  },
  buttonWrapper:{
   flex: 2.5,
   flexDirection: 'row',
   backgroundColor: 'lightgrey'
  }
  </code></pre>