Search code examples
react-nativeimage

How to force an image to be full width and maintain aspect ratio using React Native?

I have an image that I pull down from a URL. I do not know the dimensions of this image ahead of time.

How do I style / layout the image so that it is the full width of the parent view and the height is calculated so that the aspect ratio is maintained?

I have tried using onLoad in 0.34.0-rc.0 and the height / width are both 0 in event.nativeEvent.source.

The image is in a <ScrollView/>. I am not after a full screen image.

Solution

  • React Native has a function built in that will return the width and height of an image: Image.getSize(). Check out the documentation here