title: React Native Flexbox Image won't fill width of container
body: <p>I've got a flexible container, which contains 3 components laid out in the column-flex style. The expected behavior would be that these 3 components would take up height according to their flex styles (which they do), and that they would stretch to fill the width of their container (which the text components do, but the <em>image component</em> does not!). How come the image component isn't stretching to fill the width? Am I missing something?</p>
  
  <p>Styles:</p>
  
  <pre><code>let styles = StyleSheet.create({
    container: {
      flex: 1,
      padding: 10,
      backgroundColor: 'white',
      borderRadius: 20,
      flexDirection: 'column'
    },
    profileImage: {
      flex: 3,
      backgroundColor: 'red',
      alignSelf: 'stretch'
    },
    usernameText: {
      fontSize: 24,
      fontWeight: 'bold',
      flex: 1,
      backgroundColor: 'red',
    },
    detailText: {
      fontSize: 14,
      color: 'gray',
      flex: 1
    }
  });
  </code></pre>
  
  <p>Structure:</p>
  
  <pre><code>&lt;View style={styles.container}&gt;
      &lt;Image style={styles.profileImage} resizeMode={Image.resizeMode.stretch} source={profileImageSource}&gt;&lt;/Image&gt;
      &lt;Text style={styles.usernameText}&gt;{this.props.person.username}&lt;/Text&gt;
      &lt;Text style={styles.detailText}&gt;{this.props.person.age} - {this.props.person.gender} - {this.props.person.compat}% Pizza Rating&lt;/Text&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>Result:</p>
  
  <p><a href="https://i.stack.imgur.com/SHTc9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SHTc9.png" alt="why won&#39;t the image stretch"></a></p>