diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js index 963933d13ca11b..545ecd4ec1312d 100644 --- a/Libraries/Components/Pressable/Pressable.js +++ b/Libraries/Components/Pressable/Pressable.js @@ -24,7 +24,6 @@ import type { } from '../View/ViewAccessibility'; import usePressability from '../../Pressability/usePressability'; import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect'; -import type {ColorValue} from '../../StyleSheet/StyleSheetTypes'; import type {LayoutEvent, PressEvent} from '../../Types/CoreEventTypes'; import View from '../View/View'; diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js index 44972fb860f669..6aafbedf2c1cde 100644 --- a/Libraries/Components/Pressable/useAndroidRippleForView.js +++ b/Libraries/Components/Pressable/useAndroidRippleForView.js @@ -26,9 +26,9 @@ type NativeBackgroundProp = $ReadOnly<{| |}>; export type RippleConfig = {| - color?: ?ColorValue, - borderless?: ?boolean, - radius?: ?number, + color?: ColorValue, + borderless?: boolean, + radius?: number, |}; /** @@ -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