Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Android Pressable foreground ripple #30466

Closed

Conversation

andreialecu
Copy link

Summary

Pressable does not support foreground Android ripples: https://reactnative.dev/docs/touchablenativefeedback#useforeground

This is needed for certain scenarios otherwise Pressable cannot be used, and users have to resort to TouchableNativeFeedback instead.

foreground is necessary when using react-native-linear-gradient for example, otherwise the ripple renders underneath the gradient and if used for buttons, it doesn't show any feedback.

react-native-linear-gradient/react-native-linear-gradient#64

Changelog

[Android] [Added] Pressable: Add foreground prop to android_ripple

Test Plan

With foreground: true:

M2bx2dILpj

Also, here's a different example of using foreground true/false:

foreground: false (default):
Tqb6REqXyC

foreground: true (new):
4hv3UVFs1d

@facebook-github-bot
Copy link
Contributor

Hi @andreialecu!

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.

In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@andreialecu
Copy link
Author

The implementation is the same as the one here:

? (background, useForeground) =>
useForeground && TouchableNativeFeedback.canUseNativeForeground()
? {nativeForegroundAndroid: background}
: {nativeBackgroundAndroid: background}

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Nov 24, 2020
@facebook-github-bot
Copy link
Contributor

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@wolframkriesing
Copy link

great job @andreialecu, looks like this will solve some shortcoming I stumbled upon

Copy link
Contributor

@facebook-github-bot facebook-github-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nadiia has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@analysis-bot
Copy link

Platform Engine Arch Size (bytes) Diff
ios - universal n/a --

Base commit: a56c158

@chuchuva
Copy link

@andreialecu How do you make the ripple effect with round corners? This is what I get:

Animation

Snack demonstrating the problem: https://snack.expo.dev/6U8dxxzLx

Would this pull request fix this problem?

@andreialecu
Copy link
Author

You need to add a wrapping view with the correct border-radius + overflow hidden.

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

@facebook-github-bot
Copy link
Contributor

@NickGerleman merged this pull request in ca65d97.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants