react-native

Maintain aspect ratio of image with full width in React Native

I have a query regarding tag. I want an image to take entire width of parent which I do using alignSelf:stretch, but I also want the height to be according to the aspect ratio of the image. How can I achieve something like this?

So I want a way to specify the height as a ratio of the width of the Image.

Solution

  • Use style={{ aspectRatio: 3/2 }} for a horizontal image with width to height ratio of 3:2.

    Docs: https://reactnative.dev/docs/layout-props#aspectratio

    (Available in RN 0.40+)