react-native-gesture-handler 2.27.0 → 2.27.1

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

@@ -0,0 +1,167 @@
+import React, { ReactNode } from 'react';
+import { StatusBarAnimation, StyleProp, ViewStyle } from 'react-native';
+import { SharedValue } from 'react-native-reanimated';
+import { UserSelect, ActiveCursor, MouseButton } from '../handlers/gestureHandlerCommon';
+export declare enum DrawerPosition {
+    LEFT = 0,
+    RIGHT = 1
+}
+export declare enum DrawerState {
+    IDLE = 0,
+    DRAGGING = 1,
+    SETTLING = 2
+}
+export declare enum DrawerType {
+    FRONT = 0,
+    BACK = 1,
+    SLIDE = 2
+}
+export declare enum DrawerLockMode {
+    UNLOCKED = 0,
+    LOCKED_CLOSED = 1,
+    LOCKED_OPEN = 2
+}
+export declare enum DrawerKeyboardDismissMode {
+    NONE = 0,
+    ON_DRAG = 1
+}
+export interface DrawerLayoutProps {
+    /**
+     * This attribute is present in the native android implementation already and is one
+     * of the required params. The gesture handler version of DrawerLayout makes it
+     * possible for the function passed as `renderNavigationView` to take an
+     * Animated value as a parameter that indicates the progress of drawer
+     * opening/closing animation (progress value is 0 when closed and 1 when
+     * opened). This can be used by the drawer component to animated its children
+     * while the drawer is opening or closing.
+     */
+    renderNavigationView: (progressAnimatedValue: SharedValue<number>) => ReactNode;
+    /**
+     * Determines the side from which the drawer will open.
+     */
+    drawerPosition?: DrawerPosition;
+    /**
+     * Width of the drawer.
+     */
+    drawerWidth?: number;
+    /**
+     * Background color of the drawer.
+     */
+    drawerBackgroundColor?: string;
+    /**
+     * Specifies the lock mode of the drawer.
+     * Programatic opening/closing isn't affected by the lock mode. Defaults to `UNLOCKED`.
+     * - `UNLOCKED` - the drawer will respond to gestures.
+     * - `LOCKED_CLOSED` - the drawer will move freely until it settles in a closed position, then the gestures will be disabled.
+     * - `LOCKED_OPEN` - the drawer will move freely until it settles in an opened position, then the gestures will be disabled.
+     */
+    drawerLockMode?: DrawerLockMode;
+    /**
+     * Determines if system keyboard should be closed upon dragging the drawer.
+     */
+    keyboardDismissMode?: DrawerKeyboardDismissMode;
+    /**
+     * Called when the drawer is closed.
+     */
+    onDrawerClose?: () => void;
+    /**
+     * Called when the drawer is opened.
+     */
+    onDrawerOpen?: () => void;
+    /**
+     * Called when the status of the drawer changes.
+     */
+    onDrawerStateChanged?: (newState: DrawerState, drawerWillShow: boolean) => void;
+    /**
+     * Type of animation that will play when opening the drawer.
+     */
+    drawerType?: DrawerType;
+    /**
+     * Speed of animation that will play when letting go, or dismissing the drawer.
+     * This will also be the default animation speed for programatic controlls.
+     */
+    animationSpeed?: number;
+    /**
+     * Defines how far from the edge of the content view the gesture should
+     * activate.
+     */
+    edgeWidth?: number;
+    /**
+     * Minimal distance to swipe before the drawer starts moving.
+     */
+    minSwipeDistance?: number;
+    /**
+     * When set to true Drawer component will use
+     * {@link https://reactnative.dev/docs/statusbar StatusBar} API to hide the OS
+     * status bar whenever the drawer is pulled or when its in an "open" state.
+     */
+    hideStatusBar?: boolean;
+    /**
+     * @default 'slide'
+     *
+     * Can be used when hideStatusBar is set to true and will select the animation
+     * used for hiding/showing the status bar. See
+     * {@link https://reactnative.dev/docs/statusbar StatusBar} documentation for
+     * more details
+     */
+    statusBarAnimation?: StatusBarAnimation;
+    /**
+     * @default 'rgba(0, 0, 0, 0.7)'
+     *
+     * Color of the background overlay.
+     * Animated from `0%` to `100%` as the drawer opens.
+     */
+    overlayColor?: string;
+    /**
+     * Style wrapping the content.
+     */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Style wrapping the drawer.
+     */
+    drawerContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * 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;
+    onDrawerSlide?: (position: number) => void;
+    /**
+     * Elements that will be rendered inside the content view.
+     */
+    children?: ReactNode | ((openValue?: SharedValue<number>) => ReactNode);
+    /**
+     * @default 'none'
+     * Sets whether the text inside both the drawer and the context window can be selected.
+     * Values: 'none' | 'text' | 'auto'
+     */
+    userSelect?: UserSelect;
+    /**
+     * @default 'auto'
+     * Sets the displayed cursor pictogram when the drawer is being dragged.
+     * Values: see CSS cursor values
+     */
+    activeCursor?: ActiveCursor;
+    /**
+     * @default 'MouseButton.LEFT'
+     * Allows to choose which mouse button should underlying pan handler react to.
+     */
+    mouseButton?: MouseButton;
+    /**
+     * @default 'false if MouseButton.RIGHT is specified'
+     * Allows to enable/disable context menu.
+     */
+    enableContextMenu?: boolean;
+}
+export type DrawerMovementOption = {
+    initialVelocity?: number;
+    animationSpeed?: number;
+};
+export interface DrawerLayoutMethods {
+    openDrawer: (options?: DrawerMovementOption) => void;
+    closeDrawer: (options?: DrawerMovementOption) => void;
+}
+declare const DrawerLayout: React.ForwardRefExoticComponent<DrawerLayoutProps & React.RefAttributes<DrawerLayoutMethods>>;
+export default DrawerLayout;

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

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

package/lib/typescript/components/ReanimatedDrawerLayout.js

@@ -0,0 +1,364 @@
+// This component is based on RN's DrawerLayoutAndroid API
+// It's cross-compatible with all platforms despite
+// `DrawerLayoutAndroid` only being available on android
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState, } from 'react';
+import { StyleSheet, Keyboard, StatusBar, I18nManager, Platform, } from 'react-native';
+import Animated, { Extrapolation, interpolate, runOnJS, useAnimatedProps, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, } from 'react-native-reanimated';
+import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
+import { GestureDetector } from '../handlers/gestures/GestureDetector';
+import { MouseButton, } from '../handlers/gestureHandlerCommon';
+const DRAG_TOSS = 0.05;
+export var DrawerPosition;
+(function (DrawerPosition) {
+    DrawerPosition[DrawerPosition["LEFT"] = 0] = "LEFT";
+    DrawerPosition[DrawerPosition["RIGHT"] = 1] = "RIGHT";
+})(DrawerPosition || (DrawerPosition = {}));
+export var DrawerState;
+(function (DrawerState) {
+    DrawerState[DrawerState["IDLE"] = 0] = "IDLE";
+    DrawerState[DrawerState["DRAGGING"] = 1] = "DRAGGING";
+    DrawerState[DrawerState["SETTLING"] = 2] = "SETTLING";
+})(DrawerState || (DrawerState = {}));
+export var DrawerType;
+(function (DrawerType) {
+    DrawerType[DrawerType["FRONT"] = 0] = "FRONT";
+    DrawerType[DrawerType["BACK"] = 1] = "BACK";
+    DrawerType[DrawerType["SLIDE"] = 2] = "SLIDE";
+})(DrawerType || (DrawerType = {}));
+export var DrawerLockMode;
+(function (DrawerLockMode) {
+    DrawerLockMode[DrawerLockMode["UNLOCKED"] = 0] = "UNLOCKED";
+    DrawerLockMode[DrawerLockMode["LOCKED_CLOSED"] = 1] = "LOCKED_CLOSED";
+    DrawerLockMode[DrawerLockMode["LOCKED_OPEN"] = 2] = "LOCKED_OPEN";
+})(DrawerLockMode || (DrawerLockMode = {}));
+export var DrawerKeyboardDismissMode;
+(function (DrawerKeyboardDismissMode) {
+    DrawerKeyboardDismissMode[DrawerKeyboardDismissMode["NONE"] = 0] = "NONE";
+    DrawerKeyboardDismissMode[DrawerKeyboardDismissMode["ON_DRAG"] = 1] = "ON_DRAG";
+})(DrawerKeyboardDismissMode || (DrawerKeyboardDismissMode = {}));
+const defaultProps = {
+    drawerWidth: 200,
+    drawerPosition: DrawerPosition.LEFT,
+    drawerType: DrawerType.FRONT,
+    edgeWidth: 20,
+    minSwipeDistance: 3,
+    overlayColor: 'rgba(0, 0, 0, 0.7)',
+    drawerLockMode: DrawerLockMode.UNLOCKED,
+    enableTrackpadTwoFingerGesture: false,
+    activeCursor: 'auto',
+    mouseButton: MouseButton.LEFT,
+    statusBarAnimation: 'slide',
+};
+// StatusBar.setHidden and Keyboard.dismiss cannot be directly referenced in worklets.
+const setStatusBarHidden = StatusBar.setHidden;
+const dismissKeyboard = Keyboard.dismiss;
+const DrawerLayout = forwardRef(function DrawerLayout(props, ref) {
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [drawerState, setDrawerState] = useState(DrawerState.IDLE);
+    const [drawerOpened, setDrawerOpened] = useState(false);
+    const { drawerPosition = defaultProps.drawerPosition, drawerWidth = defaultProps.drawerWidth, drawerType = defaultProps.drawerType, drawerBackgroundColor, drawerContainerStyle, contentContainerStyle, minSwipeDistance = defaultProps.minSwipeDistance, edgeWidth = defaultProps.edgeWidth, drawerLockMode = defaultProps.drawerLockMode, overlayColor = defaultProps.overlayColor, enableTrackpadTwoFingerGesture = defaultProps.enableTrackpadTwoFingerGesture, activeCursor = defaultProps.activeCursor, mouseButton = defaultProps.mouseButton, statusBarAnimation = defaultProps.statusBarAnimation, hideStatusBar, keyboardDismissMode, userSelect, enableContextMenu, renderNavigationView, onDrawerSlide, onDrawerClose, onDrawerOpen, onDrawerStateChanged, animationSpeed: animationSpeedProp, } = props;
+    const isFromLeft = drawerPosition === DrawerPosition.LEFT;
+    const sideCorrection = isFromLeft ? 1 : -1;
+    // While closing the drawer when user starts gesture in the greyed out part of the window,
+    // we want the drawer to follow only once the finger reaches the edge of the drawer.
+    // See the diagram for reference. * = starting finger position, < = current finger position
+    // 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+
+    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+    //    |XXXXXXXX|..<*..|    |XXXXXXXX|.<-*..|    |XXXXXXXX|<--*..|    |XXXXX|<-----*..|
+    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+    //    +---------------+    +---------------+    +---------------+    +---------------+
+    const openValue = useSharedValue(0);
+    useDerivedValue(() => {
+        onDrawerSlide && runOnJS(onDrawerSlide)(openValue.value);
+    }, []);
+    const isDrawerOpen = useSharedValue(false);
+    const handleContainerLayout = ({ nativeEvent }) => {
+        setContainerWidth(nativeEvent.layout.width);
+    };
+    const emitStateChanged = useCallback((newState, drawerWillShow) => {
+        'worklet';
+        onDrawerStateChanged &&
+            runOnJS(onDrawerStateChanged)?.(newState, drawerWillShow);
+    }, [onDrawerStateChanged]);
+    const drawerAnimatedProps = useAnimatedProps(() => ({
+        accessibilityViewIsModal: isDrawerOpen.value,
+    }));
+    const overlayAnimatedProps = useAnimatedProps(() => ({
+        pointerEvents: isDrawerOpen.value ? 'auto' : 'none',
+    }));
+    // While the drawer is hidden, it's hitSlop overflows onto the main view by edgeWidth
+    // This way it can be swiped open even when it's hidden
+    const [edgeHitSlop, setEdgeHitSlop] = useState(isFromLeft
+        ? { left: 0, width: edgeWidth }
+        : { right: 0, width: edgeWidth });
+    // gestureOrientation is 1 if the gesture is expected to move from left to right and -1 otherwise
+    const gestureOrientation = useMemo(() => sideCorrection * (drawerOpened ? -1 : 1), [sideCorrection, drawerOpened]);
+    useEffect(() => {
+        setEdgeHitSlop(isFromLeft
+            ? { left: 0, width: edgeWidth }
+            : { right: 0, width: edgeWidth });
+    }, [isFromLeft, edgeWidth]);
+    const animateDrawer = useCallback((toValue, initialVelocity, animationSpeed) => {
+        'worklet';
+        const willShow = toValue !== 0;
+        isDrawerOpen.value = willShow;
+        emitStateChanged(DrawerState.SETTLING, willShow);
+        runOnJS(setDrawerState)(DrawerState.SETTLING);
+        if (hideStatusBar) {
+            runOnJS(setStatusBarHidden)(willShow, statusBarAnimation);
+        }
+        const normalizedToValue = interpolate(toValue, [0, drawerWidth], [0, 1], Extrapolation.CLAMP);
+        const normalizedInitialVelocity = interpolate(initialVelocity, [0, drawerWidth], [0, 1], Extrapolation.CLAMP);
+        openValue.value = withSpring(normalizedToValue, {
+            overshootClamping: true,
+            velocity: normalizedInitialVelocity,
+            mass: animationSpeed
+                ? 1 / animationSpeed
+                : 1 / (animationSpeedProp ?? 1),
+            damping: 40,
+            stiffness: 500,
+        }, (finished) => {
+            if (finished) {
+                emitStateChanged(DrawerState.IDLE, willShow);
+                runOnJS(setDrawerOpened)(willShow);
+                runOnJS(setDrawerState)(DrawerState.IDLE);
+                if (willShow) {
+                    onDrawerOpen && runOnJS(onDrawerOpen)?.();
+                }
+                else {
+                    onDrawerClose && runOnJS(onDrawerClose)?.();
+                }
+            }
+        });
+    }, [
+        openValue,
+        emitStateChanged,
+        isDrawerOpen,
+        hideStatusBar,
+        onDrawerClose,
+        onDrawerOpen,
+        drawerWidth,
+        statusBarAnimation,
+    ]);
+    const handleRelease = useCallback((event) => {
+        'worklet';
+        let { translationX: dragX, velocityX, x: touchX } = event;
+        if (drawerPosition !== DrawerPosition.LEFT) {
+            // See description in _updateAnimatedEvent about why events are flipped
+            // for right-side drawer
+            dragX = -dragX;
+            touchX = containerWidth - touchX;
+            velocityX = -velocityX;
+        }
+        const gestureStartX = touchX - dragX;
+        let dragOffsetBasedOnStart = 0;
+        if (drawerType === DrawerType.FRONT) {
+            dragOffsetBasedOnStart =
+                gestureStartX > drawerWidth ? gestureStartX - drawerWidth : 0;
+        }
+        const startOffsetX = dragX +
+            dragOffsetBasedOnStart +
+            (isDrawerOpen.value ? drawerWidth : 0);
+        const projOffsetX = startOffsetX + DRAG_TOSS * velocityX;
+        const shouldOpen = projOffsetX > drawerWidth / 2;
+        if (shouldOpen) {
+            animateDrawer(drawerWidth, velocityX);
+        }
+        else {
+            animateDrawer(0, velocityX);
+        }
+    }, [
+        animateDrawer,
+        containerWidth,
+        drawerPosition,
+        drawerType,
+        drawerWidth,
+        isDrawerOpen,
+    ]);
+    const openDrawer = useCallback((options = {}) => {
+        'worklet';
+        animateDrawer(drawerWidth, options.initialVelocity ?? 0, options.animationSpeed);
+    }, [animateDrawer, drawerWidth]);
+    const closeDrawer = useCallback((options = {}) => {
+        'worklet';
+        animateDrawer(0, options.initialVelocity ?? 0, options.animationSpeed);
+    }, [animateDrawer]);
+    const overlayDismissGesture = useMemo(() => Gesture.Tap()
+        .maxDistance(25)
+        .onEnd(() => {
+        if (isDrawerOpen.value &&
+            drawerLockMode !== DrawerLockMode.LOCKED_OPEN) {
+            closeDrawer();
+        }
+    }), [closeDrawer, isDrawerOpen, drawerLockMode]);
+    const overlayAnimatedStyle = useAnimatedStyle(() => ({
+        opacity: openValue.value,
+        backgroundColor: overlayColor,
+    }));
+    const fillHitSlop = useMemo(() => (isFromLeft ? { left: drawerWidth } : { right: drawerWidth }), [drawerWidth, isFromLeft]);
+    const panGesture = useMemo(() => {
+        return Gesture.Pan()
+            .activeCursor(activeCursor)
+            .mouseButton(mouseButton)
+            .hitSlop(drawerOpened ? fillHitSlop : edgeHitSlop)
+            .minDistance(drawerOpened ? 100 : 0)
+            .activeOffsetX(gestureOrientation * minSwipeDistance)
+            .failOffsetY([-15, 15])
+            .simultaneousWithExternalGesture(overlayDismissGesture)
+            .enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture)
+            .enabled(drawerState !== DrawerState.SETTLING &&
+            (drawerOpened
+                ? drawerLockMode !== DrawerLockMode.LOCKED_OPEN
+                : drawerLockMode !== DrawerLockMode.LOCKED_CLOSED))
+            .onStart(() => {
+            emitStateChanged(DrawerState.DRAGGING, false);
+            runOnJS(setDrawerState)(DrawerState.DRAGGING);
+            if (keyboardDismissMode === DrawerKeyboardDismissMode.ON_DRAG) {
+                runOnJS(dismissKeyboard)();
+            }
+            if (hideStatusBar) {
+                runOnJS(setStatusBarHidden)(true, statusBarAnimation);
+            }
+        })
+            .onUpdate((event) => {
+            const startedOutsideTranslation = isFromLeft
+                ? interpolate(event.x, [0, drawerWidth, drawerWidth + 1], [0, drawerWidth, drawerWidth])
+                : interpolate(event.x - containerWidth, [-drawerWidth - 1, -drawerWidth, 0], [drawerWidth, drawerWidth, 0]);
+            const startedInsideTranslation = sideCorrection *
+                (event.translationX +
+                    (drawerOpened ? drawerWidth * -gestureOrientation : 0));
+            const adjustedTranslation = Math.max(drawerOpened ? startedOutsideTranslation : 0, startedInsideTranslation);
+            openValue.value = interpolate(adjustedTranslation, [-drawerWidth, 0, drawerWidth], [1, 0, 1], Extrapolation.CLAMP);
+        })
+            .onEnd(handleRelease);
+    }, [
+        drawerLockMode,
+        openValue,
+        drawerWidth,
+        emitStateChanged,
+        gestureOrientation,
+        handleRelease,
+        edgeHitSlop,
+        fillHitSlop,
+        minSwipeDistance,
+        hideStatusBar,
+        keyboardDismissMode,
+        overlayDismissGesture,
+        drawerOpened,
+        isFromLeft,
+        containerWidth,
+        sideCorrection,
+        drawerState,
+        activeCursor,
+        enableTrackpadTwoFingerGesture,
+        mouseButton,
+        statusBarAnimation,
+    ]);
+    // When using RTL, row and row-reverse flex directions are flipped.
+    const reverseContentDirection = I18nManager.isRTL
+        ? isFromLeft
+        : !isFromLeft;
+    const dynamicDrawerStyles = {
+        backgroundColor: drawerBackgroundColor,
+        width: drawerWidth,
+    };
+    const containerStyles = useAnimatedStyle(() => {
+        if (drawerType === DrawerType.FRONT) {
+            return {};
+        }
+        return {
+            transform: [
+                {
+                    translateX: interpolate(openValue.value, [0, 1], [0, drawerWidth * sideCorrection], Extrapolation.CLAMP),
+                },
+            ],
+        };
+    });
+    const drawerAnimatedStyle = useAnimatedStyle(() => {
+        const closedDrawerOffset = drawerWidth * -sideCorrection;
+        const isBack = drawerType === DrawerType.BACK;
+        const isIdle = drawerState === DrawerState.IDLE;
+        if (isBack) {
+            return {
+                transform: [{ translateX: 0 }],
+                flexDirection: reverseContentDirection ? 'row-reverse' : 'row',
+            };
+        }
+        let translateX = 0;
+        if (isIdle) {
+            translateX = drawerOpened ? 0 : closedDrawerOffset;
+        }
+        else {
+            translateX = interpolate(openValue.value, [0, 1], [closedDrawerOffset, 0], Extrapolation.CLAMP);
+        }
+        return {
+            transform: [{ translateX }],
+            flexDirection: reverseContentDirection ? 'row-reverse' : 'row',
+        };
+    });
+    const containerAnimatedProps = useAnimatedProps(() => ({
+        importantForAccessibility: Platform.OS === 'android'
+            ? isDrawerOpen.value
+                ? 'no-hide-descendants'
+                : 'yes'
+            : undefined,
+    }));
+    const children = typeof props.children === 'function'
+        ? props.children(openValue) // renderer function
+        : props.children;
+    useImperativeHandle(ref, () => ({
+        openDrawer,
+        closeDrawer,
+    }), [openDrawer, closeDrawer]);
+    return (<GestureDetector gesture={panGesture} userSelect={userSelect} enableContextMenu={enableContextMenu}>
+        <Animated.View style={styles.main} onLayout={handleContainerLayout}>
+          <GestureDetector gesture={overlayDismissGesture}>
+            <Animated.View style={[
+            drawerType === DrawerType.FRONT
+                ? styles.containerOnBack
+                : styles.containerInFront,
+            containerStyles,
+            contentContainerStyle,
+        ]} animatedProps={containerAnimatedProps}>
+              {children}
+              <Animated.View animatedProps={overlayAnimatedProps} style={[styles.overlay, overlayAnimatedStyle]}/>
+            </Animated.View>
+          </GestureDetector>
+          <Animated.View pointerEvents="box-none" animatedProps={drawerAnimatedProps} style={[
+            styles.drawerContainer,
+            drawerAnimatedStyle,
+            drawerContainerStyle,
+        ]}>
+            <Animated.View style={dynamicDrawerStyles}>
+              {renderNavigationView(openValue)}
+            </Animated.View>
+          </Animated.View>
+        </Animated.View>
+      </GestureDetector>);
+});
+export default DrawerLayout;
+const styles = StyleSheet.create({
+    drawerContainer: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 1001,
+        flexDirection: 'row',
+    },
+    containerInFront: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 1002,
+    },
+    containerOnBack: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    main: {
+        flex: 1,
+        zIndex: 0,
+        overflow: 'hidden',
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 1000,
+    },
+});

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

@@ -0,0 +1,147 @@
+import React, { ForwardedRef } from 'react';
+import type { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
+import { SharedValue } from 'react-native-reanimated';
+import { StyleProp, ViewStyle } from 'react-native';
+import { RelationPropType } from './utils';
+type SwipeableExcludes = Exclude<keyof PanGestureHandlerProps, 'onGestureEvent' | 'onHandlerStateChange'>;
+declare enum SwipeDirection {
+    LEFT = "left",
+    RIGHT = "right"
+}
+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;
+    /**
+     * Called when action panel gets open (either right or left).
+     */
+    onSwipeableOpen?: (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => void;
+    /**
+     * Called when action panel is closed.
+     */
+    onSwipeableClose?: (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => void;
+    /**
+     * Called when action panel starts animating on open (either right or left).
+     */
+    onSwipeableWillOpen?: (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => void;
+    /**
+     * Called when action panel starts animating on close.
+     */
+    onSwipeableWillClose?: (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => void;
+    /**
+     * Called when action panel starts being shown on dragging to open.
+     */
+    onSwipeableOpenStartDrag?: (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => void;
+    /**
+     * Called when action panel starts being shown on dragging to close.
+     */
+    onSwipeableCloseStartDrag?: (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => void;
+    /**
+     * `progress`: Equals `0` when `swipeable` is closed, `1` when `swipeable` is opened.
+     *  - When the element overshoots it's opened position the value tends towards `Infinity`.
+     *  - Goes back to `1` when `swipeable` is released.
+     *
+     * `translation`: a horizontal offset of the `swipeable` relative to its closed position.\
+     * `swipeableMethods`: provides an object exposing methods for controlling the `swipeable`.
+     *
+     * To support `rtl` flexbox layouts use `flexDirection` styling.
+     * */
+    renderLeftActions?: (progress: SharedValue<number>, translation: SharedValue<number>, swipeableMethods: SwipeableMethods) => React.ReactNode;
+    /**
+     * `progress`: Equals `0` when `swipeable` is closed, `1` when `swipeable` is opened.
+     *  - When the element overshoots it's opened position the value tends towards `Infinity`.
+     *  - Goes back to `1` when `swipeable` is released.
+     *
+     * `translation`: a horizontal offset of the `swipeable` relative to its closed position.\
+     * `swipeableMethods`: provides an object exposing methods for controlling the `swipeable`.
+     *
+     * To support `rtl` flexbox layouts use `flexDirection` styling.
+     * */
+    renderRightActions?: (progress: SharedValue<number>, translation: SharedValue<number>, swipeableMethods: SwipeableMethods) => React.ReactNode;
+    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>;
+    /**
+     * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+     * used with the swipeable's gesture handler.
+     */
+    simultaneousWithExternalGesture?: RelationPropType;
+    /**
+     * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+     * used with the swipeable's gesture handler.
+     */
+    requireExternalGestureToFail?: RelationPropType;
+    /**
+     * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+     * used with the swipeable's gesture handler.
+     */
+    blocksExternalGesture?: RelationPropType;
+}
+export interface SwipeableMethods {
+    close: () => void;
+    openLeft: () => void;
+    openRight: () => void;
+    reset: () => void;
+}
+declare const Swipeable: React.ForwardRefExoticComponent<SwipeableProps & React.RefAttributes<SwipeableMethods>>;
+export default Swipeable;
+export type SwipeableRef = ForwardedRef<SwipeableMethods>;