react-native-gesture-handler 2.14.0 → 2.15.0

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

@@ -12,8 +12,9 @@ export type GestureConfigReference = {
 };
 interface GestureDetectorProps {
     gesture: ComposedGesture | GestureType;
-    userSelect?: UserSelect;
     children?: React.ReactNode;
+    userSelect?: UserSelect;
+    enableContextMenu?: boolean;
 }
 export declare const GestureDetector: (props: GestureDetectorProps) => React.JSX.Element;
 export {};

package/lib/typescript/handlers/gestures/gesture.d.ts

@@ -8,6 +8,7 @@ import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';
 import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';
 import { TapGestureHandlerEventPayload } from '../TapGestureHandler';
 import { NativeViewGestureHandlerPayload } from '../NativeViewGestureHandler';
+import { MouseButton } from '../../web/interfaces';
 export type GestureType = BaseGesture<Record<string, unknown>> | BaseGesture<Record<string, never>> | BaseGesture<TapGestureHandlerEventPayload> | BaseGesture<PanGestureHandlerEventPayload> | BaseGesture<LongPressGestureHandlerEventPayload> | BaseGesture<RotationGestureHandlerEventPayload> | BaseGesture<PinchGestureHandlerEventPayload> | BaseGesture<FlingGestureHandlerEventPayload> | BaseGesture<ForceTouchGestureHandlerEventPayload> | BaseGesture<NativeViewGestureHandlerPayload>;
 export type GestureRef = number | GestureType | React.RefObject<GestureType | undefined> | React.RefObject<React.ComponentType | undefined>;
 export interface BaseGestureConfig extends CommonGestureConfig, Record<string, unknown> {
@@ -91,6 +92,7 @@ export declare abstract class BaseGesture<EventPayloadT extends Record<string, u
     shouldCancelWhenOutside(value: boolean): this;
     hitSlop(hitSlop: HitSlop): this;
     activeCursor(activeCursor: ActiveCursor): this;
+    mouseButton(mouseButton: MouseButton): this;
     runOnJS(runOnJS: boolean): this;
     simultaneousWithExternalGesture(...gestures: Exclude<GestureRef, number>[]): this;
     requireExternalGestureToFail(...gestures: Exclude<GestureRef, number>[]): this;

package/lib/typescript/handlers/gestures/gestureStateManager.d.ts

@@ -4,6 +4,8 @@ export interface GestureStateManagerType {
     fail: () => void;
     end: () => void;
 }
+declare function create(handlerTag: number): GestureStateManagerType;
 export declare const GestureStateManager: {
-    create(handlerTag: number): GestureStateManagerType;
+    create: typeof create;
 };
+export {};

package/lib/typescript/index.d.ts

@@ -1,5 +1,6 @@
 export { Directions } from './Directions';
 export { State } from './State';
+export { MouseButton } from './web/interfaces';
 export { default as gestureHandlerRootHOC } from './components/gestureHandlerRootHOC';
 export { default as GestureHandlerRootView } from './components/GestureHandlerRootView';
 export type { GestureEvent, HandlerStateChangeEvent, GestureEventPayload, HandlerStateChangeEventPayload, GestureTouchEvent, TouchData, GestureUpdateEvent, GestureStateChangeEvent, } from './handlers/gestureHandlerCommon';

package/lib/typescript/specs/NativeRNGestureHandlerModule.d.ts

@@ -0,0 +1,14 @@
+import { TurboModule } from 'react-native';
+import { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+export interface Spec extends TurboModule {
+    handleSetJSResponder: (tag: Int32, blockNativeResponder: boolean) => void;
+    handleClearJSResponder: () => void;
+    createGestureHandler: (handlerName: string, handlerTag: Int32, config: Object) => void;
+    attachGestureHandler: (handlerTag: Int32, newView: Int32, actionType: Int32) => void;
+    updateGestureHandler: (handlerTag: Int32, newConfig: Object) => void;
+    dropGestureHandler: (handlerTag: Int32) => void;
+    install: () => boolean;
+    flushOperations: () => void;
+}
+declare const _default: Spec;
+export default _default;

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

@@ -1,5 +1,5 @@
 import { State } from '../../State';
-import { Config, AdaptedEvent, PointerType } from '../interfaces';
+import { Config, AdaptedEvent, PointerType, MouseButton } from '../interfaces';
 import EventManager from '../tools/EventManager';
 import PointerTracker from '../tools/PointerTracker';
 import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
@@ -74,7 +74,9 @@ export default abstract class GestureHandler {
     protected checkCustomActivationCriteria(criterias: string[]): void;
     private validateHitSlops;
     private checkHitSlop;
+    isButtonInConfig(mouseButton: MouseButton | undefined): number | true | undefined;
     protected resetConfig(): void;
+    onDestroy(): void;
     getTag(): number;
     setTag(tag: number): void;
     getConfig(): Config;

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

@@ -24,6 +24,8 @@ export interface Config extends Record<string, ConfigArgs> {
     shouldCancelWhenOutside?: boolean;
     userSelect?: UserSelect;
     activeCursor?: ActiveCursor;
+    mouseButton?: MouseButton;
+    enableContextMenu?: boolean;
     activateAfterLongPress?: number;
     failOffsetXStart?: number;
     failOffsetYStart?: number;
@@ -99,21 +101,19 @@ export interface AdaptedEvent {
     pointerId: number;
     eventType: EventTypes;
     pointerType: PointerType;
-    buttons: number;
     time: number;
+    button?: MouseButton;
     allTouches?: TouchList;
     changedTouches?: TouchList;
     touchEventType?: TouchEventType;
 }
-export declare enum MouseButtons {
-    NONE = 0,
+export declare enum MouseButton {
     LEFT = 1,
-    RIGHT = 2,
-    LEFT_RIGHT = 3,
-    SCROLL = 4,
-    SCROLL_LEFT = 5,
-    SCROLL_RIGHT = 6,
-    SCROLL_LEFT_RIGHT = 7
+    MIDDLE = 2,
+    RIGHT = 4,
+    BUTTON_4 = 8,
+    BUTTON_5 = 16,
+    ALL = 31
 }
 export declare enum EventTypes {
     DOWN = 0,

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

@@ -1,4 +1,5 @@
 import type GestureHandler from '../handlers/GestureHandler';
+import { Config } from '../interfaces';
 export interface MeasureResult {
     pageX: number;
     pageY: number;
@@ -19,4 +20,5 @@ export interface GestureHandlerDelegate<T> {
     onEnd(): void;
     onCancel(): void;
     onFail(): void;
+    destroy(config: Config): void;
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.14.0",
+  "version": "2.15.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/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/gestureHandlerRootHOC.tsx

@@ -3,9 +3,7 @@ import { StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import GestureHandlerRootView from './GestureHandlerRootView';
 
-export default function gestureHandlerRootHOC<
-  P extends Record<string, unknown>
->(
+export default function gestureHandlerRootHOC<P extends object>(
   Component: React.ComponentType<P>,
   containerStyles?: StyleProp<ViewStyle>
 ): React.ComponentType<P> {

package/src/components/touchables/TouchableWithoutFeedback.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import GenericTouchable, { GenericTouchableProps } from './GenericTouchable';
 
-export type TouchableWithoutFeedbackProps = GenericTouchable;
+export type TouchableWithoutFeedbackProps = GenericTouchableProps;
 
 const TouchableWithoutFeedback = React.forwardRef<
-  TouchableWithoutFeedbackProps,
-  PropsWithChildren<GenericTouchableProps>
+  GenericTouchable,
+  PropsWithChildren<TouchableWithoutFeedbackProps>
 >((props, ref) => <GenericTouchable ref={ref} {...props} />);
 
 TouchableWithoutFeedback.defaultProps = GenericTouchable.defaultProps;

package/src/handlers/gestureHandlerCommon.ts

@@ -12,6 +12,7 @@ import { handlerIDToTag } from './handlersRegistry';
 import { toArray } from '../utils';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 import { ghQueueMicrotask } from '../ghQueueMicrotask';
+import { MouseButton } from '../web/interfaces';
 
 const commonProps = [
   'id',
@@ -21,6 +22,8 @@ const commonProps = [
   'cancelsTouchesInView',
   'userSelect',
   'activeCursor',
+  'mouseButton',
+  'enableContextMenu',
 ] as const;
 
 const componentInteractionProps = [
@@ -149,6 +152,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;