Image stretching the parent container

I have an image that I want to display, but don't want it to stretch or go off the screen.

I set maxWidth: "90%" along with resizeMode: "contain". The image shrunk accordingly, but it's parent container kept the original height. Is there something I can do (except for explicitly setting the height property) so the parent also shrinks down?
I have prepared a small demo here

You can load/import image and scale it to fit in specific area as below:

import {
  StyleSheet,
  SafeAreaView,
  View,
  Image,
  useWindowDimensions,
} from "react-native";
import { useState } from "react";

/**
 * Conserve aspect ratio of the original image. Useful when shrinking/enlarging
 * images to fit into a certain area.
 *
 * @param {Number} srcWidth width of source image
 * @param {Number} srcHeight height of source image
 * @param {Number} maxWidth maximum available width
 * @param {Number} maxHeight maximum available height
 * @return {Object} { width, height }
 */
export function calculateAspectRatioFit(
  srcWidth: number,
  srcHeight: number,
  maxWidth: number,
  maxHeight: number
) {
  const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

  return { width: Math.fround(srcWidth * ratio), height: srcHeight * ratio };
}
const QuestionImages = {
  bonk: require("./bonk.jpeg"),
};

const App = () => {
  const { width } = useWindowDimensions();
  const [imageSize, setImageRealSize] = useState({ width: 0, height: 0 });

  console.log(imageSize);
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.View}>
        <Image
          onLoad={({
            nativeEvent: {
              source: { width, height },
            },
          }) => setImageRealSize({ width, height })}
          source={QuestionImages.bonk}
          style={[
            styles.Image,
            calculateAspectRatioFit(
              imageSize.width,
              imageSize.height,
              width,
              imageSize.height
            ),
          ]}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  Image: {
    resizeMode: "contain",
    alignSelf: "center",
  },
  View: {
    marginTop: 40,
    padding: 3,
    backgroundColor: "#484848",
  },
});

export default App;

Demo - https://snack.expo.dev/@emmbyiringiro/78805a?platform=android