Full width image in react-native flexbox not stretching

Question

I have a 2-column grid of products and I'm trying to get the images to fill the width of it's container. With the current code, the image fills available height of imageWrapper. If I set a large height to imageWrapper, the the images stretch to fill the width, but this is not viable as images from different products have variable height.

  <TouchableOpacity style={styles.item} onPress={() => this.openProduct(item)}>
    <Text style={styles.boldLabel}>{item.name}</Text>
    <View style={styles.imageWrapper}>
        <Image style={styles.gridImage}
            resizeMode={'contain'}
           source={{uri: image }} />
    </View>
  </TouchableOpacity>

The css:

item: {
    flexDirection: 'column',
    width: Metrics.screenWidth / 2 - Metrics.doubleBaseMargin,
    justifyContent: 'center',
    margin: Metrics.baseMargin,
    backgroundColor: "#FFF",
},
imageWrapper: {
    flex:1,
    flexDirection:'row'
},
gridImage: {
    flex:1,
    height: null,
    width: null
}

Any help would be much appreciated. Thanks!

Answer 1

Try react-native-fit-image . (Not my module). It's the best to show images maintaining aspect ratio. Just make sure you have the flex properties setup properly for the container and the grids.