Open ayush547 opened 2 years ago
Hello,
These are some rules works for me...
Ex:
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.
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
Have checked that, it just creates the animation in a circular form of the specified radius starting at the center, not what is required
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.
+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.
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.
not stale
+1 definitely not stale.
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
It's very important to fix. I need to create many Pressable
buttons but now every time need to use workaround with overflow: 'hidden'
.
Can anyone take a look at this?
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
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