react-native-gesture-handler 2.27.1 → 2.27.2

package/lib/typescript/components/GestureHandlerButton.web.js

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-export default React.forwardRef((props, ref) => <View ref={ref} accessibilityRole="button" {...props}/>);

package/lib/typescript/components/GestureHandlerRootView.android.js

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-import { maybeInitializeFabric } from '../init';
-import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
-import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';
-export default function GestureHandlerRootView({ style, ...rest }) {
-    // Try initialize fabric on the first render, at this point we can
-    // reliably check if fabric is enabled (the function contains a flag
-    // to make sure it's called only once)
-    maybeInitializeFabric();
-    return (<GestureHandlerRootViewContext.Provider value>
-      <GestureHandlerRootViewNativeComponent style={style ?? styles.container} {...rest}/>
-    </GestureHandlerRootViewContext.Provider>);
-}
-const styles = StyleSheet.create({
-    container: { flex: 1 },
-});

package/lib/typescript/components/GestureHandlerRootView.js

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { maybeInitializeFabric } from '../init';
-import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
-export default function GestureHandlerRootView({ style, ...rest }) {
-    // Try initialize fabric on the first render, at this point we can
-    // reliably check if fabric is enabled (the function contains a flag
-    // to make sure it's called only once)
-    maybeInitializeFabric();
-    return (<GestureHandlerRootViewContext.Provider value>
-      <View style={style ?? styles.container} {...rest}/>
-    </GestureHandlerRootViewContext.Provider>);
-}
-const styles = StyleSheet.create({
-    container: { flex: 1 },
-});

package/lib/typescript/components/GestureHandlerRootView.web.js

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
-export default function GestureHandlerRootView({ style, ...rest }) {
-    return (<GestureHandlerRootViewContext.Provider value>
-      <View style={style ?? styles.container} {...rest}/>
-    </GestureHandlerRootViewContext.Provider>);
-}
-const styles = StyleSheet.create({
-    container: { flex: 1 },
-});

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

@@ -1,231 +0,0 @@
-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.js

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

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

@@ -1,34 +0,0 @@
-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.js

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

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

@@ -1,104 +0,0 @@
-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.js

@@ -1,80 +0,0 @@
-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, };