react-native-gesture-handler 2.27.0 → 2.27.1

package/lib/typescript/components/Swipeable.js

@@ -0,0 +1,287 @@
+// Similarily to the DrawerLayout component this deserves to be put in a
+// separate repo. Although, keeping it here for the time being will allow us to
+// move faster and fix possible issues quicker
+import * as React from 'react';
+import { Component } from 'react';
+import { Animated, StyleSheet, View, I18nManager, } from 'react-native';
+import { PanGestureHandler, } from '../handlers/PanGestureHandler';
+import { TapGestureHandler } from '../handlers/TapGestureHandler';
+import { State } from '../State';
+const DRAG_TOSS = 0.05;
+/**
+ * @deprecated use Reanimated version of Swipeable instead
+ *
+ * This component allows for implementing swipeable rows or similar interaction.
+ */
+export default class Swipeable extends Component {
+    static defaultProps = {
+        friction: 1,
+        overshootFriction: 1,
+        useNativeAnimations: true,
+    };
+    constructor(props) {
+        super(props);
+        const dragX = new Animated.Value(0);
+        this.state = {
+            dragX,
+            rowTranslation: new Animated.Value(0),
+            rowState: 0,
+            leftWidth: undefined,
+            rightOffset: undefined,
+            rowWidth: undefined,
+        };
+        this.updateAnimatedEvent(props, this.state);
+        this.onGestureEvent = Animated.event([{ nativeEvent: { translationX: dragX } }], { useNativeDriver: props.useNativeAnimations });
+    }
+    shouldComponentUpdate(props, state) {
+        if (this.props.friction !== props.friction ||
+            this.props.overshootLeft !== props.overshootLeft ||
+            this.props.overshootRight !== props.overshootRight ||
+            this.props.overshootFriction !== props.overshootFriction ||
+            this.state.leftWidth !== state.leftWidth ||
+            this.state.rightOffset !== state.rightOffset ||
+            this.state.rowWidth !== state.rowWidth) {
+            this.updateAnimatedEvent(props, state);
+        }
+        return true;
+    }
+    onGestureEvent;
+    transX;
+    showLeftAction;
+    leftActionTranslate;
+    showRightAction;
+    rightActionTranslate;
+    updateAnimatedEvent = (props, state) => {
+        const { friction, overshootFriction } = props;
+        const { dragX, rowTranslation, leftWidth = 0, rowWidth = 0 } = state;
+        const { rightOffset = rowWidth } = state;
+        const rightWidth = Math.max(0, rowWidth - rightOffset);
+        const { overshootLeft = leftWidth > 0, overshootRight = rightWidth > 0 } = props;
+        const transX = Animated.add(rowTranslation, dragX.interpolate({
+            inputRange: [0, friction],
+            outputRange: [0, 1],
+        })).interpolate({
+            inputRange: [-rightWidth - 1, -rightWidth, leftWidth, leftWidth + 1],
+            outputRange: [
+                -rightWidth - (overshootRight ? 1 / overshootFriction : 0),
+                -rightWidth,
+                leftWidth,
+                leftWidth + (overshootLeft ? 1 / overshootFriction : 0),
+            ],
+        });
+        this.transX = transX;
+        this.showLeftAction =
+            leftWidth > 0
+                ? transX.interpolate({
+                    inputRange: [-1, 0, leftWidth],
+                    outputRange: [0, 0, 1],
+                })
+                : new Animated.Value(0);
+        this.leftActionTranslate = this.showLeftAction.interpolate({
+            inputRange: [0, Number.MIN_VALUE],
+            outputRange: [-10000, 0],
+            extrapolate: 'clamp',
+        });
+        this.showRightAction =
+            rightWidth > 0
+                ? transX.interpolate({
+                    inputRange: [-rightWidth, 0, 1],
+                    outputRange: [1, 0, 0],
+                })
+                : new Animated.Value(0);
+        this.rightActionTranslate = this.showRightAction.interpolate({
+            inputRange: [0, Number.MIN_VALUE],
+            outputRange: [-10000, 0],
+            extrapolate: 'clamp',
+        });
+    };
+    onTapHandlerStateChange = ({ nativeEvent, }) => {
+        if (nativeEvent.oldState === State.ACTIVE) {
+            this.close();
+        }
+    };
+    onHandlerStateChange = (ev) => {
+        if (ev.nativeEvent.oldState === State.ACTIVE) {
+            this.handleRelease(ev);
+        }
+        if (ev.nativeEvent.state === State.ACTIVE) {
+            const { velocityX, translationX: dragX } = ev.nativeEvent;
+            const { rowState } = this.state;
+            const { friction } = this.props;
+            const translationX = (dragX + DRAG_TOSS * velocityX) / friction;
+            const direction = rowState === -1
+                ? 'right'
+                : rowState === 1
+                    ? 'left'
+                    : translationX > 0
+                        ? 'left'
+                        : 'right';
+            if (rowState === 0) {
+                this.props.onSwipeableOpenStartDrag?.(direction);
+            }
+            else {
+                this.props.onSwipeableCloseStartDrag?.(direction);
+            }
+        }
+    };
+    handleRelease = (ev) => {
+        const { velocityX, translationX: dragX } = ev.nativeEvent;
+        const { leftWidth = 0, rowWidth = 0, rowState } = this.state;
+        const { rightOffset = rowWidth } = this.state;
+        const rightWidth = rowWidth - rightOffset;
+        const { friction, leftThreshold = leftWidth / 2, rightThreshold = rightWidth / 2, } = this.props;
+        const startOffsetX = this.currentOffset() + dragX / friction;
+        const translationX = (dragX + DRAG_TOSS * velocityX) / friction;
+        let toValue = 0;
+        if (rowState === 0) {
+            if (translationX > leftThreshold) {
+                toValue = leftWidth;
+            }
+            else if (translationX < -rightThreshold) {
+                toValue = -rightWidth;
+            }
+        }
+        else if (rowState === 1) {
+            // Swiped to left
+            if (translationX > -leftThreshold) {
+                toValue = leftWidth;
+            }
+        }
+        else {
+            // Swiped to right
+            if (translationX < rightThreshold) {
+                toValue = -rightWidth;
+            }
+        }
+        this.animateRow(startOffsetX, toValue, velocityX / friction);
+    };
+    animateRow = (fromValue, toValue, velocityX) => {
+        const { dragX, rowTranslation } = this.state;
+        dragX.setValue(0);
+        rowTranslation.setValue(fromValue);
+        this.setState({ rowState: Math.sign(toValue) });
+        Animated.spring(rowTranslation, {
+            restSpeedThreshold: 1.7,
+            restDisplacementThreshold: 0.4,
+            velocity: velocityX,
+            bounciness: 0,
+            toValue,
+            useNativeDriver: this.props.useNativeAnimations,
+            ...this.props.animationOptions,
+        }).start(({ finished }) => {
+            if (finished) {
+                if (toValue > 0) {
+                    this.props.onSwipeableLeftOpen?.();
+                    this.props.onSwipeableOpen?.('left', this);
+                }
+                else if (toValue < 0) {
+                    this.props.onSwipeableRightOpen?.();
+                    this.props.onSwipeableOpen?.('right', this);
+                }
+                else {
+                    const closingDirection = fromValue > 0 ? 'left' : 'right';
+                    this.props.onSwipeableClose?.(closingDirection, this);
+                }
+            }
+        });
+        if (toValue > 0) {
+            this.props.onSwipeableLeftWillOpen?.();
+            this.props.onSwipeableWillOpen?.('left');
+        }
+        else if (toValue < 0) {
+            this.props.onSwipeableRightWillOpen?.();
+            this.props.onSwipeableWillOpen?.('right');
+        }
+        else {
+            const closingDirection = fromValue > 0 ? 'left' : 'right';
+            this.props.onSwipeableWillClose?.(closingDirection);
+        }
+    };
+    onRowLayout = ({ nativeEvent }) => {
+        this.setState({ rowWidth: nativeEvent.layout.width });
+    };
+    currentOffset = () => {
+        const { leftWidth = 0, rowWidth = 0, rowState } = this.state;
+        const { rightOffset = rowWidth } = this.state;
+        const rightWidth = rowWidth - rightOffset;
+        if (rowState === 1) {
+            return leftWidth;
+        }
+        else if (rowState === -1) {
+            return -rightWidth;
+        }
+        return 0;
+    };
+    close = () => {
+        this.animateRow(this.currentOffset(), 0);
+    };
+    // eslint-disable-next-line @eslint-react/no-unused-class-component-members
+    openLeft = () => {
+        const { leftWidth = 0 } = this.state;
+        this.animateRow(this.currentOffset(), leftWidth);
+    };
+    // eslint-disable-next-line @eslint-react/no-unused-class-component-members
+    openRight = () => {
+        const { rowWidth = 0 } = this.state;
+        const { rightOffset = rowWidth } = this.state;
+        const rightWidth = rowWidth - rightOffset;
+        this.animateRow(this.currentOffset(), -rightWidth);
+    };
+    // eslint-disable-next-line @eslint-react/no-unused-class-component-members
+    reset = () => {
+        const { dragX, rowTranslation } = this.state;
+        dragX.setValue(0);
+        rowTranslation.setValue(0);
+        this.setState({ rowState: 0 });
+    };
+    render() {
+        const { rowState } = this.state;
+        const { children, renderLeftActions, renderRightActions, dragOffsetFromLeftEdge = 10, dragOffsetFromRightEdge = 10, } = this.props;
+        const left = renderLeftActions && (<Animated.View style={[
+                styles.leftActions,
+                // All those and below parameters can have ! since they are all
+                // asigned in constructor in `updateAnimatedEvent` but TS cannot spot
+                // it for some reason
+                { transform: [{ translateX: this.leftActionTranslate }] },
+            ]}>
+        {renderLeftActions(this.showLeftAction, this.transX, this)}
+        <View onLayout={({ nativeEvent }) => this.setState({ leftWidth: nativeEvent.layout.x })}/>
+      </Animated.View>);
+        const right = renderRightActions && (<Animated.View style={[
+                styles.rightActions,
+                { transform: [{ translateX: this.rightActionTranslate }] },
+            ]}>
+        {renderRightActions(this.showRightAction, this.transX, this)}
+        <View onLayout={({ nativeEvent }) => this.setState({ rightOffset: nativeEvent.layout.x })}/>
+      </Animated.View>);
+        return (<PanGestureHandler activeOffsetX={[-dragOffsetFromRightEdge, dragOffsetFromLeftEdge]} touchAction="pan-y" {...this.props} onGestureEvent={this.onGestureEvent} onHandlerStateChange={this.onHandlerStateChange}>
+        <Animated.View onLayout={this.onRowLayout} style={[styles.container, this.props.containerStyle]}>
+          {left}
+          {right}
+          <TapGestureHandler enabled={rowState !== 0} touchAction="pan-y" onHandlerStateChange={this.onTapHandlerStateChange}>
+            <Animated.View pointerEvents={rowState === 0 ? 'auto' : 'box-only'} style={[
+                {
+                    transform: [{ translateX: this.transX }],
+                },
+                this.props.childrenContainerStyle,
+            ]}>
+              {children}
+            </Animated.View>
+          </TapGestureHandler>
+        </Animated.View>
+      </PanGestureHandler>);
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+    },
+    leftActions: {
+        ...StyleSheet.absoluteFillObject,
+        flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+    },
+    rightActions: {
+        ...StyleSheet.absoluteFillObject,
+        flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',
+    },
+});

package/lib/typescript/components/Text.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Text as RNText, TextProps as RNTextProps } from 'react-native';
+export declare const Text: React.ForwardRefExoticComponent<RNTextProps & React.RefAttributes<RNText>>;
+export type Text = typeof Text & RNText;

package/lib/typescript/components/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,IAAI,IAAI,MAAM,EACd,SAAS,IAAI,WAAW,EACzB,MAAM,cAAc,CAAC;AAKtB,eAAO,MAAM,IAAI,4EA0DhB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,GAAG,MAAM,CAAC"}

package/lib/typescript/components/Text.js

@@ -0,0 +1,38 @@
+import React, { forwardRef, useEffect, useRef, } from 'react';
+import { Platform, Text as RNText, } from 'react-native';
+import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
+import { GestureDetector } from '../handlers/gestures/GestureDetector';
+export const Text = forwardRef((props, ref) => {
+    const { onPress, onLongPress, ...rest } = props;
+    const textRef = useRef(null);
+    const native = Gesture.Native().runOnJS(true);
+    const refHandler = (node) => {
+        textRef.current = node;
+        if (ref === null) {
+            return;
+        }
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else {
+            ref.current = node;
+        }
+    };
+    // This is a special case for `Text` component. After https://github.com/software-mansion/react-native-gesture-handler/pull/3379 we check for
+    // `displayName` field. However, `Text` from RN has this field set to `Text`, but is also present in `RNSVGElements` set.
+    // We don't want to treat our `Text` as the one from `SVG`, therefore we add special field to ref.
+    refHandler.rngh = true;
+    useEffect(() => {
+        if (Platform.OS !== 'web') {
+            return;
+        }
+        const textElement = ref
+            ? ref.current
+            : textRef.current;
+        // At this point we are sure that textElement is div in HTML tree
+        textElement?.setAttribute('rnghtext', 'true');
+    }, []);
+    return onPress || onLongPress ? (<GestureDetector gesture={native}>
+        <RNText onPress={onPress} onLongPress={onLongPress} ref={refHandler} {...rest}/>
+      </GestureDetector>) : (<RNText ref={ref} {...rest}/>);
+});

package/lib/typescript/components/gestureHandlerRootHOC.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export default function gestureHandlerRootHOC<P extends object>(Component: React.ComponentType<P>, containerStyles?: StyleProp<ViewStyle>): React.ComponentType<P>;

package/lib/typescript/components/gestureHandlerRootHOC.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gestureHandlerRootHOC.d.ts","sourceRoot":"","sources":["../../../src/components/gestureHandlerRootHOC.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhE,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,CAAC,SAAS,MAAM,EAC5D,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GACrC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAiBxB"}

package/lib/typescript/components/gestureHandlerRootHOC.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import GestureHandlerRootView from './GestureHandlerRootView';
+export default function gestureHandlerRootHOC(Component, containerStyles) {
+    function Wrapper(props) {
+        return (<GestureHandlerRootView style={[styles.container, containerStyles]}>
+        <Component {...props}/>
+      </GestureHandlerRootView>);
+    }
+    Wrapper.displayName = `gestureHandlerRootHOC(${Component.displayName || Component.name})`;
+    // @ts-ignore - hoistNonReactStatics uses old version of @types/react
+    hoistNonReactStatics(Wrapper, Component);
+    return Wrapper;
+}
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+});

package/lib/typescript/components/touchables/ExtraButtonProps.d.ts

@@ -0,0 +1,7 @@
+export type ExtraButtonProps = {
+    borderless?: boolean;
+    rippleColor?: number | string | null;
+    rippleRadius?: number | null;
+    foreground?: boolean;
+    exclusive?: boolean;
+};

package/lib/typescript/components/touchables/ExtraButtonProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtraButtonProps.d.ts","sourceRoot":"","sources":["../../../../src/components/touchables/ExtraButtonProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

package/lib/typescript/components/touchables/ExtraButtonProps.js

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

package/lib/typescript/components/touchables/GenericTouchable.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Component } from 'react';
+import { GestureEvent, HandlerStateChangeEvent } from '../../handlers/gestureHandlerCommon';
+import type { NativeViewGestureHandlerPayload } from '../../handlers/GestureHandlerEventPayload';
+import type { GenericTouchableProps } from './GenericTouchableProps';
+/**
+ * Each touchable is a states' machine which preforms transitions.
+ * On very beginning (and on the very end or recognition) touchable is
+ * UNDETERMINED. Then it moves to BEGAN. If touchable recognizes that finger
+ * travel outside it transits to special MOVED_OUTSIDE state. Gesture recognition
+ * finishes in UNDETERMINED state.
+ */
+export declare const TOUCHABLE_STATE: {
+    readonly UNDETERMINED: 0;
+    readonly BEGAN: 1;
+    readonly MOVED_OUTSIDE: 2;
+};
+type TouchableState = (typeof TOUCHABLE_STATE)[keyof typeof TOUCHABLE_STATE];
+interface InternalProps {
+    onStateChange?: (oldState: TouchableState, newState: TouchableState) => void;
+}
+type Timeout = ReturnType<typeof setTimeout> | null | undefined;
+/**
+ * GenericTouchable is not intented to be used as it is.
+ * Should be treated as a source for the rest of touchables
+ */
+export default class GenericTouchable extends Component<GenericTouchableProps & InternalProps> {
+    static defaultProps: {
+        delayLongPress: number;
+        extraButtonProps: {
+            rippleColor: string;
+            exclusive: boolean;
+        };
+    };
+    pressInTimeout: Timeout;
+    pressOutTimeout: Timeout;
+    longPressTimeout: Timeout;
+    longPressDetected: boolean;
+    pointerInside: boolean;
+    STATE: TouchableState;
+    handlePressIn(): void;
+    handleMoveOutside(): void;
+    handleGoToUndetermined(): void;
+    componentDidMount(): void;
+    reset(): void;
+    moveToState(newState: TouchableState): void;
+    onGestureEvent: ({ nativeEvent: { pointerInside }, }: GestureEvent<NativeViewGestureHandlerPayload>) => void;
+    onHandlerStateChange: ({ nativeEvent, }: HandlerStateChangeEvent<NativeViewGestureHandlerPayload>) => void;
+    onLongPressDetected: () => void;
+    componentWillUnmount(): void;
+    onMoveIn(): void;
+    onMoveOut(): void;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/typescript/components/touchables/GenericTouchable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericTouchable.d.ts","sourceRoot":"","sources":["../../../../src/components/touchables/GenericTouchable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,OAAO,EACL,YAAY,EACZ,uBAAuB,EACxB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AACjG,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE;;;;;;GAMG;AACH,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,KAAK,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;AAE7E,UAAU,aAAa;IACrB,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9E;AAID,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;AAEhE;;;GAGG;AAEH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,SAAS,CACrD,qBAAqB,GAAG,aAAa,CACtC;IACC,MAAM,CAAC,YAAY;;;;;;MAMjB;IAGF,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,OAAO,CAAC;IAG1B,iBAAiB,UAAS;IAE1B,aAAa,UAAQ;IAGrB,KAAK,EAAE,cAAc,CAAgC;IAIrD,aAAa;IAiBb,iBAAiB;IAcjB,sBAAsB;IAkBtB,iBAAiB;IAIjB,KAAK;IAYL,WAAW,CAAC,QAAQ,EAAE,cAAc;IAyBpC,cAAc,GAAI,qCAEf,YAAY,CAAC,+BAA+B,CAAC,UAS9C;IAEF,oBAAoB,GAAI,kBAErB,uBAAuB,CAAC,+BAA+B,CAAC,UAyBzD;IAEF,mBAAmB,aAIjB;IAEF,oBAAoB;IAKpB,QAAQ;IAOR,SAAS;IAST,MAAM;CA+CP"}

package/lib/typescript/components/touchables/GenericTouchable.js

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { Component } from 'react';
+import { Animated, Platform } from 'react-native';
+import { State } from '../../State';
+import { BaseButton } from '../GestureButtons';
+/**
+ * Each touchable is a states' machine which preforms transitions.
+ * On very beginning (and on the very end or recognition) touchable is
+ * UNDETERMINED. Then it moves to BEGAN. If touchable recognizes that finger
+ * travel outside it transits to special MOVED_OUTSIDE state. Gesture recognition
+ * finishes in UNDETERMINED state.
+ */
+export const TOUCHABLE_STATE = {
+    UNDETERMINED: 0,
+    BEGAN: 1,
+    MOVED_OUTSIDE: 2,
+};
+/**
+ * GenericTouchable is not intented to be used as it is.
+ * Should be treated as a source for the rest of touchables
+ */
+export default class GenericTouchable extends Component {
+    static defaultProps = {
+        delayLongPress: 600,
+        extraButtonProps: {
+            rippleColor: 'transparent',
+            exclusive: true,
+        },
+    };
+    // Timeout handlers
+    pressInTimeout;
+    pressOutTimeout;
+    longPressTimeout;
+    // This flag is required since recognition of longPress implies not-invoking onPress
+    longPressDetected = false;
+    pointerInside = true;
+    // State of touchable
+    STATE = TOUCHABLE_STATE.UNDETERMINED;
+    // handlePressIn in called on first touch on traveling inside component.
+    // Handles state transition with delay.
+    handlePressIn() {
+        if (this.props.delayPressIn) {
+            this.pressInTimeout = setTimeout(() => {
+                this.moveToState(TOUCHABLE_STATE.BEGAN);
+                this.pressInTimeout = null;
+            }, this.props.delayPressIn);
+        }
+        else {
+            this.moveToState(TOUCHABLE_STATE.BEGAN);
+        }
+        if (this.props.onLongPress) {
+            const time = (this.props.delayPressIn || 0) + (this.props.delayLongPress || 0);
+            this.longPressTimeout = setTimeout(this.onLongPressDetected, time);
+        }
+    }
+    // handleMoveOutside in called on traveling outside component.
+    // Handles state transition with delay.
+    handleMoveOutside() {
+        if (this.props.delayPressOut) {
+            this.pressOutTimeout =
+                this.pressOutTimeout ||
+                    setTimeout(() => {
+                        this.moveToState(TOUCHABLE_STATE.MOVED_OUTSIDE);
+                        this.pressOutTimeout = null;
+                    }, this.props.delayPressOut);
+        }
+        else {
+            this.moveToState(TOUCHABLE_STATE.MOVED_OUTSIDE);
+        }
+    }
+    // handleGoToUndetermined transits to UNDETERMINED state with proper delay
+    handleGoToUndetermined() {
+        clearTimeout(this.pressOutTimeout); // TODO: maybe it can be undefined
+        if (this.props.delayPressOut) {
+            this.pressOutTimeout = setTimeout(() => {
+                if (this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
+                    this.moveToState(TOUCHABLE_STATE.BEGAN);
+                }
+                this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
+                this.pressOutTimeout = null;
+            }, this.props.delayPressOut);
+        }
+        else {
+            if (this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
+                this.moveToState(TOUCHABLE_STATE.BEGAN);
+            }
+            this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
+        }
+    }
+    componentDidMount() {
+        this.reset();
+    }
+    // Reset timeout to prevent memory leaks.
+    reset() {
+        this.longPressDetected = false;
+        this.pointerInside = true;
+        clearTimeout(this.pressInTimeout);
+        clearTimeout(this.pressOutTimeout);
+        clearTimeout(this.longPressTimeout);
+        this.pressOutTimeout = null;
+        this.longPressTimeout = null;
+        this.pressInTimeout = null;
+    }
+    // All states' transitions are defined here.
+    moveToState(newState) {
+        if (newState === this.STATE) {
+            // Ignore dummy transitions
+            return;
+        }
+        if (newState === TOUCHABLE_STATE.BEGAN) {
+            // First touch and moving inside
+            this.props.onPressIn?.();
+        }
+        else if (newState === TOUCHABLE_STATE.MOVED_OUTSIDE) {
+            // Moving outside
+            this.props.onPressOut?.();
+        }
+        else if (newState === TOUCHABLE_STATE.UNDETERMINED) {
+            // Need to reset each time on transition to UNDETERMINED
+            this.reset();
+            if (this.STATE === TOUCHABLE_STATE.BEGAN) {
+                // ... and if it happens inside button.
+                this.props.onPressOut?.();
+            }
+        }
+        // Finally call lister (used by subclasses)
+        this.props.onStateChange?.(this.STATE, newState);
+        // ... and make transition.
+        this.STATE = newState;
+    }
+    onGestureEvent = ({ nativeEvent: { pointerInside }, }) => {
+        if (this.pointerInside !== pointerInside) {
+            if (pointerInside) {
+                this.onMoveIn();
+            }
+            else {
+                this.onMoveOut();
+            }
+        }
+        this.pointerInside = pointerInside;
+    };
+    onHandlerStateChange = ({ nativeEvent, }) => {
+        const { state } = nativeEvent;
+        if (state === State.CANCELLED || state === State.FAILED) {
+            // Need to handle case with external cancellation (e.g. by ScrollView)
+            this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
+        }
+        else if (
+        // This platform check is an implication of slightly different behavior of handlers on different platform.
+        // And Android "Active" state is achieving on first move of a finger, not on press in.
+        // On iOS event on "Began" is not delivered.
+        state === (Platform.OS !== 'android' ? State.ACTIVE : State.BEGAN) &&
+            this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
+            // Moving inside requires
+            this.handlePressIn();
+        }
+        else if (state === State.END) {
+            const shouldCallOnPress = !this.longPressDetected &&
+                this.STATE !== TOUCHABLE_STATE.MOVED_OUTSIDE &&
+                this.pressOutTimeout === null;
+            this.handleGoToUndetermined();
+            if (shouldCallOnPress) {
+                // Calls only inside component whether no long press was called previously
+                this.props.onPress?.();
+            }
+        }
+    };
+    onLongPressDetected = () => {
+        this.longPressDetected = true;
+        // Checked for in the caller of `onLongPressDetected`, but better to check twice
+        this.props.onLongPress?.();
+    };
+    componentWillUnmount() {
+        // To prevent memory leaks
+        this.reset();
+    }
+    onMoveIn() {
+        if (this.STATE === TOUCHABLE_STATE.MOVED_OUTSIDE) {
+            // This call is not throttled with delays (like in RN's implementation).
+            this.moveToState(TOUCHABLE_STATE.BEGAN);
+        }
+    }
+    onMoveOut() {
+        // Long press should no longer be detected
+        clearTimeout(this.longPressTimeout);
+        this.longPressTimeout = null;
+        if (this.STATE === TOUCHABLE_STATE.BEGAN) {
+            this.handleMoveOutside();
+        }
+    }
+    render() {
+        const hitSlop = (typeof this.props.hitSlop === 'number'
+            ? {
+                top: this.props.hitSlop,
+                left: this.props.hitSlop,
+                bottom: this.props.hitSlop,
+                right: this.props.hitSlop,
+            }
+            : this.props.hitSlop) ?? undefined;
+        const coreProps = {
+            accessible: this.props.accessible !== false,
+            accessibilityLabel: this.props.accessibilityLabel,
+            accessibilityHint: this.props.accessibilityHint,
+            accessibilityRole: this.props.accessibilityRole,
+            // TODO: check if changed to no 's' correctly, also removed 2 props that are no longer available: `accessibilityComponentType` and `accessibilityTraits`,
+            // would be good to check if it is ok for sure, see: https://github.com/facebook/react-native/issues/24016
+            accessibilityState: this.props.accessibilityState,
+            accessibilityActions: this.props.accessibilityActions,
+            onAccessibilityAction: this.props.onAccessibilityAction,
+            nativeID: this.props.nativeID,
+            onLayout: this.props.onLayout,
+        };
+        return (<BaseButton style={this.props.containerStyle} onHandlerStateChange={
+            // TODO: not sure if it can be undefined instead of null
+            this.props.disabled ? undefined : this.onHandlerStateChange} onGestureEvent={this.onGestureEvent} hitSlop={hitSlop} userSelect={this.props.userSelect} shouldActivateOnStart={this.props.shouldActivateOnStart} disallowInterruption={this.props.disallowInterruption} testID={this.props.testID} touchSoundDisabled={this.props.touchSoundDisabled ?? false} enabled={!this.props.disabled} {...this.props.extraButtonProps}>
+        <Animated.View {...coreProps} style={this.props.style}>
+          {this.props.children}
+        </Animated.View>
+      </BaseButton>);
+    }
+}

package/lib/typescript/components/touchables/GenericTouchableProps.d.ts

@@ -0,0 +1,16 @@
+import type { StyleProp, ViewStyle, TouchableWithoutFeedbackProps, Insets } from 'react-native';
+import type { UserSelect } from '../../handlers/gestureHandlerCommon';
+import { ExtraButtonProps } from './ExtraButtonProps';
+export interface GenericTouchableProps extends Omit<TouchableWithoutFeedbackProps, 'hitSlop'> {
+    onPress?: () => void;
+    onPressIn?: () => void;
+    onPressOut?: () => void;
+    onLongPress?: () => void;
+    nativeID?: string;
+    shouldActivateOnStart?: boolean;
+    disallowInterruption?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+    hitSlop?: Insets | number;
+    userSelect?: UserSelect;
+    extraButtonProps?: ExtraButtonProps;
+}