react-native-gesture-handler 3.2.0-nightly-20260811-cc704f09a → 3.2.0

package/src/handlers/utils.ts

@@ -4,7 +4,9 @@ import { findNodeHandle as findNodeHandleRN, Platform } from 'react-native';
 import { ghQueueMicrotask } from '../ghQueueMicrotask';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 import { toArray } from '../utils';
+import type { HitSlop } from './gestureHandlerCommon';
 import { handlerIDToTag } from './handlersRegistry';
+import { normalizeHitSlop } from './hitSlop';
 
 function isConfigParam(param: unknown, name: string) {
   // param !== Object(param) returns false if `param` is a function
@@ -34,8 +36,8 @@ export function filterConfig(
     if (isConfigParam(value, key)) {
       if (key === 'simultaneousHandlers' || key === 'waitFor') {
         value = transformIntoHandlerTags(props[key]);
-      } else if (key === 'hitSlop' && typeof value !== 'object') {
-        value = { top: value, left: value, bottom: value, right: value };
+      } else if (key === 'hitSlop') {
+        value = normalizeHitSlop(value as HitSlop);
       }
       filteredConfig[key] = value;
     }

package/src/specs/RNGestureHandlerDetectorNativeComponent.ts

@@ -67,7 +67,7 @@ export interface NativeProps extends ViewProps {
     | undefined;
 
   handlerTags: CodegenTypes.Int32[];
-  moduleId: CodegenTypes.Int32;
+  moduleId?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
   virtualChildren: VirtualChildrenProps[];
 
   pointerEvents?: CodegenTypes.WithDefault<

package/src/specs/RNGestureHandlerRootViewNativeComponent.ts

@@ -7,7 +7,7 @@ export interface RootViewNativeProps extends ViewProps {
 }
 
 interface NativeProps extends ViewProps {
-  moduleId: CodegenTypes.Int32;
+  moduleId?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
   unstable_forceActive?: boolean;
 }
 

package/src/v3/components/Pressable.tsx

@@ -1,452 +1,32 @@
-import React, {
-  use,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import type {
-  Insets,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import { Platform } from 'react-native';
-
-import type {
-  PressableDimensions,
-  PressableEvent,
-  PressableProps,
-} from '../../components/Pressable/PressableProps';
-import {
-  getStatesConfig,
-  StateMachineEvent,
-} from '../../components/Pressable/stateDefinitions';
-import { PressableStateMachine } from '../../components/Pressable/StateMachine';
-import {
-  addInsets,
-  gestureToPressableEvent,
-  gestureTouchToPressableEvent,
-  isTouchWithinInset,
-  numberAsInset,
-  viewCenterToPressableEvent,
-} from '../../components/Pressable/utils';
-import { getTVProps } from '../../components/utils';
-import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
-import { useIsScreenReaderEnabled } from '../../useIsScreenReaderEnabled';
-import { INT32_MAX, isTestEnv } from '../../utils';
-import { GestureDetector } from '../detectors';
-import {
-  useHoverGesture,
-  useLongPressGesture,
-  useNativeGesture,
-  useSimultaneousGestures,
-} from '../hooks';
-import {
-  isKeyboardDismissingTap,
-  JSResponderContext,
-} from '../scrollViewInterop';
-import { PureNativeButton } from './GestureButtons';
-
-const DEFAULT_LONG_PRESS_DURATION = 500;
-const IS_TEST_ENV = isTestEnv();
-
+import React from 'react';
+
+import type { PressableProps } from '../../components/Pressable/PressableProps';
+import PressableWithTouchable from './PressableWithTouchable';
+import StatefulPressable from './StatefulPressable';
+
+/**
+ * `Pressable` dispatches between two implementations:
+ *
+ * - {@link StatefulPressable} — the state-machine engine, used whenever any of
+ *   the `simultaneousWith` / `requireToFail` / `block` relation props is passed,
+ *   since coordinating the press with an external gesture needs the composed
+ *   gesture recognizers.
+ * - {@link PressableWithTouchable} — the simpler engine built on the native
+ *   button `Touchable`, used for everything else (the common case).
+ *
+ * The choice is re-evaluated each render: toggling a relation prop at runtime
+ * swaps engines, which remounts and drops any in-progress press.
+ */
 const Pressable = (props: PressableProps) => {
-  const {
-    testOnly_pressed,
-    hitSlop,
-    pressRetentionOffset,
-    delayHoverIn,
-    delayHoverOut,
-    delayLongPress,
-    unstable_pressDelay,
-    onHoverIn,
-    onHoverOut,
-    onPress,
-    onPressIn,
-    onPressOut,
-    onLongPress,
-    onLayout,
-    style,
-    children,
-    android_disableSound,
-    android_ripple,
-    disabled,
-    accessible,
-    simultaneousWith,
-    requireToFail,
-    block,
-    ref,
-    ...remainingProps
-  } = props;
-
-  const [pressedState, setPressedState] = useState(testOnly_pressed ?? false);
-
-  const longPressTimeoutRef = useRef<number | null>(null);
-  const pressDelayTimeoutRef = useRef<number | null>(null);
-  const isOnPressAllowed = useRef<boolean>(true);
-  const jsResponderContext = use(JSResponderContext);
-  const isCurrentlyPressed = useRef<boolean>(false);
-  const dimensions = useRef<PressableDimensions>({
-    width: 0,
-    height: 0,
-  });
-
-  // When the touch that begins a press is the one dismissing the keyboard
-  // (keyboardShouldPersistTaps="never"), the press is swallowed to match RN's
-  // touchables.
-  const dropKeyboardTapRef = useRef<boolean | null>(null);
-
-  const normalizedHitSlop: Insets = useMemo(
-    () =>
-      typeof hitSlop === 'number'
-        ? numberAsInset(hitSlop)
-        : (hitSlop ?? numberAsInset(0)),
-    [hitSlop]
-  );
-  const normalizedPressRetentionOffset: Insets = useMemo(
-    () =>
-      typeof pressRetentionOffset === 'number'
-        ? numberAsInset(pressRetentionOffset)
-        : (pressRetentionOffset ?? {}),
-    [pressRetentionOffset]
-  );
-  const appliedHitSlop = addInsets(
-    normalizedHitSlop,
-    normalizedPressRetentionOffset
-  );
-
-  const cancelLongPress = useCallback(() => {
-    if (longPressTimeoutRef.current) {
-      clearTimeout(longPressTimeoutRef.current);
-      longPressTimeoutRef.current = null;
-      isOnPressAllowed.current = true;
-    }
-  }, []);
-
-  const cancelDelayedPress = useCallback(() => {
-    if (pressDelayTimeoutRef.current) {
-      clearTimeout(pressDelayTimeoutRef.current);
-      pressDelayTimeoutRef.current = null;
-    }
-  }, []);
-
-  const startLongPress = useCallback(
-    (event: PressableEvent) => {
-      if (onLongPress) {
-        cancelLongPress();
-        longPressTimeoutRef.current = setTimeout(() => {
-          isOnPressAllowed.current = false;
-          onLongPress(event);
-        }, delayLongPress ?? DEFAULT_LONG_PRESS_DURATION);
-      }
-    },
-    [onLongPress, cancelLongPress, delayLongPress]
-  );
-  const innerHandlePressIn = useCallback(
-    (event: PressableEvent) => {
-      onPressIn?.(event);
-      startLongPress(event);
-      setPressedState(true);
-      if (pressDelayTimeoutRef.current) {
-        clearTimeout(pressDelayTimeoutRef.current);
-        pressDelayTimeoutRef.current = null;
-      }
-    },
-    [onPressIn, startLongPress]
-  );
-
-  const handleFinalize = useCallback(() => {
-    isCurrentlyPressed.current = false;
-    dropKeyboardTapRef.current = null;
-    cancelLongPress();
-    cancelDelayedPress();
-    setPressedState(false);
-  }, [cancelDelayedPress, cancelLongPress]);
-
-  const captureKeyboardDismiss = useCallback(() => {
-    dropKeyboardTapRef.current ??= isKeyboardDismissingTap(jsResponderContext);
-  }, [jsResponderContext]);
-
-  const handlePressIn = useCallback(
-    (event: PressableEvent, skipBoundsCheck = false) => {
-      if (
-        !skipBoundsCheck &&
-        !isTouchWithinInset(
-          dimensions.current,
-          normalizedHitSlop,
-          event.nativeEvent.changedTouches.at(-1)
-        )
-      ) {
-        // Ignoring pressIn within pressRetentionOffset
-        return;
-      }
-
-      isCurrentlyPressed.current = true;
-      if (unstable_pressDelay) {
-        pressDelayTimeoutRef.current = setTimeout(() => {
-          innerHandlePressIn(event);
-        }, unstable_pressDelay);
-      } else {
-        innerHandlePressIn(event);
-      }
-    },
-    [innerHandlePressIn, normalizedHitSlop, unstable_pressDelay]
-  );
-
-  const handlePressOut = useCallback(
-    (event: PressableEvent, success: boolean = true) => {
-      if (!isCurrentlyPressed.current) {
-        // Some prop configurations may lead to handlePressOut being called mutliple times.
-        return;
-      }
-
-      isCurrentlyPressed.current = false;
-
-      if (pressDelayTimeoutRef.current) {
-        innerHandlePressIn(event);
-      }
-
-      onPressOut?.(event);
-
-      if (isOnPressAllowed.current && success) {
-        onPress?.(event);
-      }
-
-      handleFinalize();
-    },
-    [handleFinalize, innerHandlePressIn, onPress, onPressOut]
-  );
-
-  const stateMachine = useMemo(() => new PressableStateMachine(), []);
-  const isScreenReaderEnabled = useIsScreenReaderEnabled();
-
-  useEffect(() => {
-    const configuration = getStatesConfig(
-      handlePressIn,
-      handlePressOut,
-      isScreenReaderEnabled
-    );
-    stateMachine.setStates(configuration);
-  }, [handlePressIn, handlePressOut, stateMachine, isScreenReaderEnabled]);
-
-  const hoverInTimeout = useRef<number | null>(null);
-  const hoverOutTimeout = useRef<number | null>(null);
-
-  const hoverGesture = useHoverGesture({
-    manualActivation: true, // Prevents Hover blocking Native gesture on web
-    cancelsTouchesInView: false,
-    onBegin: (event) => {
-      if (hoverOutTimeout.current) {
-        clearTimeout(hoverOutTimeout.current);
-      }
-      if (delayHoverIn) {
-        hoverInTimeout.current = setTimeout(
-          () => onHoverIn?.(gestureToPressableEvent(event)),
-          delayHoverIn
-        );
-        return;
-      }
-      onHoverIn?.(gestureToPressableEvent(event));
-    },
-    onFinalize: (event) => {
-      if (hoverInTimeout.current) {
-        clearTimeout(hoverInTimeout.current);
-      }
-      if (delayHoverOut) {
-        hoverOutTimeout.current = setTimeout(
-          () => onHoverOut?.(gestureToPressableEvent(event)),
-          delayHoverOut
-        );
-        return;
-      }
-      onHoverOut?.(gestureToPressableEvent(event));
-    },
-    enabled: disabled !== true,
-    disableReanimated: true,
-    simultaneousWith,
-    block,
-    requireToFail,
-    hitSlop: appliedHitSlop,
-  });
-
-  const pressAndTouchGesture = useLongPressGesture({
-    minDuration: Platform.OS === 'web' ? 0 : INT32_MAX, // Long press handles finalize on web, thus it must activate right away
-    maxDistance: INT32_MAX, // Stops long press from cancelling on touch move
-    cancelsTouchesInView: false,
-    onTouchesDown: (event) => {
-      captureKeyboardDismiss();
-
-      if (dropKeyboardTapRef.current) {
-        return;
-      }
-
-      const pressableEvent = gestureTouchToPressableEvent(event);
-      stateMachine.handleEvent(
-        StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
-        pressableEvent
-      );
-    },
-    onTouchesUp: () => {
-      if (Platform.OS === 'android' && !isScreenReaderEnabled) {
-        // Prevents potential soft-locks
-        stateMachine.reset();
-        handleFinalize();
-      }
-    },
-    onTouchesCancel: (event) => {
-      const pressableEvent = gestureTouchToPressableEvent(event);
-      stateMachine.reset();
-      handlePressOut(pressableEvent, false);
-    },
-    onFinalize: (event) => {
-      if (Platform.OS !== 'web') {
-        return;
-      }
-
-      stateMachine.handleEvent(
-        event.canceled ? StateMachineEvent.CANCEL : StateMachineEvent.FINALIZE
-      );
-
-      handleFinalize();
-    },
-    enabled: disabled !== true,
-    disableReanimated: true,
-    simultaneousWith: simultaneousWith,
-    block: block,
-    requireToFail: requireToFail,
-    hitSlop: appliedHitSlop,
-  });
-
-  // RNButton is placed inside ButtonGesture to enable Android's ripple and to capture non-propagating events
-  const buttonGesture = useNativeGesture({
-    onTouchesCancel: (event) => {
-      if (Platform.OS !== 'macos' && Platform.OS !== 'web') {
-        // On MacOS cancel occurs in middle of gesture
-        // On Web cancel occurs on mouse move, which is unwanted
-        const pressableEvent = gestureTouchToPressableEvent(event);
-        stateMachine.reset();
-        handlePressOut(pressableEvent, false);
-      }
-    },
-    onBegin: () => {
-      captureKeyboardDismiss();
-
-      if (dropKeyboardTapRef.current) {
-        return;
-      }
-
-      if (Platform.isTV) {
-        // tvOS drives this native gesture from the focus-engine Select press.
-        // The press state machine is touch-based and never
-        // receives LONG_PRESS_TOUCHES_DOWN here, so bypass it and drive the press handlers directly.
-        // A focus-driven press has no coordinates, so skip the hit-slop bounds check entirely.
-        handlePressIn(viewCenterToPressableEvent(dimensions.current), true);
-        return;
-      }
-      if (Platform.OS === 'android' && isScreenReaderEnabled) {
-        stateMachine.handleEvent(
-          StateMachineEvent.NATIVE_BEGIN,
-          viewCenterToPressableEvent(dimensions.current)
-        );
-        return;
-      }
-      stateMachine.handleEvent(StateMachineEvent.NATIVE_BEGIN);
-    },
-    onActivate: () => {
-      if (!Platform.isTV && Platform.OS !== 'android') {
-        stateMachine.handleEvent(StateMachineEvent.NATIVE_START);
-      }
-    },
-    onFinalize: (event) => {
-      // On Web we use LongPress.onFinalize instead of Native.onFinalize,
-      // as Native cancels on mouse move, and LongPress does not.
-      if (Platform.OS === 'web') {
-        return;
-      }
-
-      if (Platform.isTV) {
-        handlePressOut(
-          viewCenterToPressableEvent(dimensions.current),
-          !event.canceled
-        );
-        handleFinalize();
-        return;
-      }
-
-      stateMachine.handleEvent(
-        event.canceled ? StateMachineEvent.CANCEL : StateMachineEvent.FINALIZE
-      );
-
-      handleFinalize();
-    },
-    enabled: disabled !== true,
-    disableReanimated: true,
-    simultaneousWith,
-    block,
-    requireToFail,
-    hitSlop: appliedHitSlop,
-    shouldActivateOnStart: Platform.OS === 'web',
-  });
-
-  const gesture = useSimultaneousGestures(
-    buttonGesture,
-    pressAndTouchGesture,
-    hoverGesture
-  );
-
-  // `cursor: 'pointer'` on `RNButton` crashes iOS
-  const pointerStyle: StyleProp<ViewStyle> =
-    Platform.OS === 'web' ? { cursor: 'pointer' } : {};
-
-  const styleProp =
-    typeof style === 'function' ? style({ pressed: pressedState }) : style;
-
-  const childrenProp =
-    typeof children === 'function'
-      ? children({ pressed: pressedState })
-      : children;
-
-  const rippleColor = useMemo(() => {
-    const defaultRippleColor = android_ripple ? undefined : 'transparent';
-    return android_ripple?.color ?? defaultRippleColor;
-  }, [android_ripple]);
-
-  const setDimensions = useCallback(
-    (event: LayoutChangeEvent) => {
-      onLayout?.(event);
-      dimensions.current = event.nativeEvent.layout;
-    },
-    [onLayout]
-  );
-
-  const tvProps = getTVProps(remainingProps);
-
-  return (
-    <GestureDetector gesture={gesture}>
-      <PureNativeButton
-        {...remainingProps}
-        ref={ref as React.Ref<React.ComponentRef<typeof PureNativeButton>>}
-        {...tvProps}
-        onLayout={setDimensions}
-        accessible={accessible !== false}
-        hitSlop={appliedHitSlop}
-        enabled={disabled !== true}
-        touchSoundDisabled={android_disableSound ?? undefined}
-        rippleColor={rippleColor}
-        rippleRadius={android_ripple?.radius ?? undefined}
-        style={[pointerStyle, styleProp]}
-        testOnly_onPress={IS_TEST_ENV ? onPress : undefined}
-        testOnly_onPressIn={IS_TEST_ENV ? onPressIn : undefined}
-        testOnly_onPressOut={IS_TEST_ENV ? onPressOut : undefined}
-        testOnly_onLongPress={IS_TEST_ENV ? onLongPress : undefined}>
-        {childrenProp}
-        {__DEV__ ? (
-          <PressabilityDebugView color="red" hitSlop={normalizedHitSlop} />
-        ) : null}
-      </PureNativeButton>
-    </GestureDetector>
+  const usesRelations =
+    props.simultaneousWith != null ||
+    props.requireToFail != null ||
+    props.block != null;
+
+  return usesRelations ? (
+    <StatefulPressable {...props} />
+  ) : (
+    <PressableWithTouchable {...props} />
   );
 };