diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js index 44972fb860f669..b8b6e283ea4680 100644 --- a/Libraries/Components/Pressable/useAndroidRippleForView.js +++ b/Libraries/Components/Pressable/useAndroidRippleForView.js @@ -47,13 +47,12 @@ export default function useAndroidRippleForView( |}>, |}> { const {color, borderless, radius} = rippleConfig ?? {}; - const normalizedBorderless = borderless === true; return useMemo(() => { if ( Platform.OS === 'android' && Platform.Version >= 21 && - (color != null || normalizedBorderless || radius != null) + (color != null || borderless != null || radius != null) ) { const processedColor = processColor(color); invariant( @@ -67,7 +66,7 @@ export default function useAndroidRippleForView( nativeBackgroundAndroid: { type: 'RippleAndroid', color: processedColor, - borderless: normalizedBorderless, + borderless: borderless === true, rippleRadius: radius, }, }, @@ -101,5 +100,5 @@ export default function useAndroidRippleForView( }; } return null; - }, [color, normalizedBorderless, radius, viewRef]); + }, [color, borderless, radius, viewRef]); } diff --git a/RNTester/js/examples/Pressable/PressableExample.js b/RNTester/js/examples/Pressable/PressableExample.js index 1dadac6b1c4c13..e57f6320098e54 100644 --- a/RNTester/js/examples/Pressable/PressableExample.js +++ b/RNTester/js/examples/Pressable/PressableExample.js @@ -378,7 +378,7 @@ exports.examples = [ }, { title: 'Pressable with custom Ripple', - description: ("Pressable can specify ripple's radius and borderless params": string), + description: ("Pressable can specify ripple's radius, color and borderless params": string), platform: 'android', render: function(): React.Node { const nativeFeedbackButton = { @@ -386,32 +386,42 @@ exports.examples = [ margin: 10, }; return ( - - - - - radius 30 - - - + + + + + + radius 30 + + + - - - - radius 150 - - - + + + + radius 150 + + + + + + + + radius 70, with border + + + + - + - radius 70, with border + with border, default color and radius