Как изменить размер родительского компонента View в соответствии с компонентом дочернего изображения

Question

Не удается изменить размер родительского вида, чтобы он соответствовал его дочерним компонентам, одним из которых является компонент Image, который изменит свою ширину в соответствии с шириной экрана, а затем высота должна быть просто необходимой для сохранения соотношения сторон изображения.

cardContainer относится к Карте, в которой будут размещаться несколько компонентов, и должна соответствовать размеру высоты, чтобы соответствовать компонентам.postMedia относится к стилю изображения, которое будет занимать всю ширину экрана, но высота будет неизвестна (требуется, чтобы это делалось динамически, чтобы сохранить соотношение сторон без искажений или обрезки. mediaContainer - это контейнер для изображения, которое будетизмените размер в соответствии с необходимой высотой, чтобы соответствовать изображению, и это один из нескольких компонентов внутри карты.

const styles = StyleSheet.create({
    cardContainer: {
        backgroundColor: 'grey',
        width: '100%',
        height: undefined,
        borderTopWidth: 2,
        borderBottomWidth: 2,
        borderTopColor: 'black',
        flex: 0,
        flexShrink: 1
    },
    postMedia: {
        resizeMode: 'contain',
        width: '100%',
        height: undefined
    },
    mediaContainer: {
        backgroundColor: 'green',
        flex: 0,
        flexShrink: 1
    }
});

Я попытался настроить дочерние компоненты на flex: 1, но это приводит к тому, что представления заполняют всеэкран, который мне не нужен. Мне нужно, чтобы cardContainer был достаточно большим, чтобы вместить весь контент, не растягивая весь экран.

Код, который работает только с одним изображением, с которым я работаюниже:

const styles = StyleSheet.create({
    cardContainer: {
        backgroundColor: 'grey',
        width: '100%',
        height: undefined,
        borderTopWidth: 2,
        borderBottomWidth: 2,
        borderTopColor: 'black',
        flex: 0,
        flexShrink: 1
    },
    postMedia: {
        resizeMode: 'contain',
        width: '100%',
        height: 233
    },
    mediaContainer: {
        backgroundColor: 'green',
        flex: 0,
        flexShrink: 1
    }
});

Мне просто нужно найти способ для вида использовать высоту, которая соответствует изображению, вместо жесткого кодирования, как указано выше.