Add mouseButton prop

example/src/App.tsx

@@ -16,6 +16,8 @@
 import { TouchablesIndex, TouchableExample } from './release_tests/touchables';
 import Rows from './release_tests/rows';
 import Fling from './release_tests/fling';
+import MouseButtons from './release_tests/mouseButtons';
+import ContextMenu from './release_tests/contextMenu';
 import NestedTouchables from './release_tests/nestedTouchables';
 import NestedButtons from './release_tests/nestedButtons';
 import NestedGestureHandlerRootViewWithModal from './release_tests/nestedGHRootViewWithModal';
@@ -116,6 +118,8 @@
       { name: 'Fling', component: Fling },
       { name: 'Combo', component: ComboWithGHScroll },
       { name: 'Touchables', component: TouchablesIndex as React.ComponentType },
+      { name: 'MouseButtons', component: MouseButtons },
+      { name: 'ContextMenu (web only)', component: ContextMenu },
       { name: 'Rounded buttons', component: RoundedButtons },
     ],
   },
@@ -199,7 +203,7 @@
       renderSectionHeader={({ section: { sectionTitle } }) => (
         <Text style={styles.sectionTitle}>{sectionTitle}</Text>
       )}
       ItemSeparatorComponent={() => <View style={styles.separator} />}
     />
   );
 }

example/src/release_tests/contextMenu/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  Gesture,
+  GestureDetector,
+  MouseButton,
+} from 'react-native-gesture-handler';
+
+export default function ContextMenuExample() {
+  const p1 = Gesture.Pan().mouseButton(MouseButton.RIGHT);
+  const p2 = Gesture.Pan();
+  const p3 = Gesture.Pan();
+
+  return (
+    <View style={styles.container}>
+      <GestureDetector gesture={p1}>
+        <View style={[styles.box, styles.grandParent]}>
+          <GestureDetector gesture={p2} enableContextMenu={true}>
+            <View style={[styles.box, styles.parent]}>
+              <GestureDetector gesture={p3} enableContextMenu={false}>
+                <View style={[styles.box, styles.child]} />
+              </GestureDetector>
+            </View>
+          </GestureDetector>
+        </View>
+      </GestureDetector>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+
+  grandParent: {
+    width: 300,
+    height: 300,
+    backgroundColor: 'lightblue',
+  },
+
+  parent: {
+    width: 200,
+    height: 200,
+    backgroundColor: 'lightgreen',
+  },
+
+  child: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'crimson',
+  },
+
+  box: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+});

example/src/release_tests/mouseButtons/index.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import {
+  Gesture,
+  GestureDetector,
+  GestureType,
+  MouseButton,
+  Directions,
+  ScrollView,
+} from 'react-native-gesture-handler';
+import { StyleSheet, View, Text } from 'react-native';
+
+type TestProps = {
+  name: string;
+  gestureHandlers: GestureType[];
+};
+
+function Test({ name, gestureHandlers }: TestProps) {
+  return (
+    <View style={[{ height: 300 }, styles.center]}>
+      <Text> {name} </Text>
+      <View style={{ flexDirection: 'row' }}>
+        <GestureDetector gesture={gestureHandlers[0]}>
+          <View style={styles.boxLeft} />
+        </GestureDetector>
+        <GestureDetector gesture={gestureHandlers[1]}>
+          <View style={styles.boxMiddle} />
+        </GestureDetector>
+        <GestureDetector gesture={gestureHandlers[2]}>
+          <View style={styles.boxRight} />
+        </GestureDetector>
+      </View>
+      <View style={{ flexDirection: 'row' }}>
+        <GestureDetector gesture={gestureHandlers[3]}>
+          <View style={styles.boxLeftRight} />
+        </GestureDetector>
+        <GestureDetector gesture={gestureHandlers[4]}>
+          <View style={styles.boxAll} />
+        </GestureDetector>
+      </View>
+    </View>
+  );
+}
+
+function TapTests() {
+  const leftTap = Gesture.Tap()
+    .mouseButton(MouseButton.LEFT)
+    .onEnd(() => console.log('Tap with left'));
+
+  const middleTap = Gesture.Tap()
+    .mouseButton(MouseButton.MIDDLE)
+    .onEnd(() => console.log('Tap with middle'));
+
+  const rightTap = Gesture.Tap()
+    .mouseButton(MouseButton.RIGHT)
+    .onEnd(() => console.log('Tap with right'));
+
+  const leftRightTap = Gesture.Tap()
+    .mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
+    .onEnd(() => console.log('Tap with left | right'));
+
+  const allTap = Gesture.Tap()
+    .mouseButton(MouseButton.ALL)
+    .onEnd(() => console.log('Tap with any button'));
+
+  const gestureHandlers = [leftTap, middleTap, rightTap, leftRightTap, allTap];
+
+  return <Test name={'Tap'} gestureHandlers={gestureHandlers} />;
+}
+
+function PanTests() {
+  const leftPan = Gesture.Pan()
+    .mouseButton(MouseButton.LEFT)
+    .onChange(() => console.log('Panning with left'));
+
+  const middlePan = Gesture.Pan()
+    .mouseButton(MouseButton.MIDDLE)
+    .onChange(() => console.log('Panning with middle'));
+
+  const rightPan = Gesture.Pan()
+    .mouseButton(MouseButton.RIGHT)
+    .onChange(() => console.log('Panning with right'));
+
+  const leftRightPan = Gesture.Pan()
+    .mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
+    .onChange(() => console.log('Panning with left | right'));
+
+  const allPan = Gesture.Pan()
+    .mouseButton(MouseButton.ALL)
+    .onChange(() => console.log('Panning with any button'));
+
+  const gestureHandlers = [leftPan, middlePan, rightPan, leftRightPan, allPan];
+
+  return <Test name={'Pan'} gestureHandlers={gestureHandlers} />;
+}
+
+function LongPressTests() {
+  const leftLongPress = Gesture.LongPress()
+    .mouseButton(MouseButton.LEFT)
+    .onStart(() => console.log('LongPress with left'));
+
+  const middleLongPress = Gesture.LongPress()
+    .mouseButton(MouseButton.MIDDLE)
+    .onStart(() => console.log('LongPress with middle'));
+
+  const rightLongPress = Gesture.LongPress()
+    .mouseButton(MouseButton.RIGHT)
+    .onStart(() => console.log('LongPress with right'));
+
+  const leftRightLongPress = Gesture.LongPress()
+    .mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
+    .onStart(() => console.log('LongPress with left | right'));
+
+  const allLongPress = Gesture.LongPress()
+    .mouseButton(MouseButton.ALL)
+    .onStart(() => console.log('LongPress with any button'));
+
+  const gestureHandlers = [
+    leftLongPress,
+    middleLongPress,
+    rightLongPress,
+    leftRightLongPress,
+    allLongPress,
+  ];
+
+  return <Test name={'LongPress'} gestureHandlers={gestureHandlers} />;
+}
+
+function FlingTests() {
+  const leftFling = Gesture.Fling()
+    .direction(Directions.LEFT | Directions.RIGHT)
+    .mouseButton(MouseButton.LEFT)
+    .onStart(() => console.log('Fling with left'));
+
+  const middleFling = Gesture.Fling()
+    .direction(Directions.LEFT | Directions.RIGHT)
+    .mouseButton(MouseButton.MIDDLE)
+    .onStart(() => console.log('Fling with middle'));
+
+  const rightFling = Gesture.Fling()
+    .direction(Directions.LEFT | Directions.RIGHT)
+    .mouseButton(MouseButton.RIGHT)
+    .onStart(() => console.log('Fling with right'));
+
+  const leftRightFling = Gesture.Fling()
+    .direction(Directions.LEFT | Directions.RIGHT)
+    .mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
+    .onStart(() => console.log('Fling with left | right'));
+
+  const allFling = Gesture.Fling()
+    .direction(Directions.LEFT | Directions.RIGHT)
+    .mouseButton(MouseButton.ALL)
+    .onStart(() => console.log('Fling with any button'));
+
+  const gestureHandlers = [
+    leftFling,
+    middleFling,
+    rightFling,
+    leftRightFling,
+    allFling,
+  ];
+
+  return <Test name={'Fling'} gestureHandlers={gestureHandlers} />;
+}
+
+export default function Buttons() {
+  return (
+    <ScrollView style={{ flex: 1 }}>
+      <TapTests />
+      <PanTests />
+      <LongPressTests />
+      <FlingTests />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  boxLeft: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'darkmagenta',
+  },
+  boxRight: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'darkblue',
+  },
+  boxMiddle: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'darkgreen',
+  },
+  boxLeftRight: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'crimson',
+  },
+  boxAll: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'plum',
+  },
+});

src/components/DrawerLayout.tsx

@@ -28,6 +28,7 @@
   HandlerStateChangeEvent,
   UserSelect,
   ActiveCursor,
+  EnableContextMenu,
 } from '../handlers/gestureHandlerCommon';
 import {
   PanGestureHandler,
@@ -38,6 +39,7 @@
   TapGestureHandlerEventPayload,
 } from '../handlers/TapGestureHandler';
 import { State } from '../State';
+import { MouseButton } from '../web/interfaces';
 
 const DRAG_TOSS = 0.05;
 
@@ -173,6 +175,18 @@
    * 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?: EnableContextMenu;
 }
 
 export type DrawerLayoutState = {
@@ -319,7 +333,7 @@
       );
 
       const dragOffsetFromOnStartPosition = startPositionX.interpolate({
         inputRange: [drawerWidth! - 1, drawerWidth!, drawerWidth! + 1],
         outputRange: [0, 0, 1],
       });
       translationX = Animated.add(
@@ -329,7 +343,7 @@
     }
 
     this.openValue = Animated.add(translationX, drawerTranslation).interpolate({
       inputRange: [0, drawerWidth!],
       outputRange: [0, 1],
       extrapolate: 'clamp',
     });
@@ -341,7 +355,7 @@
         ev: NativeSyntheticEvent<PanGestureHandlerEventPayload>
       ) => void;
     } = {
       useNativeDriver: props.useNativeAnimations!,
     };
 
     if (this.props.onDrawerSlide) {
@@ -419,14 +433,14 @@
 
     if (drawerType === 'front') {
       dragOffsetBasedOnStart =
         gestureStartX > drawerWidth! ? gestureStartX - drawerWidth! : 0;
     }
 
     const startOffsetX =
       dragX + dragOffsetBasedOnStart + (this.drawerShown ? drawerWidth! : 0);
     const projOffsetX = startOffsetX + DRAG_TOSS * velocityX;
 
     const shouldOpen = projOffsetX > drawerWidth! / 2;
 
     if (shouldOpen) {
       this.animateDrawer(startOffsetX, drawerWidth!, velocityX);
@@ -700,6 +714,8 @@
         // @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!}

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 = [
@@ -108,6 +111,8 @@ export type ActiveCursor =
   | 'zoom-in'
   | 'zoom-out';
 
+export type EnableContextMenu = boolean;
+
 //TODO(TS) events in handlers
 
 export interface GestureEvent<ExtraEventPayloadT = Record<string, unknown>> {
@@ -149,6 +154,8 @@ export type CommonGestureConfig = {
   hitSlop?: HitSlop;
   userSelect?: UserSelect;
   activeCursor?: ActiveCursor;
+  mouseButton?: MouseButton;
+  enableContextMenu?: EnableContextMenu;
 };
 
 // Events payloads are types instead of interfaces due to TS limitation.