How can I get the image width to fill the card and the height to be flexible?

Question

I'm trying to set the dimensions of the image so that the width will always take up the full width of the card (minus the horizontal margin) and with a flexible height, so that it can scale as it needs to.

How can I do this? It seems that the style needs a height, it won't accept null.

I have tried a LOT of combinations using various resizeModes, heights, widths etc.

Here is the component:

And here is my current code:

 renderImage(image) {
    const { width, height } = Dimensions.get('window');

    if (image) {
      return (
        <View style={styles.imageContainer}>
          <Image
            style={{ width, resizeMode: 'contain', height: 300 }}
            source={{ uri: image }}
          />
        </View>
      );
    }
  }

Answer 1

The aspectRatio property solves this problem nicely.

<Image
  style={{ width: '100%', aspectRatio: 1 }}
  source={{uri: 'https://online.picture/dynamic_size'}}/>