React Native responsive image width while width/height ratio of image keeps the same

Question

I want a React Native Image to have a width of 50% of the available screen-width, no modification to width:height ratio of the image.

Any hints how to solve this?

Answer 1

The verified answer didn't work for me but gave me a good idea.

It probably didn't work because my images are within a ScrollView.

Since images require a width and a height, my solution has been to get the width of the screen and: a) For image width: multiply screen width by % of the screen width I want my image to take. b) For image height: multiply screen width by % of the screen width I want my image to take by height/width aspect ratio.

const { width } = Dimensions.get('window');

Works nicely, but it will be necessary to dynamically define the % of width screen you want the image to take to make it work good responsively and for various orientations.