CODEWITHSUNDEEP
reactjsflexboxreact-native
Fozzle
Fozzle

Reputation: 593

React Native Flexbox Image won't fill width of container

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 image component does not!). How come the image component isn't stretching to fill the width? Am I missing something?

Styles:

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

Structure:

<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>

Result:

why won't the image stretch

Upvotes: 2

Views: 3216

Answers (1)

wintvelt
wintvelt

Reputation: 14101

Have you tried adding

alignItems: 'stretch'

to the container style? (in theory, alignSelf with profileImage should do the same, but react-native flexbox is not an exact copy of flexbox behavior).

Upvotes: 1

Related Questions