React-native: Background color visible through the border of a border radius

[frostney]

When a <View /> component uses backgroundColor and borderRadius, the background color is still visible over the edges of the border.

Screenshot:

Example code:

var MyComponent = React.createClass({
  render() {
    return <View style={styles.example} />
  }
});

var styles = StyleSheet.create({
  example: {
    backgroundColor: 'white',
    borderRadius: 16,
    borderWidth: 1,
    borderColor: 'black'
  }
});

[brentvatne]

Hi there! Try setting overflow: hidden, does that fix it?

[brentvatne]

@frostney - does this still occur on 0.4.0 for you?

I can only reproduce this when I have some other item inside, eg: , which inherits the background colour of the parent by default and does not have border radius and so it appears to be outside of the rounded corner. You will have to use overflow: hidden as mentioned above to fix that issue.

[frostney]

overflow: hidden does fix it for me. Thank you.
I hope it's ok that I'm closing this issue.

Edit: The code example is more stripped down than I intended it to be. This issue occured for me on views (with borderRadius and backgroundColor) that had texts and views as its children (those were without background color or borderRadius) and when I created the code example I forgot to copy over the hierarchy from the production code to the example code while making a screenshot from the production code. Sorry about that.

[brentvatne]

@frostney - no problem, glad it helped! :smile:

[ms88privat]

overflow: 'hidden' does fix it for me too.

Thats not the expected css behaviour. Maybe we should write it in the docs.

Greetings

[nicklockwood]

I believe this now works correctly.

[zebulgar]

I still have this issue but only with absolutely positioned views. The overflow: 'hidden' works for me as well.

[BGuven]

It is still an issue but overflow: 'hidden' works. Thanks.

[uandco]

The issue with overflow is you can't use shadows anymore as they are considered as overflowing elements.

[anceque]

as @uandco mentioned, the overflow cannot be used together with shadow properties.. What is the workaround here?