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,14 +1,15 @@
 import React from 'react';
-import { NativeGesture } from './hooks/useGesture';
+import { NativeGesture, ComposedGesture } from './types';
 import { Reanimated } from '../handlers/gestures/reanimatedWrapper';
 
 import { Animated, StyleSheet } from 'react-native';
 import HostGestureDetector from './HostGestureDetector';
 import { tagMessage } from '../utils';
+import { isComposedGesture } from './hooks/utils';
 
 export interface NativeDetectorProps {
   children?: React.ReactNode;
-  gesture: NativeGesture;
+  gesture: NativeGesture | ComposedGesture;
 }
 
 const AnimatedNativeDetector =
@@ -34,20 +35,130 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
     );
   }
 
+  // This piece of magic traverses the gesture tree and populates `waitFor` and `simultaneousHandlers`
+  // arrays for each gesture. It traverses the tree recursively using DFS.
+  // `waitFor` and `simultaneousHandlers` are global data structures that will be populated into each gesture.
+  // For `waitFor` we need array as order of the gestures matters.
+  // For `simultaneousHandlers` we use Set as the order doesn't matter.
+  // The tree consists of ComposedGestures and NativeGestures. NativeGestures are always leaf nodes.
+  const dfs = (
+    node: NativeGesture | ComposedGesture,
+    waitFor: number[] = [],
+    simultaneousHandlers: Set<number> = new Set()
+  ) => {
+    // If we are in the leaf node, we want to fill gesture relations arrays with current
+    // waitFor and simultaneousHandlers.
+    // TODO: handle `simultaneousWithExternalGesture`, `requreExternalGestureToFail`, `blocksExternalGesture`
+    if (!isComposedGesture(node)) {
+      node.simultaneousHandlers.push(...simultaneousHandlers);
+      node.waitFor.push(...waitFor);
+
+      return;
+    }
+
+    // If we are in the composed gesture, we want to traverse its children.
+    node.gestures.forEach((child) => {
+      // If child is composed gesture, we have to correctly fill `waitFor` and `simultaneousHandlers`.
+      if (isComposedGesture(child)) {
+        // We have to update `simultaneousHandlers` before traversing the child.
+
+        // If we go from a non-simultaneous gesture to a simultaneous gesture,
+        // we add the tags of the simultaneous gesture to the `simultaneousHandlers`.
+        // This way when we traverse the child, we already have the tags of the simultaneous gestures
+        if (
+          node.name !== 'SimultaneousGesture' &&
+          child.name === 'SimultaneousGesture'
+        ) {
+          child.tags.forEach((tag) => simultaneousHandlers.add(tag));
+        }
+
+        // If we go from a simultaneous gesture to a non-simultaneous gesture,
+        // we remove the tags of the child gestures from the `simultaneousHandlers`,
+        // as those are not simultaneous with each other.
+        if (
+          node.name === 'SimultaneousGesture' &&
+          child.name !== 'SimultaneousGesture'
+        ) {
+          child.tags.forEach((tag) => simultaneousHandlers.delete(tag));
+        }
+
+        // We will keep the current length of `waitFor` to reset it to previous state
+        // after traversing the child.
+        const length = waitFor.length;
+
+        // We traverse the child, passing the current `waitFor` and `simultaneousHandlers`.
+        dfs(child, waitFor, simultaneousHandlers);
+
+        // After traversing the child, we need to update `waitFor` and `simultaneousHandlers`
+
+        // If we go back from a simultaneous gesture to a non-simultaneous gesture,
+        // we want to delete the tags of the simultaneous gesture from the `simultaneousHandlers` -
+        // those gestures are not simultaneous with each other anymore.
+        if (
+          child.name === 'SimultaneousGesture' &&
+          node.name !== 'SimultaneousGesture'
+        ) {
+          node.tags.forEach((tag) => simultaneousHandlers.delete(tag));
+        }
+
+        // If we go back from a non-simultaneous gesture to a simultaneous gesture,
+        // we want to add the tags of the simultaneous gesture to the `simultaneousHandlers`,
+        // as those gestures are simultaneous with other children of the current node.
+        if (
+          child.name !== 'SimultaneousGesture' &&
+          node.name === 'SimultaneousGesture'
+        ) {
+          node.tags.forEach((tag) => simultaneousHandlers.add(tag));
+        }
+
+        // If we go back to an exclusive gesture, we want to add the tags of the child gesture to the `waitFor` array.
+        // This will allow us to pass exclusive gesture tags to the right subtree of the current node.
+        if (node.name === 'ExclusiveGesture') {
+          child.tags.forEach((tag) => waitFor.push(tag));
+        }
+
+        // If we go back from an exclusive gesture to a non-exclusive gesture, we want to reset the `waitFor` array
+        // to the previous state, siblings of the exclusive gesture are not exclusive with it. Since we use `push` method to
+        // add tags to the `waitFor` array, we can override `length` property to reset it to the previous state.
+        if (
+          child.name === 'ExclusiveGesture' &&
+          node.name !== 'ExclusiveGesture'
+        ) {
+          waitFor.length = length;
+        }
+      }
+      // This means that child is a leaf node.
+      else {
+        // In the leaf node, we only care about filling `waitFor` array. First we traverse the child...
+        dfs(child, waitFor, simultaneousHandlers);
+
+        // ..and when we go back we add the tag of the child to the `waitFor` array.
+        if (node.name === 'ExclusiveGesture') {
+          waitFor.push(child.tag);
+        }
+      }
+    });
+  };
+
+  dfs(gesture);
+
   return (
     <NativeDetectorComponent
+      // @ts-ignore TODO: Fix types
       onGestureHandlerStateChange={
         gesture.gestureEvents.onGestureHandlerStateChange
       }
+      // @ts-ignore TODO: Fix types
       onGestureHandlerEvent={gesture.gestureEvents.onGestureHandlerEvent}
       onGestureHandlerAnimatedEvent={
         gesture.gestureEvents.onGestureHandlerAnimatedEvent
       }
+      // @ts-ignore TODO: Fix types
       onGestureHandlerTouchEvent={
         gesture.gestureEvents.onGestureHandlerTouchEvent
       }
       moduleId={globalThis._RNGH_MODULE_ID}
-      handlerTags={[gesture.tag]}
+      handlerTags={isComposedGesture(gesture) ? gesture.tags : [gesture.tag]}
       style={styles.detector}>
       {children}
     </NativeDetectorComponent>

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

@@ -0,0 +1,88 @@
+import {
+  NativeGesture,
+  StateChangeEvent,
+  UpdateEvent,
+  TouchEvent,
+  ComposedGesture,
+} from '../../types';
+import { isComposedGesture } from '../utils';
+import { tagMessage } from '../../../utils';
+
+// TODO: Simplify repeated relations (Simultaneous with Simultaneous, Exclusive with Exclusive, etc.)
+// eslint-disable-next-line @eslint-react/hooks-extra/ensure-custom-hooks-using-other-hooks, @eslint-react/hooks-extra/no-unnecessary-use-prefix
+export function useComposedGesture(
+  ...gestures: (NativeGesture | ComposedGesture)[]
+): ComposedGesture {
+  const tags = gestures.flatMap((gesture) =>
+    isComposedGesture(gesture) ? gesture.tags : gesture.tag
+  );
+
+  const config = {
+    shouldUseReanimated: gestures.some(
+      (gesture) => gesture.config.shouldUseReanimated
+    ),
+    dispatchesAnimatedEvents: gestures.some(
+      (gesture) => gesture.config.dispatchesAnimatedEvents
+    ),
+  };
+
+  if (config.shouldUseReanimated && config.dispatchesAnimatedEvents) {
+    throw new Error(
+      tagMessage(
+        'Composed gestures cannot use both Reanimated and Animated events at the same time.'
+      )
+    );
+  }
+
+  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 {
+    tags,
+    name: 'ComposedGesture',
+    config,
+    gestureEvents: {
+      onGestureHandlerStateChange,
+      onGestureHandlerEvent,
+      onGestureHandlerAnimatedEvent,
+      onGestureHandlerTouchEvent,
+    },
+    gestures,
+  };
+}

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { ComposedGesture, NativeGesture } from '../../types';
+import { useComposedGesture } from './useComposedGesture';
+
+export function useSimultaneous(
+  ...gestures: (NativeGesture | ComposedGesture)[]
+) {
+  const composedGesture = useComposedGesture(...gestures);
+
+  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(
@@ -171,7 +146,7 @@ export function useGesture(
   }, [config, tag]);
 
   return {
-    tag: tag,
+    tag,
     name: type,
     config,
     gestureEvents: {
@@ -180,5 +155,7 @@ export function useGesture(
       onGestureHandlerTouchEvent,
       onGestureHandlerAnimatedEvent,
     },
+    simultaneousHandlers: [],
+    waitFor: [],
   };
 }

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

@@ -7,6 +7,8 @@ import {
   GestureHandlerEvent,
   GestureStateChangeEventWithData,
   GestureUpdateEventWithData,
+  NativeGesture,
+  ComposedGesture,
 } from '../types';
 import { GestureTouchEvent } from '../../handlers/gestureHandlerCommon';
 import { tagMessage } from '../../utils';
@@ -109,3 +111,9 @@ export function checkMappingForChangeProperties(obj: Animated.Mapping) {
     }
   }
 }
+
+export function isComposedGesture(
+  gesture: NativeGesture | ComposedGesture
+): gesture is ComposedGesture {
+  return 'tags' in gesture;
+}