0

I hope there is someone savvy with React Native that can help me out here.

I want to resize an image according to the dimensions of the view that it is placed in. To my understanding that should be achievable by using "ResizeMode: Contain" as a style on the image. That should cause the image to rescale itself to fit within the surrounding view, iff it is too large (according to my understanding) .

I have attached an image that shows the dimensions of the view (the blue bordered view). The dimensions of the views are correct according to the blue border on the view, yet the image is not resized to fit it.

Can someone figure out, what it is that I am doing wrong here, or have I encountered a bug in the framework? (It is a fairly new framework I suppose, so that could actually happen I guess).

If it helps, then I am currently using the following React Native version: react-native: 0.54.4 (and react-native-cli: 2.0.1 for what it is worth).

Picture of issue (notice the blue box and the wrongly scaled image within it): enter image description here

oPolo
  • 516
  • 3
  • 14

1 Answers1

5

resizeMode should be used as a prop instead of a property of the style object

<Image
    style={{ ... }}
    source={{ ... }}
    resizeMode='contain'
/>
K.Wu
  • 3,553
  • 6
  • 31
  • 55
  • Thank you, so much! Your feedback along with what I found here https://stackoverflow.com/questions/29476165/image-resizing-in-react-native?rq=1, where I could see they used "flex: 1" as style on the image itself as well did the trick. Thanks. – oPolo Apr 04 '18 at 18:25