Feature: Android Pressable foreground ripple

[andreialecu]

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:

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

foreground: false (default):

foreground: true (new):

[facebook-github-bot]

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]

The implementation is the same as the one here:

react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js

Lines 312 to 315 in 0675bee

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

[facebook-github-bot]

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

[wolframkriesing]

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

[facebook-github-bot]

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

[analysis-bot]

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

Base commit: a56c158

[chuchuva]

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

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

Would this pull request fix this problem?

[andreialecu]

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]

@NickGerleman merged this pull request in ca65d97.