react-native-gesture-handler 2.5.0 → 2.6.0

package/lib/typescript/{web → web_hammer}/FlingGestureHandler.d.ts

@@ -37,6 +37,7 @@ declare class FlingGestureHandler extends DraggingGestureHandler {
         activeOffsetYStart: number;
         activeOffsetYEnd: number;
         waitFor: any[] | null;
+        simultaneousHandlers: any[] | null;
     }>;
 }
 export default FlingGestureHandler;

package/lib/typescript/{web → web_hammer}/GestureHandler.d.ts

@@ -21,6 +21,7 @@ export declare type Config = Partial<{
     activeOffsetYStart: number;
     activeOffsetYEnd: number;
     waitFor: any[] | null;
+    simultaneousHandlers: any[] | null;
 }>;
 declare abstract class GestureHandler {
     handlerTag: any;
@@ -43,6 +44,7 @@ declare abstract class GestureHandler {
     private ref;
     abstract get name(): string;
     get id(): string;
+    get isNative(): boolean;
     get isDiscrete(): boolean;
     get shouldEnableGestureOnSetup(): boolean;
     constructor();
@@ -65,6 +67,7 @@ declare abstract class GestureHandler {
         activeOffsetYStart: number;
         activeOffsetYEnd: number;
         waitFor: any[] | null;
+        simultaneousHandlers: any[] | null;
     }>;
     onWaitingEnded(_gesture: this): void;
     removePendingGesture(id: string): void;
@@ -98,6 +101,7 @@ declare abstract class GestureHandler {
         activeOffsetYStart: number;
         activeOffsetYEnd: number;
         waitFor: any[] | null;
+        simultaneousHandlers: any[] | null;
     }>;
     destroy: () => void;
     isPointInView: ({ x, y }: {
@@ -124,6 +128,7 @@ declare abstract class GestureHandler {
     forceInvalidate(event: HammerInputExt): void;
     cancelEvent(event: HammerInputExt): void;
     onRawEvent({ isFirst }: HammerInputExt): void;
+    shouldUseTouchEvents(config: Config): boolean;
     setView(ref: Parameters<typeof findNodeHandle>['0'], propsRef: any): void;
     setupEvents(): void;
     onStart({ deltaX, deltaY, rotation }: HammerInputExt): void;
@@ -135,5 +140,6 @@ declare abstract class GestureHandler {
     };
     sync: () => void;
     simulateCancelEvent(_inputData: any): void;
+    ensureConfig(config: Config): Required<Config>;
 }
 export default GestureHandler;

package/lib/typescript/{web → web_hammer}/IndiscreteGestureHandler.d.ts

@@ -27,6 +27,7 @@ declare abstract class IndiscreteGestureHandler extends GestureHandler {
         activeOffsetYStart: number;
         activeOffsetYEnd: number;
         waitFor: any[] | null;
+        simultaneousHandlers: any[] | null;
     }>;
     isGestureEnabledForEvent({ minPointers, maxPointers }: any, _recognizer: any, { maxPointers: pointerLength }: any): {
         failed: boolean;

package/lib/typescript/{web → web_hammer}/LongPressGestureHandler.d.ts

@@ -24,6 +24,7 @@ declare class LongPressGestureHandler extends PressGestureHandler {
         activeOffsetYStart: number;
         activeOffsetYEnd: number;
         waitFor: any[] | null;
+        simultaneousHandlers: any[] | null;
     }> | {
         shouldCancelWhenOutside: boolean;
         maxDistSq: number;

package/lib/typescript/{web → web_hammer}/NativeViewGestureHandler.d.ts

@@ -1,6 +1,7 @@
 import { HammerInputExt } from './GestureHandler';
 import PressGestureHandler from './PressGestureHandler';
 declare class NativeViewGestureHandler extends PressGestureHandler {
+    get isNative(): boolean;
     onRawEvent(ev: HammerInputExt): void;
 }
 export default NativeViewGestureHandler;

package/lib/typescript/web_hammer/NodeManager.d.ts

@@ -0,0 +1,8 @@
+import { ValueOf } from '../typeUtils';
+import { HammerGestures } from '../RNGestureHandlerModule.web';
+export declare function getHandler(tag: number): import("./NativeViewGestureHandler").default | import("./PanGestureHandler").default | import("./TapGestureHandler").default | import("./LongPressGestureHandler").default | import("./PinchGestureHandler").default | import("./RotationGestureHandler").default | import("./FlingGestureHandler").default;
+export declare function createGestureHandler(handlerTag: number, handler: InstanceType<ValueOf<typeof HammerGestures>>): void;
+export declare function dropGestureHandler(handlerTag: number): void;
+export declare function getNodes(): {
+    [x: number]: import("./NativeViewGestureHandler").default | import("./PanGestureHandler").default | import("./TapGestureHandler").default | import("./LongPressGestureHandler").default | import("./PinchGestureHandler").default | import("./RotationGestureHandler").default | import("./FlingGestureHandler").default;
+};

package/lib/typescript/{web → web_hammer}/PanGestureHandler.d.ts

@@ -30,6 +30,7 @@ declare class PanGestureHandler extends DraggingGestureHandler {
         activeOffsetYStart: number;
         activeOffsetYEnd: number;
         waitFor: any[] | null;
+        simultaneousHandlers: any[] | null;
     }>;
     shouldFailUnderCustomCriteria({ deltaX, deltaY }: HammerInputExt, criteria: any): boolean;
     shouldActivateUnderCustomCriteria({ deltaX, deltaY, velocity }: any, criteria: any): boolean;

package/lib/typescript/{web → web_hammer}/PressGestureHandler.d.ts

@@ -34,6 +34,7 @@ declare class PressGestureHandler extends DiscreteGestureHandler {
         activeOffsetYStart: number;
         activeOffsetYEnd: number;
         waitFor: any[] | null;
+        simultaneousHandlers: any[] | null;
     }> | {
         shouldCancelWhenOutside: boolean;
         maxDistSq: number;
@@ -76,6 +77,7 @@ declare class PressGestureHandler extends DiscreteGestureHandler {
         activeOffsetYStart: number;
         activeOffsetYEnd: number;
         waitFor: any[] | null;
+        simultaneousHandlers: any[] | null;
     }>;
 }
 export default PressGestureHandler;

package/lib/typescript/{web → web_hammer}/TapGestureHandler.d.ts

@@ -49,6 +49,7 @@ declare class TapGestureHandler extends DiscreteGestureHandler {
         activeOffsetYStart: number;
         activeOffsetYEnd: number;
         waitFor: any[] | null;
+        simultaneousHandlers: any[] | null;
     }>;
     onGestureEnded(...props: any): void;
     onWaitingEnded(_gesture: any): void;

package/lib/typescript/web_hammer/constants.d.ts

@@ -0,0 +1,39 @@
+export declare const CONTENT_TOUCHES_DELAY = 240;
+export declare const CONTENT_TOUCHES_QUICK_TAP_END_DELAY = 50;
+export declare const MULTI_FINGER_PAN_MAX_PINCH_THRESHOLD = 0.1;
+export declare const MULTI_FINGER_PAN_MAX_ROTATION_THRESHOLD = 7;
+export declare const DEG_RAD: number;
+export declare const EventMap: {
+    readonly 1: 2;
+    readonly 2: 4;
+    readonly 4: 5;
+    readonly 8: 1;
+};
+export declare const Direction: {
+    RIGHT: number;
+    LEFT: number;
+    UP: number;
+    DOWN: number;
+};
+export declare const DirectionMap: {
+    4: number;
+    2: number;
+    8: number;
+    16: number;
+};
+export declare const HammerInputNames: {
+    1: string;
+    2: string;
+    4: string;
+    8: string;
+};
+export declare const HammerDirectionNames: {
+    6: string;
+    8: string;
+    16: string;
+    24: string;
+    1: string;
+    30: string;
+    4: string;
+    2: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build",

package/src/EnableExperimentalWebImplementation.ts

@@ -0,0 +1,18 @@
+let EXPERIMENTAL_WEB_IMPLEMENTATION = false;
+let getWasCalled = false;
+
+export function enableExperimentalWebImplementation(shouldEnable = true): void {
+  if (getWasCalled) {
+    console.error(
+      'Some parts of this application have already started using old gesture handler implementation. No changes will be applied. You can try enabling new implementation earlier.'
+    );
+    return;
+  }
+
+  EXPERIMENTAL_WEB_IMPLEMENTATION = shouldEnable;
+}
+
+export function isExperimentalWebImplementationEnabled(): boolean {
+  getWasCalled = true;
+  return EXPERIMENTAL_WEB_IMPLEMENTATION;
+}

package/src/RNGestureHandlerModule.macos.ts

@@ -1,61 +1,113 @@
 import { ActionType } from './ActionType';
-import { Direction } from './web/constants';
-import FlingGestureHandler from './web/FlingGestureHandler';
-import LongPressGestureHandler from './web/LongPressGestureHandler';
-import NativeViewGestureHandler from './web/NativeViewGestureHandler';
-import * as NodeManager from './web/NodeManager';
-import PanGestureHandler from './web/PanGestureHandler';
-import PinchGestureHandler from './web/PinchGestureHandler';
-import RotationGestureHandler from './web/RotationGestureHandler';
-import TapGestureHandler from './web/TapGestureHandler';
+import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
+
+//GestureHandlers
+import InteractionManager from './web/tools/InteractionManager';
+import NodeManager from './web/tools/NodeManager';
+import PanGestureHandler from './web/handlers/PanGestureHandler';
+import TapGestureHandler from './web/handlers/TapGestureHandler';
+import LongPressGestureHandler from './web/handlers/LongPressGestureHandler';
+import PinchGestureHandler from './web/handlers/PinchGestureHandler';
+import RotationGestureHandler from './web/handlers/RotationGestureHandler';
+import FlingGestureHandler from './web/handlers/FlingGestureHandler';
+import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
+
+//Hammer Handlers
+import * as HammerNodeManager from './web_hammer/NodeManager';
+import HammerNativeViewGestureHandler from './web_hammer/NativeViewGestureHandler';
+import HammerPanGestureHandler from './web_hammer/PanGestureHandler';
+import HammerTapGestureHandler from './web_hammer/TapGestureHandler';
+import HammerLongPressGestureHandler from './web_hammer/LongPressGestureHandler';
+import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
+import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
+import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
+import { Config } from './web_hammer/GestureHandler';
 
 export const Gestures = {
+  NativeViewGestureHandler,
   PanGestureHandler,
-  RotationGestureHandler,
-  PinchGestureHandler,
   TapGestureHandler,
-  NativeViewGestureHandler,
   LongPressGestureHandler,
+  PinchGestureHandler,
+  RotationGestureHandler,
   FlingGestureHandler,
-  // ForceTouchGestureHandler,
+};
+
+export const HammerGestures = {
+  NativeViewGestureHandler: HammerNativeViewGestureHandler,
+  PanGestureHandler: HammerPanGestureHandler,
+  TapGestureHandler: HammerTapGestureHandler,
+  LongPressGestureHandler: HammerLongPressGestureHandler,
+  PinchGestureHandler: HammerPinchGestureHandler,
+  RotationGestureHandler: HammerRotationGestureHandler,
+  FlingGestureHandler: HammerFlingGestureHandler,
 };
 
 export default {
-  Direction,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  handleSetJSResponder() {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  handleClearJSResponder() {},
+  // Direction,
+  handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
+    console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
+  },
+  handleClearJSResponder() {
+    console.warn('handleClearJSResponder: ');
+  },
   createGestureHandler<T>(
     handlerName: keyof typeof Gestures,
     handlerTag: number,
     config: T
   ) {
-    //TODO(TS) extends config
-    if (!(handlerName in Gestures))
-      throw new Error(
-        `react-native-gesture-handler: ${handlerName} is not supported on macos.`
+    if (isExperimentalWebImplementationEnabled()) {
+      if (!(handlerName in Gestures)) return;
+
+      const interactionManager = new InteractionManager();
+
+      const GestureClass = Gestures[handlerName];
+      NodeManager.createGestureHandler(handlerTag, new GestureClass());
+      interactionManager.configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        (config as unknown) as Config
       );
-    const GestureClass = Gestures[handlerName];
-    NodeManager.createGestureHandler(handlerTag, new GestureClass());
+    } else {
+      if (!(handlerName in HammerGestures)) return;
+
+      const GestureClass = HammerGestures[handlerName];
+      HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
+    }
+
     this.updateGestureHandler(handlerTag, config);
   },
   attachGestureHandler(
     handlerTag: number,
-    newView: number,
+    newView: number, //ref
     _actionType: ActionType,
     propsRef: React.RefObject<unknown>
   ) {
-    NodeManager.getHandler(handlerTag).setView(newView, propsRef);
+    if (isExperimentalWebImplementationEnabled()) {
+      NodeManager.getHandler(handlerTag).init(newView, propsRef);
+    } else {
+      HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
+    }
   },
   updateGestureHandler(handlerTag: number, newConfig: any) {
-    NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+    if (isExperimentalWebImplementationEnabled()) {
+      NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+    } else {
+      HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+    }
   },
   getGestureHandlerNode(handlerTag: number) {
-    return NodeManager.getHandler(handlerTag);
+    if (isExperimentalWebImplementationEnabled()) {
+      return NodeManager.getHandler(handlerTag);
+    } else {
+      return HammerNodeManager.getHandler(handlerTag);
+    }
   },
   dropGestureHandler(handlerTag: number) {
-    NodeManager.dropGestureHandler(handlerTag);
+    if (isExperimentalWebImplementationEnabled()) {
+      NodeManager.dropGestureHandler(handlerTag);
+    } else {
+      HammerNodeManager.dropGestureHandler(handlerTag);
+    }
   },
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   flushOperations() {},

package/src/RNGestureHandlerModule.web.ts

@@ -1,27 +1,52 @@
 import { ActionType } from './ActionType';
-import { Direction } from './web/constants';
-import FlingGestureHandler from './web/FlingGestureHandler';
-import LongPressGestureHandler from './web/LongPressGestureHandler';
-import NativeViewGestureHandler from './web/NativeViewGestureHandler';
-import * as NodeManager from './web/NodeManager';
-import PanGestureHandler from './web/PanGestureHandler';
-import PinchGestureHandler from './web/PinchGestureHandler';
-import RotationGestureHandler from './web/RotationGestureHandler';
-import TapGestureHandler from './web/TapGestureHandler';
+
+//GestureHandlers
+import InteractionManager from './web/tools/InteractionManager';
+import NodeManager from './web/tools/NodeManager';
+import PanGestureHandler from './web/handlers/PanGestureHandler';
+import TapGestureHandler from './web/handlers/TapGestureHandler';
+import LongPressGestureHandler from './web/handlers/LongPressGestureHandler';
+import PinchGestureHandler from './web/handlers/PinchGestureHandler';
+import RotationGestureHandler from './web/handlers/RotationGestureHandler';
+import FlingGestureHandler from './web/handlers/FlingGestureHandler';
+import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
+
+//Hammer Handlers
+import * as HammerNodeManager from './web_hammer/NodeManager';
+import HammerNativeViewGestureHandler from './web_hammer/NativeViewGestureHandler';
+import HammerPanGestureHandler from './web_hammer/PanGestureHandler';
+import HammerTapGestureHandler from './web_hammer/TapGestureHandler';
+import HammerLongPressGestureHandler from './web_hammer/LongPressGestureHandler';
+import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
+import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
+import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
+import { Config } from './web/interfaces';
+import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
 
 export const Gestures = {
+  NativeViewGestureHandler,
   PanGestureHandler,
-  RotationGestureHandler,
-  PinchGestureHandler,
   TapGestureHandler,
-  NativeViewGestureHandler,
   LongPressGestureHandler,
+  PinchGestureHandler,
+  RotationGestureHandler,
   FlingGestureHandler,
-  // ForceTouchGestureHandler,
 };
 
+export const HammerGestures = {
+  NativeViewGestureHandler: HammerNativeViewGestureHandler,
+  PanGestureHandler: HammerPanGestureHandler,
+  TapGestureHandler: HammerTapGestureHandler,
+  LongPressGestureHandler: HammerLongPressGestureHandler,
+  PinchGestureHandler: HammerPinchGestureHandler,
+  RotationGestureHandler: HammerRotationGestureHandler,
+  FlingGestureHandler: HammerFlingGestureHandler,
+};
+
+const interactionManager = new InteractionManager();
+
 export default {
-  Direction,
+  // Direction,
   handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
     console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
   },
@@ -33,14 +58,31 @@ export default {
     handlerTag: number,
     config: T
   ) {
-    //TODO(TS) extends config
-    if (!(handlerName in Gestures))
-      throw new Error(
-        `react-native-gesture-handler: ${handlerName} is not supported on web.`
+    if (isExperimentalWebImplementationEnabled()) {
+      if (!(handlerName in Gestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
+
+      const GestureClass = Gestures[handlerName];
+      NodeManager.createGestureHandler(handlerTag, new GestureClass());
+      interactionManager.configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        (config as unknown) as Config
       );
-    const GestureClass = Gestures[handlerName];
-    NodeManager.createGestureHandler(handlerTag, new GestureClass());
-    this.updateGestureHandler(handlerTag, config);
+    } else {
+      if (!(handlerName in HammerGestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
+
+      const GestureClass = HammerGestures[handlerName];
+      HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
+    }
+
+    this.updateGestureHandler(handlerTag, (config as unknown) as Config);
   },
   attachGestureHandler(
     handlerTag: number,
@@ -48,16 +90,37 @@ export default {
     _actionType: ActionType,
     propsRef: React.RefObject<unknown>
   ) {
-    NodeManager.getHandler(handlerTag).setView(newView, propsRef);
+    if (isExperimentalWebImplementationEnabled()) {
+      NodeManager.getHandler(handlerTag).init(newView, propsRef);
+    } else {
+      HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
+    }
   },
-  updateGestureHandler(handlerTag: number, newConfig: any) {
-    NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+  updateGestureHandler(handlerTag: number, newConfig: Config) {
+    if (isExperimentalWebImplementationEnabled()) {
+      NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+
+      interactionManager.configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        newConfig
+      );
+    } else {
+      HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+    }
   },
   getGestureHandlerNode(handlerTag: number) {
-    return NodeManager.getHandler(handlerTag);
+    if (isExperimentalWebImplementationEnabled()) {
+      return NodeManager.getHandler(handlerTag);
+    } else {
+      return HammerNodeManager.getHandler(handlerTag);
+    }
   },
   dropGestureHandler(handlerTag: number) {
-    NodeManager.dropGestureHandler(handlerTag);
+    if (isExperimentalWebImplementationEnabled()) {
+      NodeManager.dropGestureHandler(handlerTag);
+    } else {
+      HammerNodeManager.dropGestureHandler(handlerTag);
+    }
   },
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   flushOperations() {},

package/src/RNRenderer.ts

@@ -0,0 +1,3 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+export { default as RNRenderer } from 'react-native/Libraries/Renderer/shims/ReactNative';

package/src/RNRenderer.web.ts

@@ -0,0 +1,3 @@
+export const RNRenderer = {
+  findHostInstance_DEPRECATED: (_ref: any) => null,
+};

package/src/components/DrawerLayout.tsx

@@ -203,10 +203,7 @@ export default class DrawerLayout extends Component<
     this.updateAnimatedEvent(props, this.state);
   }
 
-  UNSAFE_componentWillUpdate(
-    props: DrawerLayoutProps,
-    state: DrawerLayoutState
-  ) {
+  shouldComponentUpdate(props: DrawerLayoutProps, state: DrawerLayoutState) {
     if (
       this.props.drawerPosition !== props.drawerPosition ||
       this.props.drawerWidth !== props.drawerWidth ||
@@ -215,6 +212,8 @@ export default class DrawerLayout extends Component<
     ) {
       this.updateAnimatedEvent(props, state);
     }
+
+    return true;
   }
 
   private openValue?: Animated.AnimatedInterpolation;

package/src/components/GestureButtons.tsx

@@ -72,6 +72,12 @@ export interface BaseButtonProps extends RawButtonProps {
    */
   onPress?: (pointerInside: boolean) => void;
 
+  /**
+   * Called when the button gets pressed and is held for `delayLongPress`
+   * milliseconds.
+   */
+  onLongPress?: () => void;
+
   /**
    * Called when button changes from inactive to active and vice versa. It
    * passes active state as a boolean variable as a first parameter for that
@@ -80,6 +86,12 @@ export interface BaseButtonProps extends RawButtonProps {
   onActiveStateChange?: (active: boolean) => void;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+
+  /**
+   * Delay, in milliseconds, after which the `onLongPress` callback gets called.
+   * Defaults to 600.
+   */
+  delayLongPress?: number;
 }
 
 export interface RectButtonProps extends BaseButtonProps {
@@ -111,11 +123,18 @@ export const RawButton = createNativeWrapper(GestureHandlerButton, {
 });
 
 export class BaseButton extends React.Component<BaseButtonProps> {
+  static defaultProps = {
+    delayLongPress: 600,
+  };
+
   private lastActive: boolean;
+  private longPressTimeout: ReturnType<typeof setTimeout> | undefined;
+  private longPressDetected: boolean;
 
   constructor(props: BaseButtonProps) {
     super(props);
     this.lastActive = false;
+    this.longPressDetected = false;
   }
 
   private handleEvent = ({
@@ -129,6 +148,7 @@ export class BaseButton extends React.Component<BaseButtonProps> {
     }
 
     if (
+      !this.longPressDetected &&
       oldState === State.ACTIVE &&
       state !== State.CANCELLED &&
       this.lastActive &&
@@ -137,9 +157,46 @@ export class BaseButton extends React.Component<BaseButtonProps> {
       this.props.onPress(active);
     }
 
+    if (
+      !this.lastActive &&
+      // NativeViewGestureHandler sends different events based on platform
+      state === (Platform.OS !== 'android' ? State.ACTIVE : State.BEGAN) &&
+      pointerInside
+    ) {
+      this.longPressDetected = false;
+      if (this.props.onLongPress) {
+        this.longPressTimeout = setTimeout(
+          this.onLongPress,
+          this.props.delayLongPress
+        );
+      }
+    } else if (
+      // cancel longpress timeout if it's set and the finger moved out of the view
+      state === State.ACTIVE &&
+      !pointerInside &&
+      this.longPressTimeout !== undefined
+    ) {
+      clearTimeout(this.longPressTimeout);
+      this.longPressTimeout = undefined;
+    } else if (
+      // cancel longpress timeout if it's set and the gesture has finished
+      this.longPressTimeout !== undefined &&
+      (state === State.END ||
+        state === State.CANCELLED ||
+        state === State.FAILED)
+    ) {
+      clearTimeout(this.longPressTimeout);
+      this.longPressTimeout = undefined;
+    }
+
     this.lastActive = active;
   };
 
+  private onLongPress = () => {
+    this.longPressDetected = true;
+    this.props.onLongPress?.();
+  };
+
   // Normally, the parent would execute it's handler first, then forward the
   // event to listeners. However, here our handler is virtually only forwarding
   // events to listeners, so we reverse the order to keep the proper order of