Estou tentando exibir a lista de imagens em uma exibição de rolagem. A largura deve ser 100%, enquanto a altura deve ser automática, mantendo a proporção.

As pesquisas que fiz apontaram para várias soluções que oferecem estilo de plano de fundo em tela cheia.

const styles = StyleSheet.create({
    image: {
        width: null,
        height: 300,
        resizeMode: 'cover'
    }
});

<ScrollView style={{flex: 1}}>
    <Image style={styles.image} source={require('../../../images/collection-imag1.png')}/>
    <Image style={styles.image} source={require('../../../images/collection-imag2.png')}/>
</ScrollView>

Eu tentei várias combinações de largura: null, height: null, flex: 1, alignSelf etc. A solução acima está quase funcionando, exceto que a altura não é dinâmica. Partes da imagem não são visíveis.