resizeMode not working in React Native Android

Question

Update 2021

resizeMode not working while given as a style prop to Image in RN Android

borderRadius works as expected in iOS but not working as expected in Android. I tried to wrap the Image in a View and gave borderRadius and overFlow: 'hidden'

  <View style={styles.userImageContainer}>
    <Image source={require('../../assets/images/user1.png')}
      style={styles.userImage}
    />
  </View>

StyleSheet

const imageSize = 40;

  userImageContainer: {
    height: imageSize,
    width: imageSize,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: imageSize/2,
    overflow: 'hidden'
  },
  userImage: {
    height: imageSize,
    width: imageSize,
    borderRadius: imageSize/2,
    padding: 5,
    resizeMode: 'contain'
  },

End result Image

I am using RN 0.42.2 0.66.3

Answer 1

UPDATE

Applying borderRadius and resizeMode as props instead as a style attribute will fix the borderRadius issue in Android

<Image
  source={{uri: 'path'}}
  style={styles.image}
  resizeMode="cover"
  borderRadius={value}
/>

For those who are facing this issue, its a known issue with react-native android. As of now there is no fix for it.

https://facebook.github.io/react-native/releases/0.26/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-android