Gesture relations

apps/basic-example/src/NativeDetector.tsx

@@ -3,6 +3,7 @@ import { Animated, Button, useAnimatedValue } from 'react-native';
 import {
   GestureHandlerRootView,
   NativeDetector,
+  SingleGestureType,
   useGesture,
 } from 'react-native-gesture-handler';
 
@@ -17,7 +18,7 @@ export default function App() {
     }
   );
 
-  const gesture = useGesture('PanGestureHandler', {
+  const gesture = useGesture(SingleGestureType.Pan, {
     onUpdate: event,
   });
 

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

@@ -97,8 +97,6 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?) :
     val handler = registry.getHandler(handlerTag) ?: return
     val factory = RNGestureHandlerFactoryUtil.findFactoryForHandler<GestureHandler>(handler) ?: return
 
-    interactionManager.dropRelationsForHandlerWithTag(handlerTag)
-    interactionManager.configureInteractions(handler, config)
     factory.setConfig(handler, config)
   }
 
@@ -111,6 +109,15 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?) :
     factory.updateConfig(handler, config)
   }
 
+  @ReactMethod
+  override fun configureRelations(handlerTagDouble: Double, relations: ReadableMap) {
+    val handlerTag = handlerTagDouble.toInt()
+    val handler = registry.getHandler(handlerTag) ?: return
+
+    interactionManager.dropRelationsForHandlerWithTag(handlerTag)
+    interactionManager.configureInteractions(handler, relations)
+  }
+
   @ReactMethod
   override fun dropGestureHandler(handlerTagDouble: Double) {
     val handlerTag = handlerTagDouble.toInt()

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

@@ -59,7 +59,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/apple/RNGestureHandler.h

@@ -89,6 +89,7 @@
 - (void)resetConfig NS_REQUIRES_SUPER;
 - (void)setConfig:(nullable NSDictionary *)config NS_REQUIRES_SUPER;
 - (void)updateConfig:(nullable NSDictionary *)config NS_REQUIRES_SUPER;
+- (void)updateRelations:(nonnull NSDictionary *)relations;
 - (void)handleGesture:(nonnull id)recognizer;
 - (void)handleGesture:(nonnull id)recognizer inState:(RNGestureHandlerState)state;
 - (BOOL)containsPointInView;

packages/react-native-gesture-handler/apple/RNGestureHandler.mm

@@ -103,9 +103,6 @@ - (void)resetConfig
   self.enabled = YES;
   self.manualActivation = NO;
   _shouldCancelWhenOutside = NO;
-  _handlersToWaitFor = nil;
-  _simultaneousHandlers = nil;
-  _handlersThatShouldWait = nil;
   _hitSlop = RNGHHitSlopEmpty;
   _needsPointerData = NO;
   _dispatchesAnimatedEvents = NO;
@@ -123,10 +120,6 @@ - (void)setConfig:(NSDictionary *)config
 
 - (void)updateConfig:(NSDictionary *)config
 {
-  _handlersToWaitFor = [RCTConvert NSNumberArray:config[@"waitFor"]];
-  _simultaneousHandlers = [RCTConvert NSNumberArray:config[@"simultaneousHandlers"]];
-  _handlersThatShouldWait = [RCTConvert NSNumberArray:config[@"blocksHandlers"]];
-
   id prop = config[@"enabled"];
   if (prop != nil) {
     self.enabled = [RCTConvert BOOL:prop];
@@ -191,6 +184,13 @@ - (void)updateConfig:(NSDictionary *)config
   }
 }
 
+- (void)updateRelations:(NSDictionary *)relations
+{
+  _handlersToWaitFor = [RCTConvert NSNumberArray:relations[@"waitFor"]];
+  _simultaneousHandlers = [RCTConvert NSNumberArray:relations[@"simultaneousHandlers"]];
+  _handlersThatShouldWait = [RCTConvert NSNumberArray:relations[@"blocksHandlers"]];
+}
+
 - (void)setEnabled:(BOOL)enabled
 {
   _enabled = enabled;

packages/react-native-gesture-handler/apple/RNGestureHandlerManager.h

@@ -28,6 +28,8 @@
 
 - (void)updateGestureHandlerConfig:(nonnull NSNumber *)handlerTag config:(nonnull NSDictionary *)config;
 
+- (void)updateGestureHandlerRelations:(nonnull NSNumber *)handlerTag relations:(nonnull NSDictionary *)relations;
+
 - (void)dropGestureHandler:(nonnull NSNumber *)handlerTag;
 
 - (void)dropAllGestureHandlers;

packages/react-native-gesture-handler/apple/RNGestureHandlerManager.mm

@@ -191,6 +191,12 @@ - (void)updateGestureHandlerConfig:(NSNumber *)handlerTag config:(NSDictionary *
   [handler updateConfig:config];
 }
 
+- (void)updateGestureHandlerRelations:(NSNumber *)handlerTag relations:(NSDictionary *)relations
+{
+  RNGestureHandler *handler = [_registry handlerWithTag:handlerTag];
+  [handler updateRelations:relations];
+}
+
 - (void)dropGestureHandler:(NSNumber *)handlerTag
 {
   [_registry dropHandlerWithTag:handlerTag];

packages/react-native-gesture-handler/apple/RNGestureHandlerModule.mm

@@ -159,6 +159,12 @@ - (void)updateGestureHandlerConfig:(double)handlerTag newConfig:(NSDictionary *)
   }];
 }
 
+- (void)configureRelations:(double)handlerTag relations:(NSDictionary *)relations
+{
+  RNGestureHandlerManager *manager = [RNGestureHandlerModule handlerManagerForModuleId:_moduleId];
+  [manager updateGestureHandlerRelations:[NSNumber numberWithDouble:handlerTag] relations:relations];
+}
+
 - (void)dropGestureHandler:(double)handlerTag
 {
   [self addOperationBlock:^(RNGestureHandlerManager *manager) {

packages/react-native-gesture-handler/src/handlers/gestures/reanimatedWrapper.ts

@@ -59,6 +59,9 @@ let Reanimated:
       >(
         value: unknown
       ): value is WorkletFunction<Args, ReturnValue>;
+      useComposedEventHandler<T>(
+        handlers: (((event: T) => void) | null)[]
+      ): (event: T) => void;
       runOnUI<A extends any[], R>(
         fn: (...args: A) => R
       ): (...args: Parameters<typeof fn>) => void;

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

@@ -162,9 +162,12 @@ export type {
 } from './components/DrawerLayout';
 export { default as DrawerLayout } from './components/DrawerLayout';
 
-export type { NativeDetectorProps } from './v3/NativeDetector';
-export { NativeDetector } from './v3/NativeDetector';
+export type { NativeDetectorProps } from './v3/NativeDetector/NativeDetector';
+export { NativeDetector } from './v3/NativeDetector/NativeDetector';
 
 export * from './v3/hooks/useGesture';
+export * from './v3/hooks/relations';
+
+export { SingleGestureType } from './v3/types';
 
 initialize();

packages/react-native-gesture-handler/src/specs/NativeRNGestureHandlerModule.ts

@@ -22,6 +22,8 @@ export interface Spec extends TurboModule {
   setGestureHandlerConfig: (handlerTag: Double, newConfig: Object) => void;
   // eslint-disable-next-line @typescript-eslint/ban-types
   updateGestureHandlerConfig: (handlerTag: Double, newConfig: Object) => void;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  configureRelations: (handlerTag: Double, relations: Object) => void;
   dropGestureHandler: (handlerTag: Double) => void;
   flushOperations: () => void;
 }

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

@@ -0,0 +1,3 @@
+import RNGestureHandlerDetectorNativeComponent from '../../specs/RNGestureHandlerDetectorNativeComponent';
+const HostGestureDetector = RNGestureHandlerDetectorNativeComponent;
+export default HostGestureDetector;

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

@@ -1,9 +1,9 @@
 import React, { Ref, useEffect, useRef } from 'react';
-import RNGestureHandlerModule from '../RNGestureHandlerModule.web';
-import { ActionType } from '../ActionType';
-import { PropsRef } from '../web/interfaces';
+import RNGestureHandlerModule from '../../RNGestureHandlerModule.web';
+import { ActionType } from '../../ActionType';
+import { PropsRef } from '../../web/interfaces';
 import { View } from 'react-native';
-import { tagMessage } from '../utils';
+import { tagMessage } from '../../utils';
 
 export interface GestureHandlerDetectorProps extends PropsRef {
   handlerTags: number[];

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

@@ -1,14 +1,15 @@
 import React from 'react';
-import { NativeGesture } from './hooks/useGesture';
-import { Reanimated } from '../handlers/gestures/reanimatedWrapper';
-
+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 { tagMessage } from '../../utils';
+import { configureRelations } from './utils';
+import { isComposedGesture } from '../hooks/utils/relationUtils';
 
 export interface NativeDetectorProps {
   children?: React.ReactNode;
-  gesture: NativeGesture;
+  gesture: NativeGesture | ComposedGesture;
 }
 
 const AnimatedNativeDetector =
@@ -34,29 +35,37 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
     );
   }
 
+  configureRelations(gesture);
+
   return (
     <NativeDetectorComponent
+      // @ts-ignore TODO: Fix types
       onGestureHandlerStateChange={
         gesture.gestureEvents.onGestureHandlerStateChange
       }
+      // @ts-ignore TODO: Fix types
       onGestureHandlerEvent={gesture.gestureEvents.onGestureHandlerEvent}
+      // @ts-ignore TODO: Fix types
       onGestureHandlerTouchEvent={
         gesture.gestureEvents.onGestureHandlerTouchEvent
       }
+      // @ts-ignore TODO: Fix types
       onGestureHandlerReanimatedStateChange={
         gesture.gestureEvents.onReanimatedStateChange
       }
+      // @ts-ignore TODO: Fix types
       onGestureHandlerReanimatedEvent={
         gesture.gestureEvents.onReanimatedUpdateEvent
       }
+      // @ts-ignore TODO: Fix types
       onGestureHandlerReanimatedTouchEvent={
         gesture.gestureEvents.onReanimatedTouchEvent
       }
       onGestureHandlerAnimatedEvent={
         gesture.gestureEvents.onGestureHandlerAnimatedEvent
       }
       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/NativeDetector/utils.ts

@@ -0,0 +1,150 @@
+// 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.
+
+import RNGestureHandlerModule from '../../RNGestureHandlerModule';
+import {
+  isComposedGesture,
+  prepareRelations,
+} from '../hooks/utils/relationUtils';
+import {
+  ComposedGesture,
+  ComposedGestureType,
+  Gesture,
+  NativeGesture,
+} from '../types';
+
+// The tree consists of ComposedGestures and NativeGestures. NativeGestures are always leaf nodes.
+export const traverseGestureRelations = (
+  node: NativeGesture | ComposedGesture,
+  simultaneousHandlers: Set<number>,
+  waitFor: number[] = []
+) => {
+  // If we are in the leaf node, we want to fill gesture relations arrays with current
+  // waitFor and simultaneousHandlers. We also want to configure relations on the native side.
+  if (!isComposedGesture(node)) {
+    node.gestureRelations = prepareRelations(node.config, node.tag);
+
+    node.gestureRelations.simultaneousHandlers.push(...simultaneousHandlers);
+    node.gestureRelations.waitFor.push(...waitFor);
+
+    RNGestureHandlerModule.configureRelations(node.tag, {
+      waitFor: node.gestureRelations.waitFor,
+      simultaneousHandlers: node.gestureRelations.simultaneousHandlers,
+      blocksHandlers: node.gestureRelations.blocksHandlers,
+    });
+
+    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 (going top-down).
+      // Simultaneous is an all-to-all relation - it needs to be prepared when entering the node.
+      // Exclusive is a one-to-many relation - gesture depends on the preceding ones and not on itself - it should be prepared when leaving the node (bottom-up).
+
+      // 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.type !== ComposedGestureType.Simultaneous &&
+        child.type === ComposedGestureType.Simultaneous
+      ) {
+        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.type === ComposedGestureType.Simultaneous &&
+        child.type !== ComposedGestureType.Simultaneous
+      ) {
+        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`.
+      traverseGestureRelations(child, simultaneousHandlers, waitFor);
+
+      // 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.type === ComposedGestureType.Simultaneous &&
+        node.type !== ComposedGestureType.Simultaneous
+      ) {
+        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.type !== ComposedGestureType.Simultaneous &&
+        node.type === ComposedGestureType.Simultaneous
+      ) {
+        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.type === ComposedGestureType.Exclusive) {
+        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.type === ComposedGestureType.Exclusive &&
+        node.type !== ComposedGestureType.Exclusive
+      ) {
+        waitFor.length = length;
+      }
+    }
+    // This means that child is a leaf node.
+    else {
+      // We don't want to mark gesture as simultaneous with itself, so we remove its tag from the set.
+      const hasRemovedTag = simultaneousHandlers.delete(child.tag);
+
+      traverseGestureRelations(child, simultaneousHandlers, waitFor);
+
+      if (hasRemovedTag) {
+        simultaneousHandlers.add(child.tag);
+      }
+
+      // In the leaf node, we only care about filling `waitFor` array.
+      if (node.type === ComposedGestureType.Exclusive) {
+        waitFor.push(child.tag);
+      }
+    }
+  });
+};
+
+export function configureRelations(gesture: Gesture) {
+  if (isComposedGesture(gesture)) {
+    traverseGestureRelations(
+      gesture,
+      new Set(
+        // If root is simultaneous, we want to add its tags to the set
+        gesture.type === ComposedGestureType.Simultaneous ? gesture.tags : []
+      )
+    );
+  } else {
+    const relations = prepareRelations(gesture.config, gesture.tag);
+
+    gesture.gestureRelations = relations;
+
+    RNGestureHandlerModule.configureRelations(gesture.tag, relations);
+  }
+}