React Native Flexbox Image не заполняет ширину контейнера

У меня есть гибкий контейнер, который содержит 3 компонента, расположенных в стиле column-flex. Ожидаемое поведение будет заключаться в том, что эти 3 компонента будут занимать высоту в соответствии со своими стилями гибкости (что они и делают), и что они будут растягиваться, чтобы заполнить ширину своего контейнера (что и делают текстовые компоненты, но компонент изображения нет!). Почему компонент изображения не растягивается, чтобы заполнить ширину? Я что-то упускаю?

Стили:

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
  }
});

Состав:

<View style={styles.container}>
    <Image style={styles.profileImage} resizeMode={Image.resizeMode.stretch} source={profileImageSource}></Image>
    <Text style={styles.usernameText}>{this.props.person.username}</Text>
    <Text style={styles.detailText}>{this.props.person.age} - {this.props.person.gender} - {this.props.person.compat}% Pizza Rating</Text>
</View>

Результат: