diff --git a/src/components/GestureButtons.tsx b/src/components/GestureButtons.tsx index 8737e903f2..965ffb21f8 100644 --- a/src/components/GestureButtons.tsx +++ b/src/components/GestureButtons.tsx @@ -18,12 +18,15 @@ import type { BorderlessButtonWithRefProps, BorderlessButtonProps, } from './GestureButtonsProps'; +import { isFabric } from '../utils'; export const RawButton = createNativeWrapper(GestureHandlerButton, { shouldCancelWhenOutside: false, shouldActivateOnStart: false, }); +let IS_FABRIC: null | boolean = null; + class InnerBaseButton extends React.Component { static defaultProps = { delayLongPress: 600, @@ -120,12 +123,20 @@ class InnerBaseButton extends React.Component { }; render() { - const { rippleColor, style, ...rest } = this.props; + const { rippleColor: unprocessedRippleColor, style, ...rest } = this.props; + + if (IS_FABRIC === null) { + IS_FABRIC = isFabric(); + } + + const rippleColor = IS_FABRIC + ? unprocessedRippleColor + : processColor(unprocessedRippleColor ?? undefined); return ( = Platform.OS === 'web' ? { cursor: 'pointer' } : {}; @@ -381,6 +381,18 @@ export default function Pressable(props: PressableProps) { ? children({ pressed: pressedState }) : children; + const rippleColor = useMemo(() => { + if (IS_FABRIC === null) { + IS_FABRIC = isFabric(); + } + + const defaultRippleColor = android_ripple ? undefined : 'transparent'; + const unprocessedRippleColor = android_ripple?.color ?? defaultRippleColor; + return IS_FABRIC + ? unprocessedRippleColor + : processColor(unprocessedRippleColor); + }, [android_ripple]); + return (