child views are overriding parent view's boundary. [react-native]

Question

I am trying to do as following in react-native. I am setting a borderRadius in the parent view. But the child is overriding that. So in the final view, the borderRadius is not visible

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1, borderRadius:30, backgroundColor:'red'}}>
        <View style={{flexGrow: 10, backgroundColor: 'powderblue'}} />
        <View style={{flexGrow: 20, backgroundColor: 'skyblue'}} />
        <View style={{flexGrow: 30, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

is there anything which I am missing to add?

you need to set borderBottomRight, Left Radius on child view. — heltdev, Aug 29 '18 at 16:32

score 27 · Accepted Answer · answered Aug 29 '18 at 16:50

27

Add overflow: "hidden" to your parent style

answered Aug 29 '18 at 16:50

Antoine Grandchamp

7,195
3
28
34

child views are overriding parent view's boundary. [react-native]

1 Answers1