react-native-gesture-handler 2.20.1 → 2.21.0

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

@@ -0,0 +1,162 @@
+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;
+    /**
+     * 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/ReanimatedSwipeable.d.ts

@@ -3,6 +3,10 @@ import type { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
 import { SharedValue } from 'react-native-reanimated';
 import { StyleProp, ViewStyle } from 'react-native';
 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
@@ -61,47 +65,49 @@ export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableEx
     /**
      * Called when action panel gets open (either right or left).
      */
-    onSwipeableOpen?: (direction: 'left' | 'right', swipeable: SwipeableMethods) => void;
+    onSwipeableOpen?: (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => void;
     /**
      * Called when action panel is closed.
      */
-    onSwipeableClose?: (direction: 'left' | 'right', swipeable: SwipeableMethods) => void;
+    onSwipeableClose?: (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => void;
     /**
      * Called when action panel starts animating on open (either right or left).
      */
-    onSwipeableWillOpen?: (direction: 'left' | 'right') => void;
+    onSwipeableWillOpen?: (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => void;
     /**
      * Called when action panel starts animating on close.
      */
-    onSwipeableWillClose?: (direction: 'left' | 'right') => void;
+    onSwipeableWillClose?: (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => void;
     /**
      * Called when action panel starts being shown on dragging to open.
      */
-    onSwipeableOpenStartDrag?: (direction: 'left' | 'right') => void;
+    onSwipeableOpenStartDrag?: (direction: SwipeDirection.LEFT | SwipeDirection.RIGHT) => void;
     /**
      * Called when action panel starts being shown on dragging to close.
      */
-    onSwipeableCloseStartDrag?: (direction: 'left' | 'right') => void;
+    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.
      *
-     * This map describes the values to use as inputRange for extra interpolation:
-     * AnimatedValue: [startValue, endValue]
-     *
-     * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, +]
+     * `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?: (progressAnimatedValue: SharedValue<number>, dragAnimatedValue: SharedValue<number>, swipeable: SwipeableMethods) => React.ReactNode;
+    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.
      *
-     * This map describes the values to use as inputRange for extra interpolation:
-     * AnimatedValue: [startValue, endValue]
-     *
-     * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, -]
+     * `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?: (progressAnimatedValue: SharedValue<number>, dragAnimatedValue: SharedValue<number>, swipeable: SwipeableMethods) => React.ReactNode;
+    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

package/lib/typescript/findNodeHandle.d.ts

@@ -0,0 +1,2 @@
+import { findNodeHandle } from 'react-native';
+export default findNodeHandle;

package/lib/typescript/findNodeHandle.web.d.ts

@@ -0,0 +1,2 @@
+import type { GestureHandlerRef, SVGRef } from './web/interfaces';
+export default function findNodeHandle(viewRef: GestureHandlerRef | SVGRef | HTMLElement | SVGElement): HTMLElement | SVGElement | number;

package/lib/typescript/handlers/gestures/GestureDetector/Wrap.web.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const Wrap: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const AnimatedWrap: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/lib/typescript/web/handlers/GestureHandler.d.ts

@@ -67,7 +67,8 @@ export default abstract class GestureHandler implements IGestureHandler {
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
     protected onPointerMoveOver(_event: AdaptedEvent): void;
     protected onPointerMoveOut(_event: AdaptedEvent): void;
-    private tryToSendMoveEvent;
+    protected onWheel(_event: AdaptedEvent): void;
+    protected tryToSendMoveEvent(out: boolean, event: AdaptedEvent): void;
     protected tryToSendTouchEvent(event: AdaptedEvent): void;
     sendTouchEvent(event: AdaptedEvent): void;
     sendEvent: (newState: State, oldState: State) => void;

package/lib/typescript/web/handlers/PanGestureHandler.d.ts

@@ -28,6 +28,9 @@ export default class PanGestureHandler extends GestureHandler {
     private stylusData;
     private activateAfterLongPress;
     private activationTimeout;
+    private enableTrackpadTwoFingerGesture;
+    private endWheelTimeout;
+    private wheelDevice;
     init(ref: number, propsRef: React.RefObject<unknown>): void;
     updateGestureConfig({ enabled, ...props }: Config): void;
     protected resetConfig(): void;
@@ -47,6 +50,8 @@ export default class PanGestureHandler extends GestureHandler {
     protected onPointerRemove(event: AdaptedEvent): void;
     protected onPointerMove(event: AdaptedEvent): void;
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
+    private scheduleWheelEnd;
+    protected onWheel(event: AdaptedEvent): void;
     private shouldActivate;
     private shouldFail;
     private tryBegin;

package/lib/typescript/web/interfaces.d.ts

@@ -58,6 +58,7 @@ export interface Config extends Record<string, ConfigArgs> {
     shouldActivateOnStart?: boolean;
     disallowInterruption?: boolean;
     direction?: Directions;
+    enableTrackpadTwoFingerGesture?: boolean;
 }
 type NativeEventArgs = number | State | boolean | undefined;
 interface NativeEvent extends Record<string, NativeEventArgs> {
@@ -120,6 +121,7 @@ export interface AdaptedEvent {
     time: number;
     button?: MouseButton;
     stylusData?: StylusData;
+    wheelDeltaY?: number;
 }
 export declare enum EventTypes {
     DOWN = 0,
@@ -138,4 +140,18 @@ export declare enum TouchEventType {
     UP = 3,
     CANCELLED = 4
 }
+export declare enum WheelDevice {
+    UNDETERMINED = 0,
+    MOUSE = 1,
+    TOUCHPAD = 2
+}
+export type GestureHandlerRef = {
+    viewTag: GestureHandlerRef;
+    current: HTMLElement;
+};
+export type SVGRef = {
+    elementRef: {
+        current: SVGElement;
+    };
+};
 export {};

package/lib/typescript/web/tools/EventManager.d.ts

@@ -19,6 +19,7 @@ export default abstract class EventManager<T> {
     protected onPointerOutOfBounds(_event: AdaptedEvent): void;
     protected onPointerMoveOver(_event: AdaptedEvent): void;
     protected onPointerMoveOut(_event: AdaptedEvent): void;
+    protected onWheel(_event: AdaptedEvent): void;
     setOnPointerDown(callback: PointerEventCallback): void;
     setOnPointerAdd(callback: PointerEventCallback): void;
     setOnPointerUp(callback: PointerEventCallback): void;
@@ -30,6 +31,7 @@ export default abstract class EventManager<T> {
     setOnPointerOutOfBounds(callback: PointerEventCallback): void;
     setOnPointerMoveOver(callback: PointerEventCallback): void;
     setOnPointerMoveOut(callback: PointerEventCallback): void;
+    setOnWheel(callback: PointerEventCallback): void;
     protected markAsInBounds(pointerId: number): void;
     protected markAsOutOfBounds(pointerId: number): void;
     resetManager(): void;

package/lib/typescript/web/tools/PointerTracker.d.ts

@@ -24,14 +24,8 @@ export default class PointerTracker {
         x: number;
         y: number;
     };
-    getLastAbsoluteCoords(pointerId?: number): {
-        x: number;
-        y: number;
-    };
-    getLastRelativeCoords(pointerId?: number): {
-        x: number;
-        y: number;
-    };
+    getLastAbsoluteCoords(pointerId?: number): Point;
+    getLastRelativeCoords(pointerId?: number): Point;
     getAbsoluteCoordsAverage(): {
         x: number;
         y: number;

package/lib/typescript/web/tools/WheelEventManager.d.ts

@@ -0,0 +1,11 @@
+import EventManager from './EventManager';
+import { AdaptedEvent } from '../interfaces';
+export default class WheelEventManager extends EventManager<HTMLElement> {
+    private wheelDelta;
+    private resetDelta;
+    private wheelCallback;
+    registerListeners(): void;
+    unregisterListeners(): void;
+    protected mapEvent(event: WheelEvent): AdaptedEvent;
+    resetManager(): void;
+}

package/lib/typescript/web/utils.d.ts

@@ -1,5 +1,5 @@
 import { PointerType } from '../PointerType';
-import type { Point, StylusData } from './interfaces';
+import type { GestureHandlerRef, Point, StylusData, SVGRef } from './interfaces';
 export declare function isPointerInBounds(view: HTMLElement, { x, y }: Point): boolean;
 export declare const PointerTypeMapping: Map<string, PointerType>;
 export declare const degToRad: (degrees: number) => number;
@@ -9,3 +9,4 @@ export declare function calculateViewScale(view: HTMLElement): {
     scaleY: number;
 };
 export declare function tryExtractStylusData(event: PointerEvent): StylusData | undefined;
+export declare function isRNSVGElement(viewRef: SVGRef | GestureHandlerRef): boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.20.1",
-  "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
+  "version": "2.21.0",
+  "description": "Declarative API exposing native platform touch and gesture system to React Native",
   "scripts": {
     "prepare": "bob build && husky install",
     "test": "jest",

package/src/RNGestureHandlerModule.web.ts

@@ -9,6 +9,13 @@ import NodeManager from './web/tools/NodeManager';
 import * as HammerNodeManager from './web_hammer/NodeManager';
 import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
 
+// init method is called inside attachGestureHandler function. However, this function may
+// fail when received view is not valid HTML element. On the other hand, dropGestureHandler
+// will be called even if attach failed, which will result in crash.
+//
+// We use this flag to check whether or not dropGestureHandler should be called.
+let shouldPreventDrop = false;
+
 export default {
   handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
     console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
@@ -60,10 +67,18 @@ export default {
     _actionType: ActionType,
     propsRef: React.RefObject<unknown>
   ) {
-    if (
-      !(newView instanceof HTMLElement || newView instanceof React.Component)
-    ) {
-      return;
+    if (!(newView instanceof Element || newView instanceof React.Component)) {
+      shouldPreventDrop = true;
+
+      const handler = isNewWebImplementationEnabled()
+        ? NodeManager.getHandler(handlerTag)
+        : HammerNodeManager.getHandler(handlerTag);
+
+      const handlerName = handler.constructor.name;
+
+      throw new Error(
+        `${handlerName} with tag ${handlerTag} received child that is not valid HTML element.`
+      );
     }
 
     if (isNewWebImplementationEnabled()) {
@@ -94,6 +109,10 @@ export default {
     }
   },
   dropGestureHandler(handlerTag: number) {
+    if (shouldPreventDrop) {
+      return;
+    }
+
     if (isNewWebImplementationEnabled()) {
       NodeManager.dropGestureHandler(handlerTag);
     } else {

package/src/components/Pressable/Pressable.tsx

@@ -302,7 +302,7 @@ export default function Pressable(props: PressableProps) {
       Gesture.Native()
         .onBegin(() => {
           // Android sets BEGAN state on press down
-          if (Platform.OS === 'android') {
+          if (Platform.OS === 'android' || Platform.OS === 'macos') {
             isTouchPropagationAllowed.current = true;
           }
         })
@@ -358,11 +358,7 @@ export default function Pressable(props: PressableProps) {
     gesture.enabled(isPressableEnabled);
     gesture.runOnJS(true);
     gesture.hitSlop(appliedHitSlop);
-    gesture.shouldCancelWhenOutside(false);
-
-    if (Platform.OS !== 'web') {
-      gesture.shouldCancelWhenOutside(true);
-    }
+    gesture.shouldCancelWhenOutside(Platform.OS === 'web' ? false : true);
   }
 
   // Uses different hitSlop, to activate on hitSlop area instead of pressRetentionOffset area