Pressable ripple flows outside of the containing box

[Pika-Pool]

If I set the borderRadius of Pressable and it's inner contents are not overflowing, the ripple flows outside of the box, forming a rectangle.

How can I contain the ripples inside the box, to create a ripple of the same shape? overflow: 'hidden' does not work either.

https://snack.expo.dev/@pikapool/react-native-material-explorer

[yamankatby]

Hi @Pika-Pool, Thank you for filling this issue, there is no way to apply a border-radius directly to a Pressable component however you can wrap the Pressable with a Box or View and apply a border-radius with overflow hidden. for example:

<Box
  style={{
    borderColor: "red",
    borderWidth: 2,
    alignSelf: "flex-start",
    borderRadius: 5000,
    overflow: "hidden",
    backgroundColor: "pink",
  }}
>
  <Pressable>
    <Box w={50} h={50} />
  </Pressable>
</Box>

Hope this answer your question I'll close this issue, for now, feel free to reopen if this doesn't answer your question or if you need more support.