add ripple config object to Pressable #28156
Conversation
facebook-github-bot
added
the
CLA Signed
react-native-bot
added
Platform: Android
|
RNTester (Android/hermes/arm64-v8a): 3291136 bytes |
|
RNTester.app (iOS): 10727424 bytes |
|
RNTester (Android/hermes/arm64-v8a): 3291136 bytes |
|
RNTester.app (iOS): 10657792 bytes |
|
RNTester (Android/hermes/arm64-v8a): 3291136 bytes |
There was a problem hiding this comment.
@TheSavior has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
vonovak
force-pushed
the
rippleCustomizationForPressable
branch
from
4ec8985 to
320effc
Compare
|
RNTester (Android/hermes/arm64-v8a): 3291136 bytes |
|
RNTester.app (iOS): 10657792 bytes |
There was a problem hiding this comment.
@TheSavior has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
|
RNTester (Android/hermes/arm64-v8a): 3291136 bytes |
|
RNTester.app (iOS): 10657792 bytes |
There was a problem hiding this comment.
@TheSavior has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
vonovak
force-pushed
the
rippleCustomizationForPressable
branch
from
2452982 to
d44beb5
Compare
There was a problem hiding this comment.
@TheSavior has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
|
Heads up @kikisaints that we are working on landing this change to the Pressable API. |
|
This pull request was successfully merged by @vonovak in bd38686. When will my fix make it into a release? | Upcoming Releases |
Summary: Motivation is to support ripple radius just like in TouchableNativeFeedback, plus borderless attribute. See facebook#28009 (comment) In the current form this means user needs to pass an `android_ripple` prop which is an object of this shape: ``` export type RippleConfig = {| color?: ?ColorValue, borderless?: ?boolean, radius?: ?number, |}; ``` Do we want to add methods that would create such config objects - https://facebook.github.io/react-native/docs/touchablenativefeedback#methods ? ## Changelog [Android] [Added] - support borderless and custom ripple radius on Pressable Pull Request resolved: facebook#28156 Test Plan: Tested locally in RNTester. I noticed that when some content is rendered after the touchables, the ripple effect is "cut off" by the boundaries of the next view. This is not specific to Pressable, it happens to TouchableNativeFeedback too but I just didn't notice it before in facebook#28009. As it is an issue of its own, I didn't investigate that.  I changed the Touchable example slightly too (I just moved the "custom ripple radius" up to show the "cutting off" issue), so just for completeness:  Reviewed By: yungsters Differential Revision: D20071021 Pulled By: TheSavior fbshipit-source-id: cb553030934205a52dd50a2a8c8a20da6100e23f
Summary
Motivation is to support ripple radius just like in TouchableNativeFeedback, plus borderless attribute. See #28009 (comment)
In the current form this means user needs to pass an
android_rippleprop which is an object of this shape:Do we want to add methods that would create such config objects - https://facebook.github.io/react-native/docs/touchablenativefeedback#methods ?
Changelog
[Android] [Added] - support borderless and custom ripple radius on Pressable
Test Plan
Tested locally in RNTester. I noticed that when some content is rendered after the touchables, the ripple effect is "cut off" by the boundaries of the next view. This is not specific to Pressable, it happens to TouchableNativeFeedback too but I just didn't notice it before in #28009. As it is an issue of its own, I didn't investigate that.
I changed the Touchable example slightly too (I just moved the "custom ripple radius" up to show the "cutting off" issue), so just for completeness: