Fit image to screen

Question

I'm trying to simply display an image and have it autoscale to fit the screen. According to the docs resizeMode: 'contain' should do what I want. However, nothing I've tried seems to work. I've tried manually setting the width and height. I've tried setting them to undefined. I've tried using Dimensions.get("window").height but no matter what the image is not resized and it runs off the bottom and right side of the screen.

Here is the original image:

Here is how it gets rendered:

Here is my code:

<View>
   <Image source={require('../../images/wireframe-car.jpg')} style={{resizeMode: 'contain'}} />
</View>

What am I missing?

Thanks in advance

Answer 1

I think you can achieve by add more maxWidth and maxHeight

 const {width, height} = Dimensions.get("window")
 render() {
   return(
    <View>
      <Image source={require('../../images/wireframe-car.jpg')}
        resizeMode='contain'
        style={{
          maxHeight: height,
          maxWidth: width
          }} />
    </View>
   )
 }