Implement gesture relations

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.kt

@@ -61,7 +61,8 @@ class RNGestureHandlerEvent private constructor() : Event<RNGestureHandlerEvent>
     EVENT_NAME
   }
 
-  override fun canCoalesce() = true
+  // Unfortunately getCoalescingKey is not considered when sending event to C++, therefore we have to disable coalescing in v3
+  override fun canCoalesce() = actionType != GestureHandler.ACTION_TYPE_NATIVE_DETECTOR
 
   override fun getCoalescingKey() = coalescingKey
 

packages/react-native-gesture-handler/src/index.ts

@@ -166,5 +166,8 @@ export type { NativeDetectorProps } from './v3/NativeDetector';
 export { NativeDetector } from './v3/NativeDetector';
 
 export * from './v3/hooks/useGesture';
+export * from './v3/hooks/relations/useSimultaneous';
+export * from './v3/hooks/relations/useExclusive';
+export * from './v3/hooks/relations/useRace';
 
 initialize();

packages/react-native-gesture-handler/src/v3/NativeDetector.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NativeGesture } from './hooks/useGesture';
+import { NativeGesture } from './types';
 import { Reanimated } from '../handlers/gestures/reanimatedWrapper';
 
 import { Animated, StyleSheet } from 'react-native';
@@ -47,7 +47,7 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
         gesture.gestureEvents.onGestureHandlerTouchEvent
       }
       moduleId={globalThis._RNGH_MODULE_ID}
-      handlerTags={[gesture.tag]}
+      handlerTags={gesture.tag}
       style={styles.detector}>
       {children}
     </NativeDetectorComponent>

packages/react-native-gesture-handler/src/v3/hooks/relations/useComposedGesture.ts

@@ -0,0 +1,70 @@
+import {
+  NativeGesture,
+  StateChangeEvent,
+  UpdateEvent,
+  TouchEvent,
+} from '../../types';
+
+export function useComposedGesture(...gestures: NativeGesture[]) {
+  const tags = gestures.flatMap((gesture) => gesture.tag);
+
+  const config = {
+    shouldUseReanimated: gestures.some(
+      (gesture) => gesture.config.shouldUseReanimated
+    ),
+    dispatchesAnimatedEvents: gestures.some(
+      (gesture) => gesture.config.dispatchesAnimatedEvents
+    ),
+  };
+
+  const onGestureHandlerStateChange = (
+    event: StateChangeEvent<Record<string, unknown>>
+  ) => {
+    for (const gesture of gestures) {
+      if (gesture.gestureEvents.onGestureHandlerStateChange) {
+        gesture.gestureEvents.onGestureHandlerStateChange(event);
+      }
+    }
+  };
+
+  const onGestureHandlerEvent = (
+    event: UpdateEvent<Record<string, unknown>>
+  ) => {
+    for (const gesture of gestures) {
+      if (gesture.gestureEvents.onGestureHandlerEvent) {
+        gesture.gestureEvents.onGestureHandlerEvent(event);
+      }
+    }
+  };
+
+  const onGestureHandlerTouchEvent = (event: TouchEvent) => {
+    for (const gesture of gestures) {
+      if (gesture.gestureEvents.onGestureHandlerTouchEvent) {
+        gesture.gestureEvents.onGestureHandlerTouchEvent(event);
+      }
+    }
+  };
+
+  let onGestureHandlerAnimatedEvent;
+
+  for (const gesture of gestures) {
+    if (gesture.gestureEvents.onGestureHandlerAnimatedEvent) {
+      onGestureHandlerAnimatedEvent =
+        gesture.gestureEvents.onGestureHandlerAnimatedEvent;
+
+      break;
+    }
+  }
+
+  return {
+    tag: tags,
+    name: 'ComposedGesture',
+    config,
+    gestureEvents: {
+      onGestureHandlerStateChange,
+      onGestureHandlerEvent,
+      onGestureHandlerAnimatedEvent,
+      onGestureHandlerTouchEvent,
+    },
+  };
+}

packages/react-native-gesture-handler/src/v3/hooks/relations/useExclusive.ts

@@ -0,0 +1,16 @@
+import { NativeGesture } from '../../types';
+import { useComposedGesture } from './useComposedGesture';
+
+export function useExclusive(...gestures: NativeGesture[]) {
+  const composedGesture = useComposedGesture(...gestures);
+
+  const tags = gestures.flatMap((gesture) => gesture.tag);
+
+  for (let i = 0; i < gestures.length; i++) {
+    gestures[i].config.waitFor = tags.slice(0, i);
+  }
+
+  composedGesture.name = 'ExclusiveGesture';
+
+  return composedGesture;
+}

packages/react-native-gesture-handler/src/v3/hooks/relations/useRace.ts

@@ -0,0 +1,10 @@
+import { NativeGesture } from '../../types';
+import { useComposedGesture } from './useComposedGesture';
+
+export function useRace(...gestures: NativeGesture[]) {
+  const composedGesture = useComposedGesture(...gestures);
+
+  composedGesture.name = 'RaceGesture';
+
+  return composedGesture;
+}

packages/react-native-gesture-handler/src/v3/hooks/relations/useSimultaneous.ts

@@ -0,0 +1,20 @@
+import { NativeGesture } from '../../types';
+import { useComposedGesture } from './useComposedGesture';
+
+export function useSimultaneous(...gestures: NativeGesture[]) {
+  const composedGesture = useComposedGesture(...gestures);
+
+  const tags = gestures.flatMap((gesture) => gesture.tag);
+
+  for (const gesture of gestures) {
+    const simultaneousHandlersTags = [
+      ...tags.filter((tag) => !gesture.tag.includes(tag)),
+    ];
+
+    gesture.config.simultaneousHandlers = simultaneousHandlersTags;
+  }
+
+  composedGesture.name = 'SimultaneousGesture';
+
+  return composedGesture;
+}

packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts

@@ -7,32 +7,7 @@ import {
   SharedValue,
 } from '../../handlers/gestures/reanimatedWrapper';
 import { tagMessage } from '../../utils';
-import { AnimatedEvent } from '../types';
-
-type GestureType =
-  | 'TapGestureHandler'
-  | 'LongPressGestureHandler'
-  | 'PanGestureHandler'
-  | 'PinchGestureHandler'
-  | 'RotationGestureHandler'
-  | 'FlingGestureHandler'
-  | 'ForceTouchGestureHandler'
-  | 'ManualGestureHandler'
-  | 'NativeViewGestureHandler';
-
-type GestureEvents = {
-  onGestureHandlerStateChange: (event: any) => void;
-  onGestureHandlerEvent: undefined | ((event: any) => void);
-  onGestureHandlerTouchEvent: (event: any) => void;
-  onGestureHandlerAnimatedEvent: undefined | AnimatedEvent;
-};
-
-export interface NativeGesture {
-  tag: number;
-  name: GestureType;
-  config: Record<string, unknown>;
-  gestureEvents: GestureEvents;
-}
+import { GestureType, NativeGesture } from '../types';
 
 function hasWorkletEventHandlers(config: Record<string, unknown>) {
   return Object.values(config).some(
@@ -181,7 +156,7 @@ export function useGesture(
   }, [config, tag]);
 
   return {
-    tag: tag,
+    tag: [tag],
     name: type,
     config,
     gestureEvents: {

packages/react-native-gesture-handler/src/v3/types.ts

@@ -48,3 +48,28 @@ export type CallbackHandlers = Omit<
 export type AnimatedEvent = ((...args: any[]) => void) & {
   _argMapping?: unknown;
 };
+
+export type GestureType =
+  | 'TapGestureHandler'
+  | 'LongPressGestureHandler'
+  | 'PanGestureHandler'
+  | 'PinchGestureHandler'
+  | 'RotationGestureHandler'
+  | 'FlingGestureHandler'
+  | 'ForceTouchGestureHandler'
+  | 'ManualGestureHandler'
+  | 'NativeViewGestureHandler';
+
+export type GestureEvents = {
+  onGestureHandlerStateChange: (event: any) => void;
+  onGestureHandlerEvent: undefined | ((event: any) => void);
+  onGestureHandlerTouchEvent: (event: any) => void;
+  onGestureHandlerAnimatedEvent: undefined | AnimatedEvent;
+};
+
+export interface NativeGesture {
+  tag: number[];
+  name: GestureType;
+  config: Record<string, unknown>;
+  gestureEvents: GestureEvents;
+}