Pressable Ripple Animation goes beyond curved border

[ayush547]

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(R) Core(TM) 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

[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:

[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, 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.

try to use radius in android_ripple prop

[ayush547]

Have checked that, it just creates the animation in a circular form of the specified radius starting at the center, not what is required

[delanebob]

I have come across this same issue in a project I'm working on.

Another issue with @adyhatem65's solution of wrapping Pressable in another View is that this completely breaks support for hitSlop/pressRetentionOffset.

As you can see in this is a quote from the docs:

The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.

[MrEminent42]

+1 on this, I'm working on transitioning an app written primarily for iOS to run on Android. We've mostly used TouchableOpacity thus far and it seems like Pressable, being advertised as futureproof, should be the replacement. Wrapping everything in a View seems like an ad-hoc solution.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[andresribeiro]

not stale

[MrEminent42]

+1 definitely not stale.

[DenisDov]

nowadays i must use RectButton from react-native-gesture-handler, but its not silver-bullet, it also have some tricks with borders, and in specific expo/rngh versions hitSlop is not working on android properly