How to set image width to be 100% and height to be auto in react native?
<p>I am trying to display list of images in a scrollview. Width should be 100%, while height should be automatic, keeping aspect ratio.</p>

<p>The searches I did pointed to various solutions which give fullscreen background style.</p>

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

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

<p>I have tried various combinations of width: null, height: null, flex: 1, alignSelf etc. The above solution is almost working, except the height is not dynamic. Parts of the image are not visible.</p>