React native scrollview on android. The children overlap the border radius when scrolling

Question

On android when I apply a border radius to a scroll view the inner container ignores the outer border radius and I can't figure out how to make it conform. This is on Pixel 2 simulator, the red dotted lines show the underlying border radius and where the overlap is. The code is just a standard scrollview I made to double check it happens on the simplest scrollview implementation which it does.

  <ScrollView
    contentContainerStyle={{
      alignItems: 'center',
      justifyContent: 'space-between',
    }}
    style={{
      padding: 20,
      backgroundColor: 'green',
      borderTopLeftRadius: 45,
      borderTopRightRadius: 45,
    }}>
    <View
      style={{
        width: '100%',
        height: 400,
        borderRadius: 20,
        backgroundColor: 'red',
      }}
    />
    <View
      style={{
        width: '100%',
        height: 400,
        borderRadius: 20,
        backgroundColor: 'red',
      }}
    />
    <View
      style={{
        width: '100%',
        height: 400,
        borderRadius: 20,
        backgroundColor: 'red',
      }}
    />
    <View
      style={{
        width: '100%',
        height: 400,
        borderRadius: 20,
        backgroundColor: 'red',
      }}
    />
  </ScrollView>

Answer 1

Just wrap Scrollview with View and set overflow: 'hidden', structure your views like bellow code. It will force all children views to hidden if overflow.

<View
  style={{ 
      borderRadius: 45l
      overflow: 'hidden',
  }}
>
  // ->> Put your scrollview in here
  <Scrollview>
    {...children}
  </Scrollview>
</View>