Handle press events

Author: j-piasecki

packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx

@@ -3,6 +3,7 @@ import type {
   ColorValue,
   HostComponent,
   LayoutChangeEvent,
+  NativeSyntheticEvent,
   StyleProp,
   ViewProps,
   ViewStyle,
@@ -28,6 +29,36 @@ export interface ButtonProps extends ViewProps, AccessibilityProps {
    */
   exclusive?: boolean | undefined;
 
+  /**
+   * Called when the button gets pressed.
+   */
+  onPress?: ((event: NativeSyntheticEvent<ButtonEvent>) => void) | undefined;
+
+  /**
+   * Called when the pointer touches the button.
+   */
+  onPressIn?: ((event: NativeSyntheticEvent<ButtonEvent>) => void) | undefined;
+
+  /**
+   * Called when the pointer is released or leaves the button.
+   */
+  onPressOut?: ((event: NativeSyntheticEvent<ButtonEvent>) => void) | undefined;
+
+  /**
+   * Called when the button gets pressed and held past `longPressDuration`.
+   */
+  onLongPress?:
+    | ((event: NativeSyntheticEvent<ButtonEvent>) => void)
+    | undefined;
+
+  /**
+   * Called when the interaction with the button ends, after any terminal
+   * `onPressOut`/`onPress` events, regardless of how it ended.
+   */
+  onInteractionFinished?:
+    | ((event: NativeSyntheticEvent<ButtonEvent>) => void)
+    | undefined;
+
   /**
    * Android only.
    *

packages/react-native-gesture-handler/src/v3/components/GestureButtonsProps.ts

@@ -10,6 +10,14 @@ import type { NativeWrapperProperties } from '../types/NativeWrapperType';
 export interface RawButtonProps
   extends Omit<
       ButtonProps,
+      // The native press events are omitted — the deprecated buttons drive
+      // their press callbacks from the gesture in JS and redeclare them with
+      // their own signatures.
+      | 'onPress'
+      | 'onPressIn'
+      | 'onPressOut'
+      | 'onLongPress'
+      | 'onInteractionFinished'
       | 'defaultOpacity'
       | 'defaultScale'
       | 'defaultUnderlayOpacity'

packages/react-native-gesture-handler/src/v3/components/Touchable/Touchable.tsx

@@ -12,24 +12,13 @@ import {
   isKeyboardDismissingTap,
   JSResponderContext,
 } from '../ScrollViewResponderInterceptor';
-import type {
-  AnimationDuration,
-  CallbackEventType,
-  EndCallbackEventType,
-  TouchableProps,
-} from './TouchableProps';
+import type { AnimationDuration, TouchableProps } from './TouchableProps';
 
 const isAndroid = Platform.OS === 'android';
 const TRANSPARENT_RIPPLE = { rippleColor: 'transparent' as const };
 const DEFAULT_IN_DURATION_MS = 50;
 const DEFAULT_OUT_DURATION_MS = 100;
 
-enum PointerState {
-  UNKNOWN,
-  INSIDE,
-  OUTSIDE,
-}
-
 // Clamp user-supplied durations to finite, non-negative milliseconds.
 // Negative, NaN, or Infinity values would produce invalid CSS transitions
 // on web and negative setTimeout delays in branch 3 of the press-out path.
@@ -102,34 +91,65 @@ export const Touchable = (props: TouchableProps) => {
 
   const shouldUseNativeRipple = isAndroid && androidRipple !== undefined;
 
+  const jsResponderContext = use(JSResponderContext);
+  const dropKeyboardTapRef = useRef<boolean | null>(null);
+
   const internalOnPress = useCallback(
     (e: NativeSyntheticEvent<ButtonEvent>) => {
+      if (dropKeyboardTapRef.current) {
+        return;
+      }
+
       onPress?.(e.nativeEvent);
     },
     [onPress]
   );
 
   const internalOnPressIn = useCallback(
     (e: NativeSyntheticEvent<ButtonEvent>) => {
+      // PressIn opens every press sequence; capture the verdict once per
+      // sequence so a re-entry PressIn (with cancelOnLeave={false}) doesn't
+      // overwrite it after the keyboard is already dismissed.
+      dropKeyboardTapRef.current ??=
+        isKeyboardDismissingTap(jsResponderContext);
+
+      if (dropKeyboardTapRef.current) {
+        return;
+      }
+
       onPressIn?.(e.nativeEvent);
     },
-    [onPressIn]
+    [jsResponderContext, onPressIn]
   );
 
   const internalOnPressOut = useCallback(
     (e: NativeSyntheticEvent<ButtonEvent>) => {
+      if (dropKeyboardTapRef.current) {
+        return;
+      }
+
       onPressOut?.(e.nativeEvent);
     },
     [onPressOut]
   );
 
   const internalOnLongPress = useCallback(
     (e: NativeSyntheticEvent<ButtonEvent>) => {
+      if (dropKeyboardTapRef.current) {
+        return;
+      }
+
       onLongPress?.(e.nativeEvent);
     },
     [onLongPress]
   );
 
+  // InteractionFinished is dispatched after the terminal PressOut/Press
+  // events, so resetting synchronously here is safe.
+  const internalOnInteractionFinished = useCallback(() => {
+    dropKeyboardTapRef.current = null;
+  }, []);
+
   const nativeGesture = useNativeGesture({
     hitSlop: props.hitSlop,
     testID: props.testID,
@@ -170,7 +190,8 @@ export const Touchable = (props: TouchableProps) => {
         onPress={internalOnPress}
         onPressIn={internalOnPressIn}
         onPressOut={internalOnPressOut}
-        onLongPress={internalOnLongPress}>
+        onLongPress={internalOnLongPress}
+        onInteractionFinished={internalOnInteractionFinished}>
         {children}
       </GestureHandlerButton>
     </NativeDetector>

packages/react-native-gesture-handler/src/v3/components/Touchable/TouchableProps.ts

@@ -20,6 +20,15 @@ type PressableAndroidRippleConfig = {
 
 type RippleProps = 'rippleColor' | 'rippleRadius' | 'borderless' | 'foreground';
 
+// The press events are redeclared below with the unwrapped `ButtonEvent`
+// signature; `onInteractionFinished` is consumed internally by `Touchable`.
+type PressProps =
+  | 'onPress'
+  | 'onPressIn'
+  | 'onPressOut'
+  | 'onLongPress'
+  | 'onInteractionFinished';
+
 type DurationProps =
   | 'tapAnimationInDuration'
   | 'tapAnimationOutDuration'
@@ -60,7 +69,7 @@ export type AnimationDuration =
 
 export type TouchableProps = Omit<
   ButtonProps,
-  RippleProps | 'enabled' | DurationProps
+  RippleProps | PressProps | 'enabled' | DurationProps
 > &
   Omit<
     BaseButtonProps,