react-native-gesture-handler 2.27.0 → 2.27.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReanimatedSwipeable.d.ts","sourceRoot":"","sources":["../../../src/components/ReanimatedSwipeable.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,183 @@
+import * as React from 'react';
+import { Component } from 'react';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
+type SwipeableExcludes = Exclude<keyof PanGestureHandlerProps, 'onGestureEvent' | 'onHandlerStateChange'>;
+type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
+export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
+    /**
+     * Enables two-finger gestures on supported devices, for example iPads with
+     * trackpads. If not enabled the gesture will require click + drag, with
+     * `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger
+     * the gesture.
+     */
+    enableTrackpadTwoFingerGesture?: boolean;
+    /**
+     * Specifies how much the visual interaction will be delayed compared to the
+     * gesture distance. e.g. value of 1 will indicate that the swipeable panel
+     * should exactly follow the gesture, 2 means it is going to be two times
+     * "slower".
+     */
+    friction?: number;
+    /**
+     * Distance from the left edge at which released panel will animate to the
+     * open state (or the open panel will animate into the closed state). By
+     * default it's a half of the panel's width.
+     */
+    leftThreshold?: number;
+    /**
+     * Distance from the right edge at which released panel will animate to the
+     * open state (or the open panel will animate into the closed state). By
+     * default it's a half of the panel's width.
+     */
+    rightThreshold?: number;
+    /**
+     * Distance that the panel must be dragged from the left edge to be considered
+     * a swipe. The default value is 10.
+     */
+    dragOffsetFromLeftEdge?: number;
+    /**
+     * Distance that the panel must be dragged from the right edge to be considered
+     * a swipe. The default value is 10.
+     */
+    dragOffsetFromRightEdge?: number;
+    /**
+     * Value indicating if the swipeable panel can be pulled further than the left
+     * actions panel's width. It is set to true by default as long as the left
+     * panel render method is present.
+     */
+    overshootLeft?: boolean;
+    /**
+     * Value indicating if the swipeable panel can be pulled further than the
+     * right actions panel's width. It is set to true by default as long as the
+     * right panel render method is present.
+     */
+    overshootRight?: boolean;
+    /**
+     * Specifies how much the visual interaction will be delayed compared to the
+     * gesture distance at overshoot. Default value is 1, it mean no friction, for
+     * a native feel, try 8 or above.
+     */
+    overshootFriction?: number;
+    /**
+     * @deprecated Use `direction` argument of onSwipeableOpen()
+     *
+     * Called when left action panel gets open.
+     */
+    onSwipeableLeftOpen?: () => void;
+    /**
+     * @deprecated Use `direction` argument of onSwipeableOpen()
+     *
+     * Called when right action panel gets open.
+     */
+    onSwipeableRightOpen?: () => void;
+    /**
+     * Called when action panel gets open (either right or left).
+     */
+    onSwipeableOpen?: (direction: 'left' | 'right', swipeable: Swipeable) => void;
+    /**
+     * Called when action panel is closed.
+     */
+    onSwipeableClose?: (direction: 'left' | 'right', swipeable: Swipeable) => void;
+    /**
+     * @deprecated Use `direction` argument of onSwipeableWillOpen()
+     *
+     * Called when left action panel starts animating on open.
+     */
+    onSwipeableLeftWillOpen?: () => void;
+    /**
+     * @deprecated Use `direction` argument of onSwipeableWillOpen()
+     *
+     * Called when right action panel starts animating on open.
+     */
+    onSwipeableRightWillOpen?: () => void;
+    /**
+     * Called when action panel starts animating on open (either right or left).
+     */
+    onSwipeableWillOpen?: (direction: 'left' | 'right') => void;
+    /**
+     * Called when action panel starts animating on close.
+     */
+    onSwipeableWillClose?: (direction: 'left' | 'right') => void;
+    /**
+     * Called when action panel starts being shown on dragging to open.
+     */
+    onSwipeableOpenStartDrag?: (direction: 'left' | 'right') => void;
+    /**
+     * Called when action panel starts being shown on dragging to close.
+     */
+    onSwipeableCloseStartDrag?: (direction: 'left' | 'right') => void;
+    /**
+     *
+     * This map describes the values to use as inputRange for extra interpolation:
+     * AnimatedValue: [startValue, endValue]
+     *
+     * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, +]
+     *
+     * To support `rtl` flexbox layouts use `flexDirection` styling.
+     * */
+    renderLeftActions?: (progressAnimatedValue: AnimatedInterpolation, dragAnimatedValue: AnimatedInterpolation, swipeable: Swipeable) => React.ReactNode;
+    /**
+     *
+     * This map describes the values to use as inputRange for extra interpolation:
+     * AnimatedValue: [startValue, endValue]
+     *
+     * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, -]
+     *
+     * To support `rtl` flexbox layouts use `flexDirection` styling.
+     * */
+    renderRightActions?: (progressAnimatedValue: AnimatedInterpolation, dragAnimatedValue: AnimatedInterpolation, swipeable: Swipeable) => React.ReactNode;
+    useNativeAnimations?: boolean;
+    animationOptions?: Record<string, unknown>;
+    /**
+     * Style object for the container (`Animated.View`), for example to override
+     * `overflow: 'hidden'`.
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Style object for the children container (`Animated.View`), for example to
+     * apply `flex: 1`
+     */
+    childrenContainerStyle?: StyleProp<ViewStyle>;
+}
+type SwipeableState = {
+    dragX: Animated.Value;
+    rowTranslation: Animated.Value;
+    rowState: number;
+    leftWidth?: number;
+    rightOffset?: number;
+    rowWidth?: number;
+};
+/**
+ * @deprecated use Reanimated version of Swipeable instead
+ *
+ * This component allows for implementing swipeable rows or similar interaction.
+ */
+export default class Swipeable extends Component<SwipeableProps, SwipeableState> {
+    static defaultProps: {
+        friction: number;
+        overshootFriction: number;
+        useNativeAnimations: boolean;
+    };
+    constructor(props: SwipeableProps);
+    shouldComponentUpdate(props: SwipeableProps, state: SwipeableState): boolean;
+    private onGestureEvent?;
+    private transX?;
+    private showLeftAction?;
+    private leftActionTranslate?;
+    private showRightAction?;
+    private rightActionTranslate?;
+    private updateAnimatedEvent;
+    private onTapHandlerStateChange;
+    private onHandlerStateChange;
+    private handleRelease;
+    private animateRow;
+    private onRowLayout;
+    private currentOffset;
+    close: () => void;
+    openLeft: () => void;
+    openRight: () => void;
+    reset: () => void;
+    render(): React.JSX.Element;
+}
+export {};

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

@@ -0,0 +1 @@
+{"version":3,"file":"Swipeable.d.ts","sourceRoot":"","sources":["../../../src/components/Swipeable.tsx"],"names":[],"mappings":"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"}