Let me share what I end up with, which allows to set correctly width or height by getting the image dimensions. In addition, the code allows to fetch a loading image while the large image data we need is being transfered:
Use static method Image.prefetch to have the image downloaded and available to cache.
Use static method Image.getSize to collect height and width and use it to compute an aspect ratio and then the final height (or width)
Display image with a default style to your prefered width (The height will be computed with aspect ratio kept)
function ImageX(props: {source: string, id: string})
{
const [imageHeight, setImageHeight] = React.useState(1);
Image.prefetch(props.source)
.then(() => {
Image.getSize(props.source, (width, height) => {
let aspectRatio = height/width;
setImageHeight(aspectRatio*Dimensions.get('window').width);
});
})
.catch(error => console.log(error))
if (imageHeight <=1) //Image not in cache (disk) yet
{
return (
<Image key={props.id} style={styleimg.image} source={{uri: 'http://www.dsdsd/loaderpreview.gif'}}/>
);
}
else
{
return (
<Image key={props.id} style={styleimg.image} height={imageHeight} source={{uri: props.source}}/>
);
}
}
const styleimg = StyleSheet.create({ image: { width: Dimensions.get('window').width, resizeMode: 'contain' //... // you can set a height defaults } });