I'm using react native expo to display images of various subjects. The images I'm using have a variety of widths, heights and aspect ratios. The images themselves come from google firebase storage and are retrieved from the currently selected subjects JSON data which contains the firebase storage Image URL.

Some subjects have no images at all, which is fine however I want the content below to therefore move up, so a fixed size/aspect ratio image or view in this case is not appropriate. And as I said Images are of various heights and widths (some landscape / some portrait.

Currently the styling for the image I'm attempting is like so:

   Image: {
      height: null,
      width: "90%",
      alignSelf: 'center',
      resizeMode: 'contain'
   },

Currently with the height set to null the image is not shown at all, and the content below sits above.

The width I want fixed at 90% of the screen's width which it currently is doing, however I'm having issues with the height. I've tried setting the height at 'undefined' and also percentages '40%' etc however this is not appropriate for the subjects missing images.

Another way I have tried is placing the image inside a view like so:

      <View style={styles.ImageContainer}>
          <Image style={styles.Image} source={{ url: subject.ImageUrl }}/>
      </View>
...
// Styling:
   Image: {
      height: null,
      width: "100%", // 100% of the image container which is 90% of screen.
      alignSelf: 'center',
      resizeMode: 'contain'
   },
   ImageContainer: {
      width: '90%',
      alignSelf: 'center',
      justifyContent: 'center'
   }

What I really want to achieve is setting the image container to the size of the image height, which is resized so it fills 90% of the screens width (without skewing/stretching the image).

Is there are way of doing this within the styling or do I have to attempt using a function? I'm sure I have had success achieving this through styling in the past.