React-Native: image resizeMode not working properly

user_2497944 0
Viewed 2613

I'm having issues trying to set resizeMode: 'cover' in Image component

This image summarizes my issue :

enter image description here

I'm testing it on Android, RN 0.55.3 and this my sample code

<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
  <Image
    source={require('./bird.jpg')}
    style={{ alignSelf: 'stretch', flex: 1, resizeMode: 'cover' }}
  />
</View>

Also tried :

<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
      <Image
        source={require('./bird.jpg')}
        style={{ alignSelf: 'stretch', flex: 1 }}
        resizeMode='cover'
      />
</View>

But neither is working, so is there any way to get it work properly ?

react-native
2 Answers

I found that resizeMode doesn't work properly unless I set the width of the Image

I used width: 'auto' and everything worked well

the final code :

<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
  <Image
    source={require('./bird.jpg')}
    style={{ alignSelf: 'stretch', flex: 1, resizeMode: 'cover', width: 'auto' }}
  />
</View>
user_24979440

I define Image tag as below. resizeMode outside the style.

 <View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
      <Image
        source={require('./bird.jpg')}
        style={{ alignSelf: 'stretch', flex: 1,width : 'auto'}}
        resizeMode={'cover'}
      />
 </View>

this works for me.

user_66545620
Related