react-native-gesture-handler 2.27.0 → 2.27.1

package/lib/typescript/components/Pressable/Pressable.js

@@ -0,0 +1,231 @@
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { GestureObjects as Gesture } from '../../handlers/gestures/gestureObjects';
+import { GestureDetector } from '../../handlers/gestures/GestureDetector';
+import { Platform, processColor, } from 'react-native';
+import NativeButton from '../GestureHandlerButton';
+import { gestureToPressableEvent, addInsets, numberAsInset, gestureTouchToPressableEvent, isTouchWithinInset, } from './utils';
+import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
+import { INT32_MAX, isFabric, isTestEnv } from '../../utils';
+import { applyRelationProp, } from '../utils';
+import { getConfiguredStateMachine, StateMachineEvent, } from './stateDefinitions';
+const DEFAULT_LONG_PRESS_DURATION = 500;
+const IS_TEST_ENV = isTestEnv();
+let IS_FABRIC = null;
+const Pressable = (props) => {
+    const { ref, testOnly_pressed, hitSlop, pressRetentionOffset, delayHoverIn, delayHoverOut, delayLongPress, unstable_pressDelay, onHoverIn, onHoverOut, onPress, onPressIn, onPressOut, onLongPress, style, children, android_disableSound, android_ripple, disabled, accessible, simultaneousWithExternalGesture, requireExternalGestureToFail, blocksExternalGesture, dimensionsAfterResize, ...remainingProps } = props;
+    const relationProps = {
+        simultaneousWithExternalGesture,
+        requireExternalGestureToFail,
+        blocksExternalGesture,
+    };
+    // used only if `ref` is undefined
+    const fallbackRef = useRef(null);
+    const [pressedState, setPressedState] = useState(testOnly_pressed ?? false);
+    const longPressTimeoutRef = useRef(null);
+    const pressDelayTimeoutRef = useRef(null);
+    const isOnPressAllowed = useRef(true);
+    const isCurrentlyPressed = useRef(false);
+    const dimensions = useRef({ width: 0, height: 0 });
+    const normalizedHitSlop = useMemo(() => typeof hitSlop === 'number' ? numberAsInset(hitSlop) : (hitSlop ?? {}), [hitSlop]);
+    const normalizedPressRetentionOffset = useMemo(() => typeof pressRetentionOffset === 'number'
+        ? numberAsInset(pressRetentionOffset)
+        : (pressRetentionOffset ?? {}), [pressRetentionOffset]);
+    const appliedHitSlop = addInsets(normalizedHitSlop, normalizedPressRetentionOffset);
+    useLayoutEffect(() => {
+        if (dimensionsAfterResize) {
+            dimensions.current = dimensionsAfterResize;
+        }
+        else {
+            requestAnimationFrame(() => {
+                (ref ?? fallbackRef).current?.measure((_x, _y, width, height) => {
+                    dimensions.current = {
+                        width,
+                        height,
+                    };
+                });
+            });
+        }
+    }, [dimensionsAfterResize, ref]);
+    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) => {
+        if (onLongPress) {
+            cancelLongPress();
+            longPressTimeoutRef.current = setTimeout(() => {
+                isOnPressAllowed.current = false;
+                onLongPress(event);
+            }, delayLongPress ?? DEFAULT_LONG_PRESS_DURATION);
+        }
+    }, [onLongPress, cancelLongPress, delayLongPress]);
+    const innerHandlePressIn = useCallback((event) => {
+        onPressIn?.(event);
+        startLongPress(event);
+        setPressedState(true);
+        if (pressDelayTimeoutRef.current) {
+            clearTimeout(pressDelayTimeoutRef.current);
+            pressDelayTimeoutRef.current = null;
+        }
+    }, [onPressIn, startLongPress]);
+    const handleFinalize = useCallback(() => {
+        isCurrentlyPressed.current = false;
+        cancelLongPress();
+        cancelDelayedPress();
+        setPressedState(false);
+    }, [cancelDelayedPress, cancelLongPress]);
+    const handlePressIn = useCallback((event) => {
+        if (!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, success = 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(() => getConfiguredStateMachine(handlePressIn, handlePressOut), [handlePressIn, handlePressOut]);
+    const hoverInTimeout = useRef(null);
+    const hoverOutTimeout = useRef(null);
+    const hoverGesture = useMemo(() => Gesture.Hover()
+        .manualActivation(true) // Prevents Hover blocking Gesture.Native() 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));
+    }), [delayHoverIn, delayHoverOut, onHoverIn, onHoverOut]);
+    const pressAndTouchGesture = useMemo(() => Gesture.LongPress()
+        .minDuration(INT32_MAX) // Stops long press from blocking Gesture.Native()
+        .maxDistance(INT32_MAX) // Stops long press from cancelling on touch move
+        .cancelsTouchesInView(false)
+        .onTouchesDown((event) => {
+        const pressableEvent = gestureTouchToPressableEvent(event);
+        stateMachine.handleEvent(StateMachineEvent.LONG_PRESS_TOUCHES_DOWN, pressableEvent);
+    })
+        .onTouchesUp(() => {
+        if (Platform.OS === 'android') {
+            // Prevents potential soft-locks
+            stateMachine.reset();
+            handleFinalize();
+        }
+    })
+        .onTouchesCancelled((event) => {
+        const pressableEvent = gestureTouchToPressableEvent(event);
+        stateMachine.reset();
+        handlePressOut(pressableEvent, false);
+    })
+        .onFinalize(() => {
+        if (Platform.OS === 'web') {
+            stateMachine.handleEvent(StateMachineEvent.FINALIZE);
+            handleFinalize();
+        }
+    }), [stateMachine, handleFinalize, handlePressOut]);
+    // RNButton is placed inside ButtonGesture to enable Android's ripple and to capture non-propagating events
+    const buttonGesture = useMemo(() => Gesture.Native()
+        .onTouchesCancelled((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(() => {
+        stateMachine.handleEvent(StateMachineEvent.NATIVE_BEGIN);
+    })
+        .onStart(() => {
+        if (Platform.OS !== 'android') {
+            // Gesture.Native().onStart() is broken with Android + hitSlop
+            stateMachine.handleEvent(StateMachineEvent.NATIVE_START);
+        }
+    })
+        .onFinalize(() => {
+        if (Platform.OS !== 'web') {
+            // On Web we use LongPress().onFinalize() instead of Native().onFinalize(),
+            // as Native cancels on mouse move, and LongPress does not.
+            stateMachine.handleEvent(StateMachineEvent.FINALIZE);
+            handleFinalize();
+        }
+    }), [stateMachine, handlePressOut, handleFinalize]);
+    const isPressableEnabled = disabled !== true;
+    const gestures = [buttonGesture, pressAndTouchGesture, hoverGesture];
+    for (const gesture of gestures) {
+        gesture.enabled(isPressableEnabled);
+        gesture.runOnJS(true);
+        gesture.hitSlop(appliedHitSlop);
+        gesture.shouldCancelWhenOutside(Platform.OS !== 'web');
+        Object.entries(relationProps).forEach(([relationName, relation]) => {
+            applyRelationProp(gesture, relationName, relation);
+        });
+    }
+    const gesture = Gesture.Simultaneous(...gestures);
+    // `cursor: 'pointer'` on `RNButton` crashes iOS
+    const pointerStyle = 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(() => {
+        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 (<GestureDetector gesture={gesture}>
+      <NativeButton {...remainingProps} ref={ref ?? fallbackRef} accessible={accessible !== false} hitSlop={appliedHitSlop} enabled={isPressableEnabled} 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}
+      </NativeButton>
+    </GestureDetector>);
+};
+export default Pressable;

package/lib/typescript/components/Pressable/PressableProps.d.ts

@@ -0,0 +1,138 @@
+import { AccessibilityProps, ViewProps, Insets, StyleProp, ViewStyle, PressableStateCallbackType as RNPressableStateCallbackType, PressableAndroidRippleConfig as RNPressableAndroidRippleConfig, View } from 'react-native';
+import { RelationPropType } from '../utils';
+export type PressableDimensions = {
+    width: number;
+    height: number;
+};
+export type PressableStateCallbackType = RNPressableStateCallbackType;
+export type PressableAndroidRippleConfig = RNPressableAndroidRippleConfig;
+export type InnerPressableEvent = {
+    changedTouches: InnerPressableEvent[];
+    identifier: number;
+    locationX: number;
+    locationY: number;
+    pageX: number;
+    pageY: number;
+    target: number;
+    timestamp: number;
+    touches: InnerPressableEvent[];
+    force?: number;
+};
+export type PressableEvent = {
+    nativeEvent: InnerPressableEvent;
+};
+export interface PressableProps extends AccessibilityProps, Omit<ViewProps, 'children' | 'style' | 'hitSlop'> {
+    /**
+     * Called when the hover is activated to provide visual feedback.
+     */
+    onHoverIn?: null | ((event: PressableEvent) => void);
+    /**
+     * Called when the hover is deactivated to undo visual feedback.
+     */
+    onHoverOut?: null | ((event: PressableEvent) => void);
+    /**
+     * Called when a single tap gesture is detected.
+     */
+    onPress?: null | ((event: PressableEvent) => void);
+    /**
+     * Called when a touch is engaged before `onPress`.
+     */
+    onPressIn?: null | ((event: PressableEvent) => void);
+    /**
+     * Called when a touch is released before `onPress`.
+     */
+    onPressOut?: null | ((event: PressableEvent) => void);
+    /**
+     * Called when a long-tap gesture is detected.
+     */
+    onLongPress?: null | ((event: PressableEvent) => void);
+    /**
+     * A reference to the pressable element.
+     */
+    ref?: React.RefObject<View>;
+    /**
+     * Either children or a render prop that receives a boolean reflecting whether
+     * the component is currently pressed.
+     */
+    children?: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode);
+    /**
+     * Whether a press gesture can be interrupted by a parent gesture such as a
+     * scroll event. Defaults to true.
+     */
+    cancelable?: null | boolean;
+    /**
+     * Duration to wait after hover in before calling `onHoverIn`.
+     * @platform web macos
+     *
+     * NOTE: not present in RN docs
+     */
+    delayHoverIn?: number | null;
+    /**
+     * Duration to wait after hover out before calling `onHoverOut`.
+     * @platform web macos
+     *
+     * NOTE: not present in RN docs
+     */
+    delayHoverOut?: number | null;
+    /**
+     * Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+     */
+    delayLongPress?: null | number;
+    /**
+     * Whether the press behavior is disabled.
+     */
+    disabled?: null | boolean;
+    /**
+     * Additional distance outside of this view in which a press is detected.
+     */
+    hitSlop?: null | Insets | number;
+    /**
+     * Additional distance outside of this view in which a touch is considered a
+     * press before `onPressOut` is triggered.
+     */
+    pressRetentionOffset?: null | Insets | number;
+    /**
+     * If true, doesn't play system sound on touch.
+     * @platform android
+     */
+    android_disableSound?: null | boolean;
+    /**
+     * Enables the Android ripple effect and configures its color.
+     * @platform android
+     */
+    android_ripple?: null | PressableAndroidRippleConfig;
+    /**
+     * Used only for documentation or testing (e.g. snapshot testing).
+     */
+    testOnly_pressed?: null | boolean;
+    /**
+     * Either view styles or a function that receives a boolean reflecting whether
+     * the component is currently pressed and returns view styles.
+     */
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+    /**
+     * Duration (in milliseconds) to wait after press down before calling onPressIn.
+     */
+    unstable_pressDelay?: number;
+    /**
+     * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+     * used with the Pressable's gesture handlers.
+     */
+    simultaneousWithExternalGesture?: RelationPropType;
+    /**
+     * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+     * used with the Pressable's gesture handlers.
+     */
+    requireExternalGestureToFail?: RelationPropType;
+    /**
+     * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+     * used with the Pressable's gesture handlers.
+     */
+    blocksExternalGesture?: RelationPropType;
+    /**
+     * Defines the dimensions of the Pressable after it's been resized.
+     * This property does not affect Pressable's physical appearance.
+     * Required when the Pressable is resized **and** uses pressRetentionOffset.
+     */
+    dimensionsAfterResize?: PressableDimensions;
+}

package/lib/typescript/components/Pressable/PressableProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PressableProps.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressable/PressableProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,EACT,0BAA0B,IAAI,4BAA4B,EAC1D,4BAA4B,IAAI,8BAA8B,EAC9D,IAAI,EACL,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,MAAM,MAAM,0BAA0B,GAAG,4BAA4B,CAAC;AACtE,MAAM,MAAM,4BAA4B,GAAG,8BAA8B,CAAC;AAE1E,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,mBAAmB,EAAE,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAAE,WAAW,EAAE,mBAAmB,CAAA;CAAE,CAAC;AAElE,MAAM,WAAW,cACf,SAAQ,kBAAkB,EACxB,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC,CAAC;IAEtD;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC,CAAC;IAEnD;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC,CAAC;IAEtD;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC,CAAC;IAEvD;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAE7D;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE9B;;OAEG;IACH,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAE/B;;OAEG;IACH,QAAQ,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAEjC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAE9C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC;IAEtC;;;OAGG;IACH,cAAc,CAAC,EAAE,IAAI,GAAG,4BAA4B,CAAC;IAErD;;OAEG;IACH,gBAAgB,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EACF,SAAS,CAAC,SAAS,CAAC,GACpB,CAAC,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IAElE;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,+BAA+B,CAAC,EAAE,gBAAgB,CAAC;IAEnD;;;OAGG;IACH,4BAA4B,CAAC,EAAE,gBAAgB,CAAC;IAEhD;;;OAGG;IACH,qBAAqB,CAAC,EAAE,gBAAgB,CAAC;IAEzC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,mBAAmB,CAAC;CAC7C"}

package/lib/typescript/components/Pressable/PressableProps.js

@@ -0,0 +1 @@
+export {};

package/lib/typescript/components/Pressable/StateMachine.d.ts

@@ -0,0 +1,14 @@
+import { PressableEvent } from './PressableProps';
+interface StateDefinition {
+    eventName: string;
+    callback?: (event: PressableEvent) => void;
+}
+declare class PressableStateMachine {
+    private states;
+    private currentStepIndex;
+    private eventPayload;
+    constructor(steps: StateDefinition[]);
+    reset(): void;
+    handleEvent(eventName: string, eventPayload?: PressableEvent): void;
+}
+export { PressableStateMachine };

package/lib/typescript/components/Pressable/StateMachine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateMachine.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressable/StateMachine.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,UAAU,eAAe;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAED,cAAM,qBAAqB;IACzB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,YAAY,CAAwB;gBAEhC,KAAK,EAAE,eAAe,EAAE;IAM7B,KAAK;IAKL,WAAW,CAAC,SAAS,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,cAAc;CAuBpE;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/lib/typescript/components/Pressable/StateMachine.js

@@ -0,0 +1,34 @@
+class PressableStateMachine {
+    states;
+    currentStepIndex;
+    eventPayload;
+    constructor(steps) {
+        this.states = steps;
+        this.currentStepIndex = 0;
+        this.eventPayload = null;
+    }
+    reset() {
+        this.currentStepIndex = 0;
+        this.eventPayload = null;
+    }
+    handleEvent(eventName, eventPayload) {
+        const step = this.states[this.currentStepIndex];
+        this.eventPayload = eventPayload || this.eventPayload;
+        if (step.eventName !== eventName) {
+            if (this.currentStepIndex > 0) {
+                // retry with position at index 0
+                this.reset();
+                this.handleEvent(eventName, eventPayload);
+            }
+            return;
+        }
+        if (this.eventPayload && step.callback) {
+            step.callback(this.eventPayload);
+        }
+        this.currentStepIndex++;
+        if (this.currentStepIndex === this.states.length) {
+            this.reset();
+        }
+    }
+}
+export { PressableStateMachine };

package/lib/typescript/components/Pressable/index.d.ts

@@ -0,0 +1,2 @@
+export type { PressableProps, PressableStateCallbackType, } from './PressableProps';
+export { default } from './Pressable';

package/lib/typescript/components/Pressable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressable/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,cAAc,EACd,0BAA0B,GAC3B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/lib/typescript/components/Pressable/index.js

@@ -0,0 +1 @@
+export { default } from './Pressable';

package/lib/typescript/components/Pressable/stateDefinitions.d.ts

@@ -0,0 +1,9 @@
+import { PressableEvent } from './PressableProps';
+import { PressableStateMachine } from './StateMachine';
+export declare enum StateMachineEvent {
+    NATIVE_BEGIN = "nativeBegin",
+    NATIVE_START = "nativeStart",
+    FINALIZE = "finalize",
+    LONG_PRESS_TOUCHES_DOWN = "longPressTouchesDown"
+}
+export declare function getConfiguredStateMachine(handlePressIn: (event: PressableEvent) => void, handlePressOut: (event: PressableEvent) => void): PressableStateMachine;

package/lib/typescript/components/Pressable/stateDefinitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateDefinitions.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressable/stateDefinitions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,oBAAY,iBAAiB;IAC3B,YAAY,gBAAgB;IAC5B,YAAY,gBAAgB;IAC5B,QAAQ,aAAa;IACrB,uBAAuB,yBAAyB;CACjD;AAmGD,wBAAgB,yBAAyB,CACvC,aAAa,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,EAC9C,cAAc,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,yBAchD"}

package/lib/typescript/components/Pressable/stateDefinitions.js

@@ -0,0 +1,104 @@
+import { Platform } from 'react-native';
+import { PressableStateMachine } from './StateMachine';
+export var StateMachineEvent;
+(function (StateMachineEvent) {
+    StateMachineEvent["NATIVE_BEGIN"] = "nativeBegin";
+    StateMachineEvent["NATIVE_START"] = "nativeStart";
+    StateMachineEvent["FINALIZE"] = "finalize";
+    StateMachineEvent["LONG_PRESS_TOUCHES_DOWN"] = "longPressTouchesDown";
+})(StateMachineEvent || (StateMachineEvent = {}));
+function getAndroidStateMachine(handlePressIn, handlePressOut) {
+    return new PressableStateMachine([
+        {
+            eventName: StateMachineEvent.NATIVE_BEGIN,
+        },
+        {
+            eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+            callback: handlePressIn,
+        },
+        {
+            eventName: StateMachineEvent.FINALIZE,
+            callback: handlePressOut,
+        },
+    ]);
+}
+function getIosStateMachine(handlePressIn, handlePressOut) {
+    return new PressableStateMachine([
+        {
+            eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+        },
+        {
+            eventName: StateMachineEvent.NATIVE_START,
+            callback: handlePressIn,
+        },
+        {
+            eventName: StateMachineEvent.FINALIZE,
+            callback: handlePressOut,
+        },
+    ]);
+}
+function getWebStateMachine(handlePressIn, handlePressOut) {
+    return new PressableStateMachine([
+        {
+            eventName: StateMachineEvent.NATIVE_BEGIN,
+        },
+        {
+            eventName: StateMachineEvent.NATIVE_START,
+        },
+        {
+            eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+            callback: handlePressIn,
+        },
+        {
+            eventName: StateMachineEvent.FINALIZE,
+            callback: handlePressOut,
+        },
+    ]);
+}
+function getMacosStateMachine(handlePressIn, handlePressOut) {
+    return new PressableStateMachine([
+        {
+            eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+        },
+        {
+            eventName: StateMachineEvent.NATIVE_BEGIN,
+            callback: handlePressIn,
+        },
+        {
+            eventName: StateMachineEvent.NATIVE_START,
+        },
+        {
+            eventName: StateMachineEvent.FINALIZE,
+            callback: handlePressOut,
+        },
+    ]);
+}
+function getUniversalStateMachine(handlePressIn, handlePressOut) {
+    return new PressableStateMachine([
+        {
+            eventName: StateMachineEvent.FINALIZE,
+            callback: (event) => {
+                handlePressIn(event);
+                handlePressOut(event);
+            },
+        },
+    ]);
+}
+export function getConfiguredStateMachine(handlePressIn, handlePressOut) {
+    if (Platform.OS === 'android') {
+        return getAndroidStateMachine(handlePressIn, handlePressOut);
+    }
+    else if (Platform.OS === 'ios') {
+        return getIosStateMachine(handlePressIn, handlePressOut);
+    }
+    else if (Platform.OS === 'web') {
+        return getWebStateMachine(handlePressIn, handlePressOut);
+    }
+    else if (Platform.OS === 'macos') {
+        return getMacosStateMachine(handlePressIn, handlePressOut);
+    }
+    else {
+        // Unknown platform - using minimal universal setup.
+        return getUniversalStateMachine(handlePressIn, handlePressOut);
+    }
+}

package/lib/typescript/components/Pressable/utils.d.ts

@@ -0,0 +1,10 @@
+import { Insets } from 'react-native';
+import { HoverGestureHandlerEventPayload, LongPressGestureHandlerEventPayload } from '../../handlers/GestureHandlerEventPayload';
+import { GestureStateChangeEvent, GestureTouchEvent } from '../../handlers/gestureHandlerCommon';
+import { PressableDimensions, InnerPressableEvent, PressableEvent } from './PressableProps';
+declare const numberAsInset: (value: number) => Insets;
+declare const addInsets: (a: Insets, b: Insets) => Insets;
+declare const isTouchWithinInset: (dimensions: PressableDimensions, inset: Insets, touch?: InnerPressableEvent) => boolean;
+declare const gestureToPressableEvent: (event: GestureStateChangeEvent<HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload>) => PressableEvent;
+declare const gestureTouchToPressableEvent: (event: GestureTouchEvent) => PressableEvent;
+export { numberAsInset, addInsets, isTouchWithinInset, gestureToPressableEvent, gestureTouchToPressableEvent, };

package/lib/typescript/components/Pressable/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressable/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EACL,+BAA+B,EAC/B,mCAAmC,EACpC,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAEL,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACf,MAAM,kBAAkB,CAAC;AAE1B,QAAA,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAKrC,CAAC;AAEH,QAAA,MAAM,SAAS,GAAI,GAAG,MAAM,EAAE,GAAG,MAAM,KAAG,MAKxC,CAAC;AAoCH,QAAA,MAAM,kBAAkB,GACtB,YAAY,mBAAmB,EAC/B,OAAO,MAAM,EACb,QAAQ,mBAAmB,YAKgB,CAAC;AAE9C,QAAA,MAAM,uBAAuB,GAC3B,OAAO,uBAAuB,CAC5B,+BAA+B,GAAG,mCAAmC,CACtE,KACA,cAsBF,CAAC;AAEF,QAAA,MAAM,4BAA4B,GAChC,OAAO,iBAAiB,KACvB,cA2BF,CAAC;AAEF,OAAO,EACL,aAAa,EACb,SAAS,EACT,kBAAkB,EAClB,uBAAuB,EACvB,4BAA4B,GAC7B,CAAC"}

package/lib/typescript/components/Pressable/utils.js

@@ -0,0 +1,80 @@
+const numberAsInset = (value) => ({
+    left: value,
+    right: value,
+    top: value,
+    bottom: value,
+});
+const addInsets = (a, b) => ({
+    left: (a.left ?? 0) + (b.left ?? 0),
+    right: (a.right ?? 0) + (b.right ?? 0),
+    top: (a.top ?? 0) + (b.top ?? 0),
+    bottom: (a.bottom ?? 0) + (b.bottom ?? 0),
+});
+const touchDataToPressEvent = (data, timestamp, targetId) => ({
+    identifier: data.id,
+    locationX: data.x,
+    locationY: data.y,
+    pageX: data.absoluteX,
+    pageY: data.absoluteY,
+    target: targetId,
+    timestamp: timestamp,
+    touches: [], // Always empty - legacy compatibility
+    changedTouches: [], // Always empty - legacy compatibility
+});
+const gestureToPressEvent = (event, timestamp, targetId) => ({
+    identifier: event.handlerTag,
+    locationX: event.x,
+    locationY: event.y,
+    pageX: event.absoluteX,
+    pageY: event.absoluteY,
+    target: targetId,
+    timestamp: timestamp,
+    touches: [], // Always empty - legacy compatibility
+    changedTouches: [], // Always empty - legacy compatibility
+});
+const isTouchWithinInset = (dimensions, inset, touch) => (touch?.locationX ?? 0) < (inset.right ?? 0) + dimensions.width &&
+    (touch?.locationY ?? 0) < (inset.bottom ?? 0) + dimensions.height &&
+    (touch?.locationX ?? 0) > -(inset.left ?? 0) &&
+    (touch?.locationY ?? 0) > -(inset.top ?? 0);
+const gestureToPressableEvent = (event) => {
+    const timestamp = Date.now();
+    // As far as I can see, there isn't a conventional way of getting targetId with the data we get
+    const targetId = 0;
+    const pressEvent = gestureToPressEvent(event, timestamp, targetId);
+    return {
+        nativeEvent: {
+            touches: [pressEvent],
+            changedTouches: [pressEvent],
+            identifier: pressEvent.identifier,
+            locationX: event.x,
+            locationY: event.y,
+            pageX: event.absoluteX,
+            pageY: event.absoluteY,
+            target: targetId,
+            timestamp: timestamp,
+            force: undefined,
+        },
+    };
+};
+const gestureTouchToPressableEvent = (event) => {
+    const timestamp = Date.now();
+    // As far as I can see, there isn't a conventional way of getting targetId with the data we get
+    const targetId = 0;
+    const touchesList = event.allTouches.map((touch) => touchDataToPressEvent(touch, timestamp, targetId));
+    const changedTouchesList = event.changedTouches.map((touch) => touchDataToPressEvent(touch, timestamp, targetId));
+    return {
+        nativeEvent: {
+            touches: touchesList,
+            changedTouches: changedTouchesList,
+            identifier: event.handlerTag,
+            locationX: event.allTouches.at(0)?.x ?? -1,
+            locationY: event.allTouches.at(0)?.y ?? -1,
+            pageX: event.allTouches.at(0)?.absoluteX ?? -1,
+            pageY: event.allTouches.at(0)?.absoluteY ?? -1,
+            target: targetId,
+            timestamp: timestamp,
+            force: undefined,
+        },
+    };
+};
+export { numberAsInset, addInsets, isTouchWithinInset, gestureToPressableEvent, gestureTouchToPressableEvent, };