Implement gesture relations

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

@@ -1,14 +1,15 @@
 import React from 'react';
-import { NativeGesture } from './types';
+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

@@ -3,10 +3,19 @@ import {
   StateChangeEvent,
   UpdateEvent,
   TouchEvent,
+  ComposedGesture,
 } from '../../types';
+import { isComposedGesture } from '../utils';
+import { tagMessage } from '../../../utils';
 
-export function useComposedGesture(...gestures: NativeGesture[]) {
-  const tags = gestures.flatMap((gesture) => gesture.tag);
+// 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(
@@ -17,6 +26,14 @@ export function useComposedGesture(...gestures: NativeGesture[]) {
     ),
   };
 
+  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>>
   ) => {
@@ -57,7 +74,7 @@ export function useComposedGesture(...gestures: NativeGesture[]) {
   }
 
   return {
-    tag: tags,
+    tags,
     name: 'ComposedGesture',
     config,
     gestureEvents: {
@@ -66,5 +83,6 @@ export function useComposedGesture(...gestures: NativeGesture[]) {
       onGestureHandlerAnimatedEvent,
       onGestureHandlerTouchEvent,
     },
+    gestures,
   };
 }

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

@@ -1,15 +1,9 @@
-import { NativeGesture } from '../../types';
+import { NativeGesture, ComposedGesture } from '../../types';
 import { useComposedGesture } from './useComposedGesture';
 
-export function useExclusive(...gestures: NativeGesture[]) {
+export function useExclusive(...gestures: (NativeGesture | ComposedGesture)[]) {
   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

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

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

@@ -1,19 +1,11 @@
-import { NativeGesture } from '../../types';
+import { ComposedGesture, NativeGesture } from '../../types';
 import { useComposedGesture } from './useComposedGesture';
 
-export function useSimultaneous(...gestures: NativeGesture[]) {
+export function useSimultaneous(
+  ...gestures: (NativeGesture | ComposedGesture)[]
+) {
   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

@@ -146,7 +146,7 @@ export function useGesture(
   }, [config, tag]);
 
   return {
-    tag: [tag],
+    tag,
     name: type,
     config,
     gestureEvents: {
@@ -155,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;
+}

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

@@ -60,16 +60,44 @@ export type GestureType =
   | 'ManualGestureHandler'
   | 'NativeViewGestureHandler';
 
+export type ComposedGestureType =
+  | 'SimultaneousGesture'
+  | 'ExclusiveGesture'
+  | 'RaceGesture'
+  | 'ComposedGesture';
+
 export type GestureEvents = {
-  onGestureHandlerStateChange: (event: any) => void;
-  onGestureHandlerEvent: undefined | ((event: any) => void);
-  onGestureHandlerTouchEvent: (event: any) => void;
+  onGestureHandlerStateChange: (
+    event: StateChangeEvent<Record<string, unknown>>
+  ) => void;
+  onGestureHandlerEvent:
+    | undefined
+    | ((event: UpdateEvent<Record<string, unknown>>) => void);
+  onGestureHandlerTouchEvent: (event: TouchEvent) => void;
   onGestureHandlerAnimatedEvent: undefined | AnimatedEvent;
 };
 
-export interface NativeGesture {
-  tag: number[];
+export type GestureRelations = {
+  simultaneousGestures: number[];
+  exclusiveGestures: number[];
+};
+
+export type NativeGesture = {
+  tag: number;
   name: GestureType;
   config: Record<string, unknown>;
   gestureEvents: GestureEvents;
-}
+  simultaneousHandlers: number[];
+  waitFor: number[];
+};
+
+export type ComposedGesture = {
+  tags: number[];
+  name: ComposedGestureType;
+  config: {
+    shouldUseReanimated: boolean;
+    dispatchesAnimatedEvents: boolean;
+  };
+  gestureEvents: GestureEvents;
+  gestures: (NativeGesture | ComposedGesture)[];
+};