react-native-gesture-handler 2.26.0 → 2.27.1

package/lib/typescript/components/ReanimatedSwipeable.js

@@ -0,0 +1,400 @@
+// 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 React, { forwardRef, useCallback, useImperativeHandle, useMemo, } from 'react';
+import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
+import { GestureDetector } from '../handlers/gestures/GestureDetector';
+import Animated, { ReduceMotion, interpolate, measure, runOnJS, runOnUI, useAnimatedRef, useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
+import { I18nManager, StyleSheet, View, } from 'react-native';
+import { applyRelationProp } from './utils';
+const DRAG_TOSS = 0.05;
+var SwipeDirection;
+(function (SwipeDirection) {
+    SwipeDirection["LEFT"] = "left";
+    SwipeDirection["RIGHT"] = "right";
+})(SwipeDirection || (SwipeDirection = {}));
+const Swipeable = forwardRef(function Swipeable(props, ref) {
+    const defaultProps = {
+        friction: 1,
+        overshootFriction: 1,
+        dragOffset: 10,
+        enableTrackpadTwoFingerGesture: false,
+    };
+    const { leftThreshold, rightThreshold, enabled, containerStyle, childrenContainerStyle, animationOptions, overshootLeft, overshootRight, testID, children, enableTrackpadTwoFingerGesture = defaultProps.enableTrackpadTwoFingerGesture, dragOffsetFromLeftEdge = defaultProps.dragOffset, dragOffsetFromRightEdge = defaultProps.dragOffset, friction = defaultProps.friction, overshootFriction = defaultProps.overshootFriction, onSwipeableOpenStartDrag, onSwipeableCloseStartDrag, onSwipeableWillOpen, onSwipeableWillClose, onSwipeableOpen, onSwipeableClose, renderLeftActions, renderRightActions, simultaneousWithExternalGesture, requireExternalGestureToFail, blocksExternalGesture, hitSlop, ...remainingProps } = props;
+    const relationProps = {
+        simultaneousWithExternalGesture,
+        requireExternalGestureToFail,
+        blocksExternalGesture,
+    };
+    const rowState = useSharedValue(0);
+    const userDrag = useSharedValue(0);
+    const appliedTranslation = useSharedValue(0);
+    const rowWidth = useSharedValue(0);
+    const leftWidth = useSharedValue(0);
+    const rightWidth = useSharedValue(0);
+    const showLeftProgress = useSharedValue(0);
+    const showRightProgress = useSharedValue(0);
+    const updateAnimatedEvent = useCallback(() => {
+        'worklet';
+        const shouldOvershootLeft = overshootLeft ?? leftWidth.value > 0;
+        const shouldOvershootRight = overshootRight ?? rightWidth.value > 0;
+        const startOffset = rowState.value === 1
+            ? leftWidth.value
+            : rowState.value === -1
+                ? -rightWidth.value
+                : 0;
+        const offsetDrag = userDrag.value / friction + startOffset;
+        appliedTranslation.value = interpolate(offsetDrag, [
+            -rightWidth.value - 1,
+            -rightWidth.value,
+            leftWidth.value,
+            leftWidth.value + 1,
+        ], [
+            -rightWidth.value -
+                (shouldOvershootRight ? 1 / overshootFriction : 0),
+            -rightWidth.value,
+            leftWidth.value,
+            leftWidth.value + (shouldOvershootLeft ? 1 / overshootFriction : 0),
+        ]);
+        showLeftProgress.value =
+            leftWidth.value > 0
+                ? interpolate(appliedTranslation.value, [-1, 0, leftWidth.value], [0, 0, 1])
+                : 0;
+        showRightProgress.value =
+            rightWidth.value > 0
+                ? interpolate(appliedTranslation.value, [-rightWidth.value, 0, 1], [1, 0, 0])
+                : 0;
+    }, [
+        appliedTranslation,
+        friction,
+        leftWidth,
+        overshootFriction,
+        rightWidth,
+        rowState,
+        showLeftProgress,
+        showRightProgress,
+        userDrag,
+        overshootLeft,
+        overshootRight,
+    ]);
+    const dispatchImmediateEvents = useCallback((fromValue, toValue) => {
+        'worklet';
+        if (onSwipeableWillOpen && toValue !== 0) {
+            runOnJS(onSwipeableWillOpen)(toValue > 0 ? SwipeDirection.RIGHT : SwipeDirection.LEFT);
+        }
+        if (onSwipeableWillClose && toValue === 0) {
+            runOnJS(onSwipeableWillClose)(fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT);
+        }
+    }, [onSwipeableWillClose, onSwipeableWillOpen, rowState]);
+    const dispatchEndEvents = useCallback((fromValue, toValue) => {
+        'worklet';
+        if (onSwipeableOpen && toValue !== 0) {
+            runOnJS(onSwipeableOpen)(toValue > 0 ? SwipeDirection.RIGHT : SwipeDirection.LEFT);
+        }
+        if (onSwipeableClose && toValue === 0) {
+            runOnJS(onSwipeableClose)(fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT);
+        }
+    }, [onSwipeableClose, onSwipeableOpen]);
+    const animateRow = useCallback((toValue, velocityX) => {
+        'worklet';
+        const translationSpringConfig = {
+            mass: 2,
+            damping: 1000,
+            stiffness: 700,
+            velocity: velocityX,
+            overshootClamping: true,
+            reduceMotion: ReduceMotion.System,
+            ...animationOptions,
+        };
+        const isClosing = toValue === 0;
+        const moveToRight = isClosing ? rowState.value < 0 : toValue > 0;
+        const usedWidth = isClosing
+            ? moveToRight
+                ? rightWidth.value
+                : leftWidth.value
+            : moveToRight
+                ? leftWidth.value
+                : rightWidth.value;
+        const progressSpringConfig = {
+            ...translationSpringConfig,
+            restDisplacementThreshold: 0.01,
+            restSpeedThreshold: 0.01,
+            velocity: velocityX &&
+                interpolate(velocityX, [-usedWidth, usedWidth], [-1, 1]),
+        };
+        const frozenRowState = rowState.value;
+        appliedTranslation.value = withSpring(toValue, translationSpringConfig, (isFinished) => {
+            if (isFinished) {
+                dispatchEndEvents(frozenRowState, toValue);
+            }
+        });
+        const progressTarget = toValue === 0 ? 0 : 1 * Math.sign(toValue);
+        showLeftProgress.value = withSpring(Math.max(progressTarget, 0), progressSpringConfig);
+        showRightProgress.value = withSpring(Math.max(-progressTarget, 0), progressSpringConfig);
+        dispatchImmediateEvents(frozenRowState, toValue);
+        rowState.value = Math.sign(toValue);
+    }, [
+        rowState,
+        animationOptions,
+        appliedTranslation,
+        showLeftProgress,
+        leftWidth,
+        showRightProgress,
+        rightWidth,
+        dispatchImmediateEvents,
+        dispatchEndEvents,
+    ]);
+    const leftLayoutRef = useAnimatedRef();
+    const leftWrapperLayoutRef = useAnimatedRef();
+    const rightLayoutRef = useAnimatedRef();
+    const updateElementWidths = useCallback(() => {
+        'worklet';
+        const leftLayout = measure(leftLayoutRef);
+        const leftWrapperLayout = measure(leftWrapperLayoutRef);
+        const rightLayout = measure(rightLayoutRef);
+        leftWidth.value =
+            (leftLayout?.pageX ?? 0) - (leftWrapperLayout?.pageX ?? 0);
+        rightWidth.value =
+            rowWidth.value -
+                (rightLayout?.pageX ?? rowWidth.value) +
+                (leftWrapperLayout?.pageX ?? 0);
+    }, [
+        leftLayoutRef,
+        leftWrapperLayoutRef,
+        rightLayoutRef,
+        leftWidth,
+        rightWidth,
+        rowWidth,
+    ]);
+    const swipeableMethods = useMemo(() => ({
+        close() {
+            'worklet';
+            if (_WORKLET) {
+                animateRow(0);
+                return;
+            }
+            runOnUI(() => {
+                animateRow(0);
+            })();
+        },
+        openLeft() {
+            'worklet';
+            if (_WORKLET) {
+                updateElementWidths();
+                animateRow(leftWidth.value);
+                return;
+            }
+            runOnUI(() => {
+                updateElementWidths();
+                animateRow(leftWidth.value);
+            })();
+        },
+        openRight() {
+            'worklet';
+            if (_WORKLET) {
+                updateElementWidths();
+                animateRow(-rightWidth.value);
+                return;
+            }
+            runOnUI(() => {
+                updateElementWidths();
+                animateRow(-rightWidth.value);
+            })();
+        },
+        reset() {
+            'worklet';
+            userDrag.value = 0;
+            showLeftProgress.value = 0;
+            appliedTranslation.value = 0;
+            rowState.value = 0;
+        },
+    }), [
+        animateRow,
+        updateElementWidths,
+        leftWidth,
+        rightWidth,
+        userDrag,
+        showLeftProgress,
+        appliedTranslation,
+        rowState,
+    ]);
+    const onRowLayout = useCallback(({ nativeEvent }) => {
+        rowWidth.value = nativeEvent.layout.width;
+    }, [rowWidth]);
+    // As stated in `Dimensions.get` docstring, this function should be called on every render
+    // since dimensions may change (e.g. orientation change)
+    const leftActionAnimation = useAnimatedStyle(() => {
+        return {
+            opacity: showLeftProgress.value === 0 ? 0 : 1,
+        };
+    });
+    const leftElement = useCallback(() => (<Animated.View ref={leftWrapperLayoutRef} style={[styles.leftActions, leftActionAnimation]}>
+          {renderLeftActions?.(showLeftProgress, appliedTranslation, swipeableMethods)}
+          <Animated.View ref={leftLayoutRef}/>
+        </Animated.View>), [
+        appliedTranslation,
+        leftActionAnimation,
+        leftLayoutRef,
+        leftWrapperLayoutRef,
+        renderLeftActions,
+        showLeftProgress,
+        swipeableMethods,
+    ]);
+    const rightActionAnimation = useAnimatedStyle(() => {
+        return {
+            opacity: showRightProgress.value === 0 ? 0 : 1,
+        };
+    });
+    const rightElement = useCallback(() => (<Animated.View style={[styles.rightActions, rightActionAnimation]}>
+          {renderRightActions?.(showRightProgress, appliedTranslation, swipeableMethods)}
+          <Animated.View ref={rightLayoutRef}/>
+        </Animated.View>), [
+        appliedTranslation,
+        renderRightActions,
+        rightActionAnimation,
+        rightLayoutRef,
+        showRightProgress,
+        swipeableMethods,
+    ]);
+    const handleRelease = useCallback((event) => {
+        'worklet';
+        const { velocityX } = event;
+        userDrag.value = event.translationX;
+        const leftThresholdProp = leftThreshold ?? leftWidth.value / 2;
+        const rightThresholdProp = rightThreshold ?? rightWidth.value / 2;
+        const translationX = (userDrag.value + DRAG_TOSS * velocityX) / friction;
+        let toValue = 0;
+        if (rowState.value === 0) {
+            if (translationX > leftThresholdProp) {
+                toValue = leftWidth.value;
+            }
+            else if (translationX < -rightThresholdProp) {
+                toValue = -rightWidth.value;
+            }
+        }
+        else if (rowState.value === 1) {
+            // Swiped to left
+            if (translationX > -leftThresholdProp) {
+                toValue = leftWidth.value;
+            }
+        }
+        else {
+            // Swiped to right
+            if (translationX < rightThresholdProp) {
+                toValue = -rightWidth.value;
+            }
+        }
+        animateRow(toValue, velocityX / friction);
+    }, [
+        animateRow,
+        friction,
+        leftThreshold,
+        leftWidth,
+        rightThreshold,
+        rightWidth,
+        rowState,
+        userDrag,
+    ]);
+    const close = useCallback(() => {
+        'worklet';
+        animateRow(0);
+    }, [animateRow]);
+    const dragStarted = useSharedValue(false);
+    const tapGesture = useMemo(() => {
+        const tap = Gesture.Tap()
+            .shouldCancelWhenOutside(true)
+            .onStart(() => {
+            if (rowState.value !== 0) {
+                close();
+            }
+        });
+        Object.entries(relationProps).forEach(([relationName, relation]) => {
+            applyRelationProp(tap, relationName, relation);
+        });
+        return tap;
+    }, [close, rowState, simultaneousWithExternalGesture]);
+    const panGesture = useMemo(() => {
+        const pan = Gesture.Pan()
+            .enabled(enabled !== false)
+            .enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture)
+            .activeOffsetX([-dragOffsetFromRightEdge, dragOffsetFromLeftEdge])
+            .onStart(updateElementWidths)
+            .onUpdate((event) => {
+            userDrag.value = event.translationX;
+            const direction = rowState.value === -1
+                ? SwipeDirection.RIGHT
+                : rowState.value === 1
+                    ? SwipeDirection.LEFT
+                    : event.translationX > 0
+                        ? SwipeDirection.RIGHT
+                        : SwipeDirection.LEFT;
+            if (!dragStarted.value) {
+                dragStarted.value = true;
+                if (rowState.value === 0 && onSwipeableOpenStartDrag) {
+                    runOnJS(onSwipeableOpenStartDrag)(direction);
+                }
+                else if (onSwipeableCloseStartDrag) {
+                    runOnJS(onSwipeableCloseStartDrag)(direction);
+                }
+            }
+            updateAnimatedEvent();
+        })
+            .onEnd((event) => {
+            handleRelease(event);
+        })
+            .onFinalize(() => {
+            dragStarted.value = false;
+        });
+        Object.entries(relationProps).forEach(([relationName, relation]) => {
+            applyRelationProp(pan, relationName, relation);
+        });
+        return pan;
+    }, [
+        dragOffsetFromLeftEdge,
+        dragOffsetFromRightEdge,
+        dragStarted,
+        enableTrackpadTwoFingerGesture,
+        enabled,
+        handleRelease,
+        onSwipeableCloseStartDrag,
+        onSwipeableOpenStartDrag,
+        rowState,
+        updateAnimatedEvent,
+        updateElementWidths,
+        userDrag,
+        simultaneousWithExternalGesture,
+    ]);
+    useImperativeHandle(ref, () => swipeableMethods, [swipeableMethods]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: appliedTranslation.value }],
+        pointerEvents: rowState.value === 0 ? 'auto' : 'box-only',
+    }), [appliedTranslation, rowState]);
+    const swipeableComponent = (<GestureDetector gesture={panGesture} touchAction="pan-y">
+        <Animated.View {...remainingProps} onLayout={onRowLayout} hitSlop={hitSlop ?? undefined} style={[styles.container, containerStyle]}>
+          {leftElement()}
+          {rightElement()}
+          <GestureDetector gesture={tapGesture} touchAction="pan-y">
+            <Animated.View style={[animatedStyle, childrenContainerStyle]}>
+              {children}
+            </Animated.View>
+          </GestureDetector>
+        </Animated.View>
+      </GestureDetector>);
+    return testID ? (<View testID={testID}>{swipeableComponent}</View>) : (swipeableComponent);
+});
+export default Swipeable;
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+    },
+    leftActions: {
+        ...StyleSheet.absoluteFillObject,
+        flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+        overflow: 'hidden',
+    },
+    rightActions: {
+        ...StyleSheet.absoluteFillObject,
+        flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',
+        overflow: 'hidden',
+    },
+});

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

@@ -181,4 +181,3 @@ export default class Swipeable extends Component<SwipeableProps, SwipeableState>
     render(): React.JSX.Element;
 }
 export {};
-//# sourceMappingURL=Swipeable.d.ts.map

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

@@ -2,4 +2,3 @@ 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;
-//# sourceMappingURL=Text.d.ts.map