React Native responsive image width while width/height ratio of image keeps the same

Question

I want a React Native Image to have a width of 50% of the available screen-width, no modification to width:height ratio of the image.

Any hints how to solve this?

Answer 1

Local images can be rendered without giving a fixed width and height but, for remote images you must provide dimensions as react-native cant calculate them on runtime. So, the following works for me

<View style={styles.thumbContainer}>
      <Image source={{uri: "REMOTE_IMAGE_URI}} style={styles.thumbnail} />
</View>

and apply following styles.

thumbContainer: {
    width: '100%',
    height: 400,
  },
  thumbnail: {
    flex: 1,
    width: undefined,
    height: undefined,
    resizeMode: 'cover'
  },

Answer 2

Use resize mode cover and set the width to ScreenWidth / 2 you can retrive the screen width using Dimensions component

//Get screen width using Dimensions component 
var {width} = Dimensions.get('window');
//....
//In image style 
image:{
   width: width * 0.5
}
//In render function
<Image resizeMode = 'cover' style = {styles.image}/>

Edit adding overflow

//add overflow : visible 
<Image resizeMode = 'cover' style = {[styles.image,{overflow: 'visible'}]}/>