Image 'contain' resizeMode not working in react native - react-native

Question

I am using React Native on a real Android device.
When creating a really simple app with just the following render function on the main app component...
render() {
<Image
source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}}
style={
{
flex: 1,
resizeMode: 'contain',
backgroundColor: 'yellow'
}
} />
}
I get the following result on my device:
As you can see the whole background is yellow so that tells us the image element is taking the whole screen size indeed. But it is just rendered wrong.
The 'cover' resizeMode does work as expected (and so does the 'stretch' mode).
It is the 'contain' mode that is not working (the most important one from my point of view).
The problem gets even worse when placing the image on a ListView since the image does not even show.
UPDATE 1
As Frederick points out, 'contain' only works when the image is larger than the container size. So how can we make the image take the whole container size while keeping its aspect ratio?
Percentages are not supported yet by styles in React, and I don't know how to get the image width and height properties once the image is loaded. None of the events associated with the Image component provide that info.
UPDATE 2
Good news. I am now using React Native v0.24.1 and it seems the image 'contain' mode now works as expected, even when the actual image size is smaller than its container.
zvona's solution is good (although you need to bear in mind that onLayout will give you the image view size the image is rendered in, but NOT the actual image size being loaded). As for now, I don't know of any way to find out the actual image size (let's suppose you are retrieving the image from a network resource and you don't know the size, which could be very important if you want to calculate its aspect ratio).

Answer 1

This is the trick:
render() {
return (
<Image
style={{ flex: 1, height: undefined, width: undefined }}
source={require("../../resource/image/bg_splash.jpg")}
resizeMode="contain"
/>
);
}

Answer 2

This is the latest solution:
Image.resizeMode.contain is not working with latest version of react native so i use it like this:
import ImageResizeMode from 'react-native/Libraries/Image/ImageResizeMode'
<Image source={image} resizeMode={ImageResizeMode.contain} />

Answer 3

This is what worked for me with the latest react-native 0.37:
<Image source={require('../images/my-image.png')} resizeMode={Image.resizeMode.center} />
Answering the updated part of the question. You can get the image size for external images using Image.getSize.
For local images, a not so documented way to figure out the size and thereby calculate the aspect ratio is using resolveAssetSource which is a react-native module (no need for an external library):
let resolveAssetSource = require('resolveAssetSource')
let { width, height } = resolveAssetSource(image_source)
let aspectRatio = width / height

Answer 4

My answer to UPDATED part of the question:
<Image source={{uri:'...'}} onLayout={this.onImageLayout} />
where:
onImageLayout: function(data){
console.log('layout', data.nativeEvent.layout);
}
These should be proportioned to device width + height, which you get with:
const {
Dimensions,
.
.
.
} = React;
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
And if you want to get width/height as percentages in styles, you just define e.g.:
const styles = StyleSheet.create({
image: {
width: windowWidth * 0.75,
height: windowHeight * 0.33
}
});

Answer 5

"Contain" only resizes your image when the image size is larger than the container you're trying to fit it in. In this case, your container is the full screen. The image you're loading via the URL is way smaller, since it's only 53 by 77 pixels. So it won't resize.
I think "cover" should do what you're trying to achieve. However, due to the size the image, it won't look very nice when it is magnified like that.
Made an example here: https://rnplay.org/apps/X5eMEw

Answer 6

Adding the aspect ratio worked for me:
<Image
source={item.imageUrl && item.imageUrl != '' ? { uri: item.imageUrl } : require('../../assets/images/no-image-icon-15.png')}
style={{
flex: 1,
aspectRatio: 1.5,
height: undefined,
width: undefined
}}
resizeMode="contain"
/>

Answer 7

I will suggest you a simple solution to apply if it's convenient for you.
use "ImageBackground" component of react-native.
so your code will become something like this:
<ImageBackground
source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}}
style={{flex: 1}} />
In your particular case you are apparently trying to cover whole screen with the image so this solution is exactly for that purpose. However most of the time it works in other cases as well where you want to fit the image properly in its view.