Pressable Ripple Animation goes beyond curved border

Description

When trying to create a Pressable that has a borderRadius style, the ripple animation goes beyond the curved borders. This issue seems to have existed for quite some time, while current solutions include wrapping the pressable in a view and applying borderRadius on that, is there a better way to fix this?

Gif source: StackOverflow Question This stackoverflow link includes more information as well.

Version

0.69.1

Output of npx react-native info

System: OS: Windows 10 10.0.22000 CPU: (8) x64 11th Gen Intel® Core™ i7-1185G7 @ 3.00GHz
Memory: 12.43 GB / 31.71 GB Binaries: Node: 14.20.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.17 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled Versions: 10.0.19041.0 IDEs: Android Studio: AI-212.5712.43.2112.8609683 Visual Studio: 16.11.32802.440 (Visual Studio Community 2019)
Languages: Java: 11.0.15 - C:\Program Files\OpenJDK\openjdk-11.0.15_10\bin\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 18.0.0 => 18.0.0 react-native: 0.69.1 => 0.69.1 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

<Pressable
        android_ripple={{ color: 'red', borderless: false }}
        style={{ backgroundColor: 'blue', borderRadius: 10 }}>
        <Text style={{ alignSelf: 'center' }}>Button</Text>
</Pressable>

https://stackoverflow.com/questions/63048178/ripple-effect-leaking-at-corners-as-if-pressable-button-has-a-borderradius

Snack, code example, screenshot, or link to a repository

Same as above

[ayush547]

Hello, I am aware of this solution, but I believe this workaround shouldn’t be the way to go. Pressable should ideally be able to handle curved borders.

To provide some more context, we are working on cross platform components as a part of Microsoft’s Fluent Efforts, if possible, we would like to avoid making this change just for the sake of the ripple on Android.

[adyhatem65]

Hello,

These are some rules works for me…

• pressable should be wrapped in a view
• view must have margin not padding
• border radius must be on view not on pressable
• pressable component must have padding not margin

Ex: