React-native: <Image> backgroundColor doesn't follow borderRadius on android

[markbrown4]

backgroundColor follows the borderRadius on ios but on android it doesn't.

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

Is there another method for android that you can use to render a rounded image with transparency on a white background?

[janicduplessis]

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.

[markbrown4]

It does, cheers.

[SudoPlz]

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

[cpsubrian]

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.

[CharlesMangwa]

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.

[fab1an]

Same with background-color and child-views btw. A child-view is just overlapping the round corners.

[KristoferEng]

Having the same issue. What is the fix?

[mwiley]

I think the issue you guys are having is this: https://github.com/facebook/react-native/issues/3198

Facebook is working on open sourcing their fix for it.

[lacker]

I agree, I think this is a dupe of https://github.com/facebook/react-native/issues/3198 so I am going to close this issue.

[hramos]

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.

[GarimaMathur07]

@hramos How can i achieve rounded corner white view for android in react native

[Fr33maan]

@hramos
It should be reopened, the issue still exists and its impossible for a children to be hided by its parent's borderRadius

[markbrown4]

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
  }}
/>

[Fr33maan]

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

[wassgha]

Still having the same problem..

[nikasvan]

This works. @l1br3 I do not think overflow: hidden is fixed in 0.52(for android).