react-native-gesture-handler 2.27.0 → 2.27.1

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

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { Component } from 'react';
+import { Animated, StatusBarAnimation, StyleProp, ViewStyle } from 'react-native';
+import { UserSelect, ActiveCursor, MouseButton } from '../handlers/gestureHandlerCommon';
+import { PanGestureHandler } from '../handlers/PanGestureHandler';
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+export type DrawerPosition = 'left' | 'right';
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+export type DrawerState = 'Idle' | 'Dragging' | 'Settling';
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+export type DrawerType = 'front' | 'back' | 'slide';
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
+type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+export interface DrawerLayoutProps {
+    /**
+     * This attribute is present in the standard implementation already and is one
+     * of the required params. Gesture handler version of DrawerLayout make 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: Animated.Value) => React.ReactNode;
+    drawerPosition?: DrawerPosition;
+    drawerWidth?: number;
+    drawerBackgroundColor?: string;
+    drawerLockMode?: DrawerLockMode;
+    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;
+    useNativeAnimations?: boolean;
+    drawerType?: DrawerType;
+    /**
+     * Defines how far from the edge of the content view the gesture should
+     * activate.
+     */
+    edgeWidth?: number;
+    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 black
+     *
+     * Color of a semi-transparent overlay to be displayed on top of the content
+     * view when drawer gets open. A solid color should be used as the opacity is
+     * added by the Drawer itself and the opacity of the overlay is animated (from
+     * 0% to 70%).
+     */
+    overlayColor?: string;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    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;
+    onGestureRef?: (ref: PanGestureHandler) => void;
+    children?: React.ReactNode | ((openValue?: AnimatedInterpolation) => React.ReactNode);
+    /**
+     * @default 'none'
+     * Defines which userSelect property should be used.
+     * Values: 'none'|'text'|'auto'
+     */
+    userSelect?: UserSelect;
+    /**
+     * @default 'auto'
+     * Defines which cursor property should be used when gesture activates.
+     * 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;
+}
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+export type DrawerLayoutState = {
+    dragX: Animated.Value;
+    touchX: Animated.Value;
+    drawerTranslation: Animated.Value;
+    containerWidth: number;
+    drawerState: DrawerState;
+    drawerOpened: boolean;
+};
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+export type DrawerMovementOption = {
+    velocity?: number;
+    speed?: number;
+};
+/**
+ * @deprecated use Reanimated version of DrawerLayout instead
+ */
+export default class DrawerLayout extends Component<DrawerLayoutProps, DrawerLayoutState> {
+    static defaultProps: {
+        drawerWidth: number;
+        drawerPosition: string;
+        useNativeAnimations: boolean;
+        drawerType: string;
+        edgeWidth: number;
+        minSwipeDistance: number;
+        overlayColor: string;
+        drawerLockMode: string;
+        enableTrackpadTwoFingerGesture: boolean;
+    };
+    constructor(props: DrawerLayoutProps);
+    shouldComponentUpdate(props: DrawerLayoutProps, state: DrawerLayoutState): boolean;
+    private openValue?;
+    private onGestureEvent?;
+    private accessibilityIsModalView;
+    private pointerEventsView;
+    private panGestureHandler;
+    private drawerShown;
+    static positions: {
+        Left: string;
+        Right: string;
+    };
+    private updateAnimatedEvent;
+    private handleContainerLayout;
+    private emitStateChanged;
+    private openingHandlerStateChange;
+    private onTapHandlerStateChange;
+    private handleRelease;
+    private updateShowing;
+    private animateDrawer;
+    openDrawer: (options?: DrawerMovementOption) => void;
+    closeDrawer: (options?: DrawerMovementOption) => void;
+    private renderOverlay;
+    private renderDrawer;
+    private setPanGestureRef;
+    render(): React.JSX.Element;
+}
+export {};

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

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

package/lib/typescript/components/DrawerLayout.js

@@ -0,0 +1,417 @@
+// This component is based on RN's DrawerLayoutAndroid API
+//
+// It perhaps deserves to be put in a separate repo, but since it relies on
+// react-native-gesture-handler library which isn't very popular at the moment I
+// decided to keep it here for the time being. It will allow us to move faster
+// and fix issues that may arise in gesture handler library that could be found
+// when using the drawer component
+import * as React from 'react';
+import { Component } from 'react';
+import invariant from 'invariant';
+import { Animated, StyleSheet, View, Keyboard, StatusBar, I18nManager, } from 'react-native';
+import { PanGestureHandler } from '../handlers/PanGestureHandler';
+import { TapGestureHandler } from '../handlers/TapGestureHandler';
+import { State } from '../State';
+const DRAG_TOSS = 0.05;
+const IDLE = 'Idle';
+const DRAGGING = 'Dragging';
+const SETTLING = 'Settling';
+/**
+ * @deprecated use Reanimated version of DrawerLayout instead
+ */
+export default class DrawerLayout extends Component {
+    static defaultProps = {
+        drawerWidth: 200,
+        drawerPosition: 'left',
+        useNativeAnimations: true,
+        drawerType: 'front',
+        edgeWidth: 20,
+        minSwipeDistance: 3,
+        overlayColor: 'rgba(0, 0, 0, 0.7)',
+        drawerLockMode: 'unlocked',
+        enableTrackpadTwoFingerGesture: false,
+    };
+    constructor(props) {
+        super(props);
+        const dragX = new Animated.Value(0);
+        const touchX = new Animated.Value(0);
+        const drawerTranslation = new Animated.Value(0);
+        this.state = {
+            dragX,
+            touchX,
+            drawerTranslation,
+            containerWidth: 0,
+            drawerState: IDLE,
+            drawerOpened: false,
+        };
+        this.updateAnimatedEvent(props, this.state);
+    }
+    shouldComponentUpdate(props, state) {
+        if (this.props.drawerPosition !== props.drawerPosition ||
+            this.props.drawerWidth !== props.drawerWidth ||
+            this.props.drawerType !== props.drawerType ||
+            this.state.containerWidth !== state.containerWidth) {
+            this.updateAnimatedEvent(props, state);
+        }
+        return true;
+    }
+    openValue;
+    onGestureEvent;
+    accessibilityIsModalView = React.createRef();
+    pointerEventsView = React.createRef();
+    panGestureHandler = React.createRef();
+    drawerShown = false;
+    static positions = {
+        Left: 'left',
+        Right: 'right',
+    };
+    updateAnimatedEvent = (props, state) => {
+        // Event definition is based on
+        const { drawerPosition, drawerWidth, drawerType } = props;
+        const { dragX: dragXValue, touchX: touchXValue, drawerTranslation, containerWidth, } = state;
+        let dragX = dragXValue;
+        let touchX = touchXValue;
+        if (drawerPosition !== 'left') {
+            // Most of the code is written in a way to handle left-side drawer. In
+            // order to handle right-side drawer the only thing we need to do is to
+            // reverse events coming from gesture handler in a way they emulate
+            // left-side drawer gestures. E.g. dragX is simply -dragX, and touchX is
+            // calulcated by subtracing real touchX from the width of the container
+            // (such that when touch happens at the right edge the value is simply 0)
+            dragX = Animated.multiply(new Animated.Value(-1), dragXValue); // TODO(TS): (for all "as" in this file) make sure we can map this
+            touchX = Animated.add(new Animated.Value(containerWidth), Animated.multiply(new Animated.Value(-1), touchXValue)); // TODO(TS): make sure we can map this;
+            touchXValue.setValue(containerWidth);
+        }
+        else {
+            touchXValue.setValue(0);
+        }
+        // While closing the drawer when user starts gesture outside of its area (in greyed
+        // out part of the window), we want the drawer to follow only once finger reaches the
+        // edge of the drawer.
+        // E.g. on the diagram below drawer is illustrate by X signs and the greyed out area by
+        // dots. The touch gesture starts at '*' and moves left, touch path is indicated by
+        // an arrow pointing left
+        // 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+
+        //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+        //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+        //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+        //    |XXXXXXXX|......|    |XXXXXXXX|.<-*..|    |XXXXXXXX|<--*..|    |XXXXX|<-----*..|
+        //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+        //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+        //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
+        //    +---------------+    +---------------+    +---------------+    +---------------+
+        //
+        // For the above to work properly we define animated value that will keep
+        // start position of the gesture. Then we use that value to calculate how
+        // much we need to subtract from the dragX. If the gesture started on the
+        // greyed out area we take the distance from the edge of the drawer to the
+        // start position. Otherwise we don't subtract at all and the drawer be
+        // pulled back as soon as you start the pan.
+        //
+        // This is used only when drawerType is "front"
+        //
+        let translationX = dragX;
+        if (drawerType === 'front') {
+            const startPositionX = Animated.add(touchX, Animated.multiply(new Animated.Value(-1), dragX));
+            const dragOffsetFromOnStartPosition = startPositionX.interpolate({
+                inputRange: [drawerWidth - 1, drawerWidth, drawerWidth + 1],
+                outputRange: [0, 0, 1],
+            });
+            translationX = Animated.add(dragX, dragOffsetFromOnStartPosition); // TODO: as above
+        }
+        this.openValue = Animated.add(translationX, drawerTranslation).interpolate({
+            inputRange: [0, drawerWidth],
+            outputRange: [0, 1],
+            extrapolate: 'clamp',
+        });
+        const gestureOptions = {
+            useNativeDriver: props.useNativeAnimations,
+        };
+        if (this.props.onDrawerSlide) {
+            gestureOptions.listener = (ev) => {
+                const translationX = Math.floor(Math.abs(ev.nativeEvent.translationX));
+                const position = translationX / this.state.containerWidth;
+                this.props.onDrawerSlide?.(position);
+            };
+        }
+        this.onGestureEvent = Animated.event([{ nativeEvent: { translationX: dragXValue, x: touchXValue } }], gestureOptions);
+    };
+    handleContainerLayout = ({ nativeEvent }) => {
+        this.setState({ containerWidth: nativeEvent.layout.width });
+    };
+    emitStateChanged = (newState, drawerWillShow) => {
+        this.props.onDrawerStateChanged?.(newState, drawerWillShow);
+    };
+    openingHandlerStateChange = ({ nativeEvent, }) => {
+        if (nativeEvent.oldState === State.ACTIVE) {
+            this.handleRelease({ nativeEvent });
+        }
+        else if (nativeEvent.state === State.ACTIVE) {
+            this.emitStateChanged(DRAGGING, false);
+            this.setState({ drawerState: DRAGGING });
+            if (this.props.keyboardDismissMode === 'on-drag') {
+                Keyboard.dismiss();
+            }
+            if (this.props.hideStatusBar) {
+                StatusBar.setHidden(true, this.props.statusBarAnimation || 'slide');
+            }
+        }
+    };
+    onTapHandlerStateChange = ({ nativeEvent, }) => {
+        if (this.drawerShown &&
+            nativeEvent.oldState === State.ACTIVE &&
+            this.props.drawerLockMode !== 'locked-open') {
+            this.closeDrawer();
+        }
+    };
+    handleRelease = ({ nativeEvent, }) => {
+        const { drawerWidth, drawerPosition, drawerType } = this.props;
+        const { containerWidth } = this.state;
+        let { translationX: dragX, velocityX, x: touchX } = nativeEvent;
+        if (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 === 'front') {
+            dragOffsetBasedOnStart =
+                gestureStartX > drawerWidth ? gestureStartX - drawerWidth : 0;
+        }
+        const startOffsetX = dragX + dragOffsetBasedOnStart + (this.drawerShown ? drawerWidth : 0);
+        const projOffsetX = startOffsetX + DRAG_TOSS * velocityX;
+        const shouldOpen = projOffsetX > drawerWidth / 2;
+        if (shouldOpen) {
+            this.animateDrawer(startOffsetX, drawerWidth, velocityX);
+        }
+        else {
+            this.animateDrawer(startOffsetX, 0, velocityX);
+        }
+    };
+    updateShowing = (showing) => {
+        this.drawerShown = showing;
+        this.accessibilityIsModalView.current?.setNativeProps({
+            accessibilityViewIsModal: showing,
+        });
+        this.pointerEventsView.current?.setNativeProps({
+            pointerEvents: showing ? 'auto' : 'none',
+        });
+        const { drawerPosition, minSwipeDistance, edgeWidth } = this.props;
+        const fromLeft = drawerPosition === 'left';
+        // gestureOrientation is 1 if the expected gesture is from left to right and
+        // -1 otherwise e.g. when drawer is on the left and is closed we expect left
+        // to right gesture, thus orientation will be 1.
+        const gestureOrientation = (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
+        // When drawer is closed we want the hitSlop to be horizontally shorter than
+        // the container size by the value of SLOP. This will make it only activate
+        // when gesture happens not further than SLOP away from the edge
+        const hitSlop = fromLeft
+            ? { left: 0, width: showing ? undefined : edgeWidth }
+            : { right: 0, width: showing ? undefined : edgeWidth };
+        // @ts-ignore internal API, maybe could be fixed in handler types
+        this.panGestureHandler.current?.setNativeProps({
+            hitSlop,
+            activeOffsetX: gestureOrientation * minSwipeDistance,
+        });
+    };
+    animateDrawer = (fromValue, toValue, velocity, speed) => {
+        this.state.dragX.setValue(0);
+        this.state.touchX.setValue(this.props.drawerPosition === 'left' ? 0 : this.state.containerWidth);
+        if (fromValue != null) {
+            let nextFramePosition = fromValue;
+            if (this.props.useNativeAnimations) {
+                // When using native driver, we predict the next position of the
+                // animation because it takes one frame of a roundtrip to pass RELEASE
+                // event from native driver to JS before we can start animating. Without
+                // it, it is more noticable that the frame is dropped.
+                if (fromValue < toValue && velocity > 0) {
+                    nextFramePosition = Math.min(fromValue + velocity / 60.0, toValue);
+                }
+                else if (fromValue > toValue && velocity < 0) {
+                    nextFramePosition = Math.max(fromValue + velocity / 60.0, toValue);
+                }
+            }
+            this.state.drawerTranslation.setValue(nextFramePosition);
+        }
+        const willShow = toValue !== 0;
+        this.updateShowing(willShow);
+        this.emitStateChanged(SETTLING, willShow);
+        this.setState({ drawerState: SETTLING });
+        if (this.props.hideStatusBar) {
+            StatusBar.setHidden(willShow, this.props.statusBarAnimation || 'slide');
+        }
+        Animated.spring(this.state.drawerTranslation, {
+            velocity,
+            bounciness: 0,
+            toValue,
+            useNativeDriver: this.props.useNativeAnimations,
+            speed: speed ?? undefined,
+        }).start(({ finished }) => {
+            if (finished) {
+                this.emitStateChanged(IDLE, willShow);
+                this.setState({ drawerOpened: willShow });
+                if (this.state.drawerState !== DRAGGING) {
+                    // It's possilbe that user started drag while the drawer
+                    // was settling, don't override state in this case
+                    this.setState({ drawerState: IDLE });
+                }
+                if (willShow) {
+                    this.props.onDrawerOpen?.();
+                }
+                else {
+                    this.props.onDrawerClose?.();
+                }
+            }
+        });
+    };
+    // eslint-disable-next-line @eslint-react/no-unused-class-component-members
+    openDrawer = (options = {}) => {
+        this.animateDrawer(
+        // TODO: decide if it should be null or undefined is the proper value
+        undefined, this.props.drawerWidth, options.velocity ? options.velocity : 0, options.speed);
+        // We need to force the update, otherwise the overlay is not rerendered and
+        // it would not be clickable
+        this.forceUpdate();
+    };
+    closeDrawer = (options = {}) => {
+        // TODO: decide if it should be null or undefined is the proper value
+        this.animateDrawer(undefined, 0, options.velocity ? options.velocity : 0, options.speed);
+        // We need to force the update, otherwise the overlay is not rerendered and
+        // it would be still clickable
+        this.forceUpdate();
+    };
+    renderOverlay = () => {
+        /* Overlay styles */
+        invariant(this.openValue, 'should be set');
+        let overlayOpacity;
+        if (this.state.drawerState !== IDLE) {
+            overlayOpacity = this.openValue;
+        }
+        else {
+            overlayOpacity = this.state.drawerOpened ? 1 : 0;
+        }
+        const dynamicOverlayStyles = {
+            opacity: overlayOpacity,
+            backgroundColor: this.props.overlayColor,
+        };
+        return (<TapGestureHandler onHandlerStateChange={this.onTapHandlerStateChange}>
+        <Animated.View pointerEvents={this.drawerShown ? 'auto' : 'none'} ref={this.pointerEventsView} style={[styles.overlay, dynamicOverlayStyles]}/>
+      </TapGestureHandler>);
+    };
+    renderDrawer = () => {
+        const { drawerBackgroundColor, drawerWidth, drawerPosition, drawerType, drawerContainerStyle, contentContainerStyle, } = this.props;
+        const fromLeft = drawerPosition === 'left';
+        const drawerSlide = drawerType !== 'back';
+        const containerSlide = drawerType !== 'front';
+        // We rely on row and row-reverse flex directions to position the drawer
+        // properly. Apparently for RTL these are flipped which requires us to use
+        // the opposite setting for the drawer to appear from left or right
+        // according to the drawerPosition prop
+        const reverseContentDirection = I18nManager.isRTL ? fromLeft : !fromLeft;
+        const dynamicDrawerStyles = {
+            backgroundColor: drawerBackgroundColor,
+            width: drawerWidth,
+        };
+        const openValue = this.openValue;
+        invariant(openValue, 'should be set');
+        let containerStyles;
+        if (containerSlide) {
+            const containerTranslateX = openValue.interpolate({
+                inputRange: [0, 1],
+                outputRange: fromLeft ? [0, drawerWidth] : [0, -drawerWidth],
+                extrapolate: 'clamp',
+            });
+            containerStyles = {
+                transform: [{ translateX: containerTranslateX }],
+            };
+        }
+        let drawerTranslateX = 0;
+        if (drawerSlide) {
+            const closedDrawerOffset = fromLeft ? -drawerWidth : drawerWidth;
+            if (this.state.drawerState !== IDLE) {
+                drawerTranslateX = openValue.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [closedDrawerOffset, 0],
+                    extrapolate: 'clamp',
+                });
+            }
+            else {
+                drawerTranslateX = this.state.drawerOpened ? 0 : closedDrawerOffset;
+            }
+        }
+        const drawerStyles = {
+            transform: [{ translateX: drawerTranslateX }],
+            flexDirection: reverseContentDirection ? 'row-reverse' : 'row',
+        };
+        return (<Animated.View style={styles.main} onLayout={this.handleContainerLayout}>
+        <Animated.View style={[
+                drawerType === 'front'
+                    ? styles.containerOnBack
+                    : styles.containerInFront,
+                containerStyles,
+                contentContainerStyle,
+            ]} importantForAccessibility={this.drawerShown ? 'no-hide-descendants' : 'yes'}>
+          {typeof this.props.children === 'function'
+                ? this.props.children(this.openValue)
+                : this.props.children}
+          {this.renderOverlay()}
+        </Animated.View>
+        <Animated.View pointerEvents="box-none" ref={this.accessibilityIsModalView} accessibilityViewIsModal={this.drawerShown} style={[styles.drawerContainer, drawerStyles, drawerContainerStyle]}>
+          <View style={dynamicDrawerStyles}>
+            {this.props.renderNavigationView(this.openValue)}
+          </View>
+        </Animated.View>
+      </Animated.View>);
+    };
+    setPanGestureRef = (ref) => {
+        // TODO(TS): make sure it is OK taken from
+        // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842
+        this.panGestureHandler.current = ref;
+        this.props.onGestureRef?.(ref);
+    };
+    render() {
+        const { drawerPosition, drawerLockMode, edgeWidth, minSwipeDistance } = this.props;
+        const fromLeft = drawerPosition === 'left';
+        // gestureOrientation is 1 if the expected gesture is from left to right and
+        // -1 otherwise e.g. when drawer is on the left and is closed we expect left
+        // to right gesture, thus orientation will be 1.
+        const gestureOrientation = (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
+        // When drawer is closed we want the hitSlop to be horizontally shorter than
+        // the container size by the value of SLOP. This will make it only activate
+        // when gesture happens not further than SLOP away from the edge
+        const hitSlop = fromLeft
+            ? { left: 0, width: this.drawerShown ? undefined : edgeWidth }
+            : { right: 0, width: this.drawerShown ? undefined : edgeWidth };
+        return (<PanGestureHandler 
+        // @ts-ignore could be fixed in handler types
+        userSelect={this.props.userSelect} activeCursor={this.props.activeCursor} mouseButton={this.props.mouseButton} enableContextMenu={this.props.enableContextMenu} ref={this.setPanGestureRef} hitSlop={hitSlop} activeOffsetX={gestureOrientation * minSwipeDistance} failOffsetY={[-15, 15]} onGestureEvent={this.onGestureEvent} onHandlerStateChange={this.openingHandlerStateChange} enableTrackpadTwoFingerGesture={this.props.enableTrackpadTwoFingerGesture} enabled={drawerLockMode !== 'locked-closed' && drawerLockMode !== 'locked-open'}>
+        {this.renderDrawer()}
+      </PanGestureHandler>);
+    }
+}
+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/GestureButtons.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { BaseButtonProps, RectButtonProps, BorderlessButtonProps } from './GestureButtonsProps';
+export declare const RawButton: React.ForwardRefExoticComponent<import("./GestureButtonsProps").RawButtonProps & import("..").NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
+export declare const BaseButton: React.ForwardRefExoticComponent<Omit<BaseButtonProps, "innerRef"> & React.RefAttributes<React.ComponentType<{}>>>;
+export declare const RectButton: React.ForwardRefExoticComponent<Omit<RectButtonProps, "innerRef"> & React.RefAttributes<React.ComponentType<{}>>>;
+export declare const BorderlessButton: React.ForwardRefExoticComponent<Omit<BorderlessButtonProps, "innerRef"> & React.RefAttributes<React.ComponentType<{}>>>;
+export { default as PureNativeButton } from './GestureHandlerButton';

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

@@ -0,0 +1 @@
+{"version":3,"file":"GestureButtons.d.ts","sourceRoot":"","sources":["../../../src/components/GestureButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAEV,eAAe,EAEf,eAAe,EAEf,qBAAqB,EACtB,MAAM,uBAAuB,CAAC;AAG/B,eAAO,MAAM,SAAS,8KAGpB,CAAC;AA8HH,eAAO,MAAM,UAAU,mHAGyC,CAAC;AAqEjE,eAAO,MAAM,UAAU,mHAGyC,CAAC;AAsCjE,eAAO,MAAM,gBAAgB,yHAGyC,CAAC;AAEvE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}