react-native: backgroundColor doesn't follow borderRadius on android

overflow: 'hidden', does not work for me on Android. The image still renders on top of its parent view without a border radius!

You can probably wrap your image with a view. Something like this should work on both android and ios:

<View style={{
  backgroundColor: '#fff',
  borderRadius: 50,
  overflow: 'hidden',
}}>
  <Image
    source={ require('./logo.png')) }
    style={{
      width: 100,
      height: 100,
    }}
  />
</View>

We should still fix this bug though.

Hi guys! Anything new about this issue? I’m currently testing on a real device and even when I use the View trick, the borderRadius isn’t applied to the Image.

Still having the same problem…

Yes I’ve been too quick + the overflow: hidden is fixed in 0.52

The issue I raised was never about the behaviour of overflow: hidden - it was the difference between ios / android’s implementation of backgroundColor and borderRadius. If this code still displays as a square in Android and circle in IOS then the bug should be re-opened.

<Image
  source={ require('./logo.png')) }
  style={{
    width: 100,
    height: 100,
    backgroundColor: '#fff',
    borderRadius: 50
  }}
/>

I’ve only tested on one emulated device, but I was able to get it working by having borderRadius on the wrapper View as well as the Image itself.