react-native-gesture-handler 2.14.1 → 2.16.0-rc.0

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

@@ -1,5 +1,6 @@
 import type GestureHandler from '../handlers/GestureHandler';
 import { GestureHandlerDelegate, MeasureResult } from './GestureHandlerDelegate';
+import { Config } from '../interfaces';
 export declare class GestureHandlerWebDelegate implements GestureHandlerDelegate<HTMLElement> {
     private view;
     private gestureHandler;
@@ -13,9 +14,15 @@ export declare class GestureHandlerWebDelegate implements GestureHandlerDelegate
     measureView(): MeasureResult;
     reset(): void;
     tryResetCursor(): void;
+    private shouldDisableContextMenu;
+    private addContextMenuListeners;
+    private removeContextMenuListeners;
+    private disableContextMenu;
+    private enableContextMenu;
     onBegin(): void;
     onActivate(): void;
     onEnd(): void;
     onCancel(): void;
     onFail(): void;
+    destroy(config: Config): void;
 }

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

@@ -2,6 +2,8 @@ import { AdaptedEvent, EventTypes } from '../interfaces';
 import EventManager from './EventManager';
 export default class PointerEventManager extends EventManager<HTMLElement> {
     private trackedPointers;
+    private readonly mouseButtonsMapper;
+    constructor(view: HTMLElement);
     setListeners(): void;
     protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent;
     resetManager(): void;

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

@@ -1,4 +1,6 @@
+import { PointerType } from '../PointerType';
 export declare function isPointerInBounds(view: HTMLElement, { x, y }: {
     x: number;
     y: number;
 }): boolean;
+export declare const PointerTypeMapping: Map<string, PointerType>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.14.1",
+  "version": "2.16.0-rc.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build && husky install",
@@ -9,10 +9,10 @@
     "precommit": "lint-staged",
     "release": "npm login && release-it",
     "ts-check": "yarn tsc --noEmit",
-    "format:js": "prettier --write --list-different './{src,example,FabricExample}/**/*.{js,jsx,ts,tsx}'",
+    "format:js": "prettier --write --list-different './{src,example,FabricExample,MacOSExample}/**/*.{js,jsx,ts,tsx}'",
     "format:android": "node ./scripts/format-android.js",
-    "format:ios": "find ios/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i",
-    "lint:js": "eslint --ext '.js,.ts,.tsx' src/ example/src FabricExample/src && yarn prettier --check './{src,example,FabricExample}/**/*.{js,jsx,ts,tsx}'",
+    "format:ios": "find apple/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i",
+    "lint:js": "eslint --ext '.js,.ts,.tsx' src/ example/src FabricExample/src MacOSExample/src && yarn prettier --check './{src,example,FabricExample,MacOSExample}/**/*.{js,jsx,ts,tsx}'",
     "lint:js-root": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check './src/**/*.{js,jsx,ts,tsx}'",
     "lint:android": "./android/gradlew -p android spotlessCheck -q"
   },
@@ -36,7 +36,7 @@
     "android/common/src/main/java/",
     "android/reanimated/src/main/java/",
     "android/noreanimated/src/main/java/",
-    "ios/",
+    "apple/",
     "Swipeable/",
     "jest-utils/",
     "DrawerLayout/",
@@ -77,7 +77,7 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
-    "@react-native/babel-preset": "^0.73.18",
+    "@react-native/babel-preset": "^0.73.19",
     "@testing-library/jest-native": "^4.0.4",
     "@testing-library/react-native": "^9.0.0",
     "@types/hammerjs": "^2.0.38",
@@ -101,7 +101,7 @@
     "prettier": "^2.7.1",
     "react": "18.2.0",
     "react-dom": "^16.12.0",
-    "react-native": "0.73.0-rc.5",
+    "react-native": "0.73.2",
     "react-native-builder-bob": "^0.17.1",
     "react-native-reanimated": "^2.3.1",
     "react-native-web": "^0.11.7",
@@ -114,9 +114,9 @@
     "react-native": "*"
   },
   "lint-staged": {
-    "./{src,example,FabricExample}/**/*.{ts,tsx}": "yarn format:js",
+    "./{src,example,FabricExample,MacOSExample}/**/*.{ts,tsx}": "yarn format:js",
     "android/**/*.kt": "yarn format:android",
-    "ios/**/*.{h,m,mm,cpp}": "yarn format:ios"
+    "apple/**/*.{h,m,mm,cpp}": "yarn format:ios"
   },
   "release-it": {
     "hooks": {
@@ -146,7 +146,10 @@
   ],
   "codegenConfig": {
     "name": "rngesturehandler_codegen",
-    "type": "components",
-    "jsSrcsDir": "./src/specs"
+    "type": "all",
+    "jsSrcsDir": "./src/specs",
+    "android": {
+      "javaPackageName": "com.swmansion.gesturehandler"
+    }
   }
 }

package/src/PointerType.ts

@@ -0,0 +1,6 @@
+export enum PointerType {
+  TOUCH,
+  STYLUS,
+  MOUSE,
+  OTHER,
+}

package/src/RNGestureHandlerModule.ts

@@ -1,50 +1,5 @@
-import { NativeModules } from 'react-native';
-import { ActionType } from './ActionType';
-import { tagMessage } from './utils';
-const { RNGestureHandlerModule } = NativeModules;
+// Reexport the native module spec used by codegen. The relevant files are inluded on Android
+// to ensure the compatibility with the old arch, while iOS doesn't require those at all.
 
-if (RNGestureHandlerModule == null) {
-  console.error(
-    tagMessage(
-      `react-native-gesture-handler module was not found. Make sure you're running your app on the native platform and your code is linked properly (cd ios && pod install && cd ..).
-
-      For installation instructions, please refer to https://docs.swmansion.com/react-native-gesture-handler/docs/#installation`
-        .split('\n')
-        .map((line) => line.trim())
-        .join('\n')
-    )
-  );
-}
-
-if (
-  RNGestureHandlerModule &&
-  RNGestureHandlerModule.flushOperations === undefined
-) {
-  RNGestureHandlerModule.flushOperations = () => {
-    // NO-OP if not defined
-  };
-}
-
-export type RNGestureHandlerModuleProps = {
-  handleSetJSResponder: (tag: number, blockNativeResponder: boolean) => void;
-  handleClearJSResponder: () => void;
-  createGestureHandler: (
-    handlerName: string,
-    handlerTag: number,
-    config: Readonly<Record<string, unknown>>
-  ) => void;
-  attachGestureHandler: (
-    handlerTag: number,
-    newView: number,
-    actionType: ActionType
-  ) => void;
-  updateGestureHandler: (
-    handlerTag: number,
-    newConfig: Readonly<Record<string, unknown>>
-  ) => void;
-  dropGestureHandler: (handlerTag: number) => void;
-  install: () => void;
-  flushOperations: () => void;
-};
-
-export default RNGestureHandlerModule as RNGestureHandlerModuleProps;
+import Module from './specs/NativeRNGestureHandlerModule';
+export default Module;

package/src/RNGestureHandlerModule.windows.ts

@@ -1,11 +1,8 @@
 import React from 'react';
 
 import { ActionType } from './ActionType';
-import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
 
-//GestureHandlers
-import InteractionManager from './web/tools/InteractionManager';
-import NodeManager from './web/tools/NodeManager';
+// GestureHandlers
 import PanGestureHandler from './web/handlers/PanGestureHandler';
 import TapGestureHandler from './web/handlers/TapGestureHandler';
 import LongPressGestureHandler from './web/handlers/LongPressGestureHandler';
@@ -14,18 +11,7 @@ import RotationGestureHandler from './web/handlers/RotationGestureHandler';
 import FlingGestureHandler from './web/handlers/FlingGestureHandler';
 import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
 import ManualGestureHandler from './web/handlers/ManualGestureHandler';
-
-//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 { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
 
 export const Gestures = {
   NativeViewGestureHandler,
@@ -38,16 +24,6 @@ export const Gestures = {
   ManualGestureHandler,
 };
 
-export const HammerGestures = {
-  NativeViewGestureHandler: HammerNativeViewGestureHandler,
-  PanGestureHandler: HammerPanGestureHandler,
-  TapGestureHandler: HammerTapGestureHandler,
-  LongPressGestureHandler: HammerLongPressGestureHandler,
-  PinchGestureHandler: HammerPinchGestureHandler,
-  RotationGestureHandler: HammerRotationGestureHandler,
-  FlingGestureHandler: HammerFlingGestureHandler,
-};
-
 export default {
   handleSetJSResponder(_tag: number, _blockNativeResponder: boolean) {
     // NO-OP
@@ -56,89 +32,31 @@ export default {
     // NO-OP
   },
   createGestureHandler<T>(
-    handlerName: keyof typeof Gestures,
-    handlerTag: number,
-    config: T
+    _handlerName: keyof typeof Gestures,
+    _handlerTag: number,
+    _config: T
   ) {
-    if (isNewWebImplementationEnabled()) {
-      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(new GestureHandlerWebDelegate())
-      );
-      InteractionManager.getInstance().configureInteractions(
-        NodeManager.getHandler(handlerTag),
-        config as unknown as Config
-      );
-    } else {
-      if (!(handlerName in HammerGestures)) {
-        throw new Error(
-          `react-native-gesture-handler: ${handlerName} is not supported on web.`
-        );
-      }
-
-      // @ts-ignore If it doesn't exist, the error is thrown
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const GestureClass = HammerGestures[handlerName];
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
-    }
-
-    this.updateGestureHandler(handlerTag, config as unknown as Config);
+    // NO-OP
   },
   attachGestureHandler(
-    handlerTag: number,
+    _handlerTag: number,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    newView: any,
+    _newView: any,
     _actionType: ActionType,
-    propsRef: React.RefObject<unknown>
+    _propsRef: React.RefObject<unknown>
   ) {
-    if (
-      !(newView instanceof HTMLElement || newView instanceof React.Component)
-    ) {
-      return;
-    }
-
-    if (isNewWebImplementationEnabled()) {
-      //@ts-ignore Types should be HTMLElement or React.Component
-      NodeManager.getHandler(handlerTag).init(newView, propsRef);
-    } else {
-      //@ts-ignore Types should be HTMLElement or React.Component
-      HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
-    }
+    // NO-OP
   },
-  updateGestureHandler(handlerTag: number, newConfig: Config) {
-    if (isNewWebImplementationEnabled()) {
-      NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
-
-      InteractionManager.getInstance().configureInteractions(
-        NodeManager.getHandler(handlerTag),
-        newConfig
-      );
-    } else {
-      HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
-    }
+  updateGestureHandler(_handlerTag: number, _newConfig: Config) {
+    // NO-OP
   },
-  getGestureHandlerNode(handlerTag: number) {
-    if (isNewWebImplementationEnabled()) {
-      return NodeManager.getHandler(handlerTag);
-    } else {
-      return HammerNodeManager.getHandler(handlerTag);
-    }
+  getGestureHandlerNode(_handlerTag: number) {
+    // NO-OP
   },
-  dropGestureHandler(handlerTag: number) {
-    if (isNewWebImplementationEnabled()) {
-      NodeManager.dropGestureHandler(handlerTag);
-    } else {
-      HammerNodeManager.dropGestureHandler(handlerTag);
-    }
+  dropGestureHandler(_handlerTag: number) {
+    // NO-OP
+  },
+  flushOperations() {
+    // NO-OP
   },
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  flushOperations() {},
 };

package/src/components/DrawerLayout.tsx

@@ -38,6 +38,7 @@ import {
   TapGestureHandlerEventPayload,
 } from '../handlers/TapGestureHandler';
 import { State } from '../State';
+import { MouseButton } from '../web/interfaces';
 
 const DRAG_TOSS = 0.05;
 
@@ -173,6 +174,18 @@ export interface DrawerLayoutProps {
    * 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 DrawerLayoutState = {
@@ -700,6 +713,8 @@ export default class DrawerLayout extends Component<
         // @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!}

package/src/components/GestureHandlerRootView.android.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
-import { ViewProps } from 'react-native';
+import { ViewProps, StyleSheet } from 'react-native';
 import { maybeInitializeFabric } from '../init';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';
@@ -8,9 +8,10 @@ import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRoot
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
 
-export default function GestureHandlerRootView(
-  props: GestureHandlerRootViewProps
-) {
+export default function GestureHandlerRootView({
+  style,
+  ...rest
+}: GestureHandlerRootViewProps) {
   // try initialize fabric on the first render, at this point we can
   // reliably check if fabric is enabled (the function contains a flag
   // to make sure it's called only once)
@@ -18,7 +19,14 @@ export default function GestureHandlerRootView(
 
   return (
     <GestureHandlerRootViewContext.Provider value>
-      <GestureHandlerRootViewNativeComponent {...props} />
+      <GestureHandlerRootViewNativeComponent
+        style={style ?? styles.container}
+        {...rest}
+      />
     </GestureHandlerRootViewContext.Provider>
   );
 }
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

package/src/components/GestureHandlerRootView.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
-import { View, ViewProps } from 'react-native';
+import { View, ViewProps, StyleSheet } from 'react-native';
 import { maybeInitializeFabric } from '../init';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
 
-export default function GestureHandlerRootView(
-  props: GestureHandlerRootViewProps
-) {
+export default function GestureHandlerRootView({
+  style,
+  ...rest
+}: GestureHandlerRootViewProps) {
   // try initialize fabric on the first render, at this point we can
   // reliably check if fabric is enabled (the function contains a flag
   // to make sure it's called only once)
@@ -17,7 +18,11 @@ export default function GestureHandlerRootView(
 
   return (
     <GestureHandlerRootViewContext.Provider value>
-      <View {...props} />
+      <View style={style ?? styles.container} {...rest} />
     </GestureHandlerRootViewContext.Provider>
   );
 }
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

package/src/components/GestureHandlerRootView.web.tsx

@@ -1,17 +1,22 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
-import { View, ViewProps } from 'react-native';
+import { View, ViewProps, StyleSheet } from 'react-native';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
 
-export default function GestureHandlerRootView(
-  props: GestureHandlerRootViewProps
-) {
+export default function GestureHandlerRootView({
+  style,
+  ...rest
+}: GestureHandlerRootViewProps) {
   return (
     <GestureHandlerRootViewContext.Provider value>
-      <View {...props} />
+      <View style={style ?? styles.container} {...rest} />
     </GestureHandlerRootViewContext.Provider>
   );
 }
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

package/src/getShadowNodeFromRef.ts

@@ -2,21 +2,43 @@
 // attached view may get flattened on Fabric. This implementation causes errors
 // on web due to the static resolution of `require` statements by webpack breaking
 // the conditional importing. Solved by making .web file.
-let findHostInstance_DEPRECATED: (ref: any) => void;
+let findHostInstance_DEPRECATED: (ref: unknown) => void;
+let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
+  stateNode: { node: unknown };
+};
 
-export function getShadowNodeFromRef(ref: any) {
+export function getShadowNodeFromRef(ref: unknown) {
   // load findHostInstance_DEPRECATED lazily because it may not be available before render
   if (findHostInstance_DEPRECATED === undefined) {
     try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       findHostInstance_DEPRECATED =
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access
         require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
     } catch (e) {
-      findHostInstance_DEPRECATED = (_ref: any) => null;
+      findHostInstance_DEPRECATED = (_ref: unknown) => null;
+    }
+  }
+
+  // load findHostInstance_DEPRECATED lazily because it may not be available before render
+  if (getInternalInstanceHandleFromPublicInstance === undefined) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      getInternalInstanceHandleFromPublicInstance =
+        // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access
+        require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance')
+          .getInternalInstanceHandleFromPublicInstance ??
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+        ((ref: any) => ref._internalInstanceHandle);
+    } catch (e) {
+      getInternalInstanceHandleFromPublicInstance = (ref: any) =>
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+        ref._internalInstanceHandle;
     }
   }
 
   // @ts-ignore Fabric
-  return findHostInstance_DEPRECATED(ref)._internalInstanceHandle.stateNode
-    .node;
+  return getInternalInstanceHandleFromPublicInstance(
+    findHostInstance_DEPRECATED(ref)
+  ).stateNode.node;
 }

package/src/handlers/createHandler.tsx

@@ -5,6 +5,8 @@ import {
   DeviceEventEmitter,
   EmitterSubscription,
 } from 'react-native';
+// @ts-ignore - its taken straight from RN
+import { customDirectEventTypes } from 'react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry';
 // @ts-ignore - it isn't typed by TS & don't have definitelyTyped types
 import deepEqual from 'lodash/isEqual';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
@@ -33,6 +35,10 @@ import { ghQueueMicrotask } from '../ghQueueMicrotask';
 
 const UIManagerAny = UIManager as any;
 
+customDirectEventTypes.topGestureHandlerEvent = {
+  registrationName: 'onGestureHandlerEvent',
+};
+
 const customGHEventsConfigFabricAndroid = {
   topOnGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
   topOnGestureHandlerStateChange: {

package/src/handlers/gestureHandlerCommon.ts

@@ -12,6 +12,8 @@ import { handlerIDToTag } from './handlersRegistry';
 import { toArray } from '../utils';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 import { ghQueueMicrotask } from '../ghQueueMicrotask';
+import { MouseButton } from '../web/interfaces';
+import { PointerType } from '../PointerType';
 
 const commonProps = [
   'id',
@@ -21,6 +23,8 @@ const commonProps = [
   'cancelsTouchesInView',
   'userSelect',
   'activeCursor',
+  'mouseButton',
+  'enableContextMenu',
 ] as const;
 
 const componentInteractionProps = [
@@ -51,6 +55,7 @@ export interface GestureEventPayload {
   handlerTag: number;
   numberOfPointers: number;
   state: ValueOf<typeof State>;
+  pointerType: PointerType;
 }
 export interface HandlerStateChangeEventPayload extends GestureEventPayload {
   oldState: ValueOf<typeof State>;
@@ -149,6 +154,8 @@ export type CommonGestureConfig = {
   hitSlop?: HitSlop;
   userSelect?: UserSelect;
   activeCursor?: ActiveCursor;
+  mouseButton?: MouseButton;
+  enableContextMenu?: boolean;
 };
 
 // Events payloads are types instead of interfaces due to TS limitation.

package/src/handlers/gestures/GestureDetector.tsx

@@ -605,10 +605,20 @@ const applyUserSelectProp = (
   }
 };
 
+const applyEnableContextMenuProp = (
+  enableContextMenu: boolean,
+  gesture: ComposedGesture | GestureType
+): void => {
+  for (const g of gesture.toGestureArray()) {
+    g.config.enableContextMenu = enableContextMenu;
+  }
+};
+
 interface GestureDetectorProps {
   gesture: ComposedGesture | GestureType;
-  userSelect?: UserSelect;
   children?: React.ReactNode;
+  userSelect?: UserSelect;
+  enableContextMenu?: boolean;
 }
 interface GestureDetectorState {
   firstRender: boolean;
@@ -630,6 +640,10 @@ export const GestureDetector = (props: GestureDetectorProps) => {
     applyUserSelectProp(props.userSelect, gestureConfig);
   }
 
+  if (props.enableContextMenu !== undefined) {
+    applyEnableContextMenuProp(props.enableContextMenu, gestureConfig);
+  }
+
   const gesture = gestureConfig.toGestureArray();
   const useReanimatedHook = gesture.some((g) => g.shouldUseReanimated);
 
@@ -763,7 +777,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
       // in case the view has changed, while config update would be handled be the `useEffect` above
       onHandlersUpdate(true);
 
-      if (isFabric()) {
+      if (isFabric() && global.isFormsStackingContext) {
         const node = getShadowNodeFromRef(ref);
         if (global.isFormsStackingContext(node) === false) {
           console.error(

package/src/handlers/gestures/gesture.ts

@@ -17,6 +17,7 @@ import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';
 import { TapGestureHandlerEventPayload } from '../TapGestureHandler';
 import { NativeViewGestureHandlerPayload } from '../NativeViewGestureHandler';
 import { isRemoteDebuggingEnabled } from '../../utils';
+import { MouseButton } from '../../web/interfaces';
 
 export type GestureType =
   | BaseGesture<Record<string, unknown>>
@@ -257,6 +258,11 @@ export abstract class BaseGesture<
     return this;
   }
 
+  mouseButton(mouseButton: MouseButton) {
+    this.config.mouseButton = mouseButton;
+    return this;
+  }
+
   runOnJS(runOnJS: boolean) {
     this.config.runOnJS = runOnJS;
     return this;

package/src/index.ts

@@ -2,6 +2,8 @@ import { initialize } from './init';
 
 export { Directions } from './Directions';
 export { State } from './State';
+export { MouseButton } from './web/interfaces';
+export { PointerType } from './PointerType';
 export { default as gestureHandlerRootHOC } from './components/gestureHandlerRootHOC';
 export { default as GestureHandlerRootView } from './components/GestureHandlerRootView';
 export type {