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

user_9531307 0
Viewed 2080

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.

enter image description here

  <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>
react-native scrollview
5 Answers

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>
user_7411970

came across your question a while back but now I've found the answer. To apply a border radius to a scrollviews content, you need to set it like this:

<ScrollView 
style={{borderRadius: 30, overflow: 'hidden'}} 
contentContainerStyle={{borderRadius: 30, overflow: 'hidden'}}
>
  {children}
</ScrollView>
user_162764610

try overflow:"hidden" in the scrollview style

user_134115640

I ran into the same problem. Adding the borderRadius and overflow to the Scrollview helped me perfectly! Cheers!

<ScrollView style={{ borderRadius: 20, overflow: "hidden" }}>

// ---- Add your views /divs or Text Here ---- 

</ScrollView>
user_126477530

Be careful, the padding and/or margin might mess you up if you don't do it properly as I experienced. Try this:

<View style={{ flex: 1, overflow: 'hidden', borderRadius: 25, backgroundColor: 'black' }}>
   <ScrollView style={{ paddingVertical: 10 }}>
      ...
   </ScrollView>
</View>
user_103780410
Related