Fix relations not working when one of the child dependencies remounts…

… without a render in the parent (#3269)

## Description

Fixes
#3265

As @gaearon pointed out in the issue:
> I think what's happening here is that the library doesn't consider the
fact that the contents of a ref can change over time without the parent
knowing about it. Rather, it seems to be operating under assumption that
a ref change at the bottom will always be accompanied by a state change
near the top (wherever blocksExternalGesture is called).

That's unfortunately true, and the current API doesn't allow to use ref
callbacks to handle this (nor would it be easy to update it to do that).
This is one more point to the pile of reasons why the API needs an
overhaul.

For the time being, I implemented a mechanism that allows
`GestureDetector` to listen to the mounting and unmounting of gestures.
This way it can react to a remount of a gesture it depends on and update
the native side if necessary.

## Test plan

Tested on the Example app and the reproducer from the issue

|Android|iOS|
|-|-|
|<video
src="https://github.com/user-attachments/assets/4df2e1d7-3932-4c1e-a305-ac1a0207ba20">|<video
src="https://github.com/user-attachments/assets/e522bdb4-98a9-4a78-b9e8-2f0f9b28b62c">|

src/handlers/createHandler.tsx

@@ -24,6 +24,7 @@ import { ActionType } from '../ActionType';
 import { PressabilityDebugView } from './PressabilityDebugView';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 import { ghQueueMicrotask } from '../ghQueueMicrotask';
+import { MountRegistry } from '../mountRegistry';
 
 const UIManagerAny = UIManager as any;
 
@@ -262,6 +263,8 @@ export default function createHandler<
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
         delete handlerIDToTag[handlerID];
       }
+
+      MountRegistry.gestureHandlerWillUnmount(this);
     }
 
     private onGestureHandlerEvent = (event: GestureEvent<U>) => {
@@ -373,6 +376,10 @@ export default function createHandler<
       }
 
       scheduleFlushOperations();
+
+      ghQueueMicrotask(() => {
+        MountRegistry.gestureHandlerWillMount(this);
+      });
     };
 
     private updateGestureHandler = (

src/handlers/gestures/GestureDetector/attachHandlers.ts

@@ -14,6 +14,7 @@ import {
   checkGestureCallbacksForWorklets,
   ALLOWED_PROPS,
 } from './utils';
+import { MountRegistry } from '../../../mountRegistry';
 
 interface AttachHandlersConfig {
   preparedGesture: AttachedGestureState;
@@ -93,6 +94,8 @@ export function attachHandlers({
         actionType
       );
     }
+
+    MountRegistry.gestureWillMount(gesture);
   }
 
   preparedGesture.attachedGestures = gesturesToAttach;

src/handlers/gestures/GestureDetector/dropHandlers.ts

@@ -2,12 +2,15 @@ import { unregisterHandler } from '../../handlersRegistry';
 import RNGestureHandlerModule from '../../../RNGestureHandlerModule';
 import { scheduleFlushOperations } from '../../utils';
 import { AttachedGestureState } from './types';
+import { MountRegistry } from '../../../mountRegistry';
 
 export function dropHandlers(preparedGesture: AttachedGestureState) {
   for (const handler of preparedGesture.attachedGestures) {
     RNGestureHandlerModule.dropGestureHandler(handler.handlerTag);
 
     unregisterHandler(handler.handlerTag, handler.config.testId);
+
+    MountRegistry.gestureWillUnmount(handler);
   }
 
   scheduleFlushOperations();

src/handlers/gestures/GestureDetector/index.tsx

@@ -23,6 +23,7 @@ import { useWebEventHandlers } from './utils';
 import { Wrap, AnimatedWrap } from './Wrap';
 import { useDetectorUpdater } from './useDetectorUpdater';
 import { useViewRefHandler } from './useViewRefHandler';
+import { useMountReactions } from './useMountReactions';
 
 function propagateDetectorConfig(
   props: GestureDetectorProps,
@@ -174,6 +175,8 @@ export const GestureDetector = (props: GestureDetectorProps) => {
     }
   }, [props]);
 
+  useMountReactions(updateAttachedGestures, preparedGesture);
+
   if (shouldUseReanimated) {
     return (
       <AnimatedWrap

src/handlers/gestures/GestureDetector/useMountReactions.ts

@@ -0,0 +1,51 @@
+import { transformIntoHandlerTags } from '../../utils';
+import { MountRegistry } from '../../../mountRegistry';
+import { AttachedGestureState } from './types';
+import { useEffect } from 'react';
+import { GestureRef } from '../gesture';
+
+function shouldUpdateDetector(
+  relation: GestureRef[] | undefined,
+  gesture: { handlerTag: number }
+) {
+  if (relation === undefined) {
+    return false;
+  }
+
+  for (const tag of transformIntoHandlerTags(relation)) {
+    if (tag === gesture.handlerTag) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function useMountReactions(
+  updateDetector: () => void,
+  state: AttachedGestureState
+) {
+  useEffect(() => {
+    return MountRegistry.addMountListener((gesture) => {
+      // At this point the ref in the gesture config should be updated, so we can check if one of the gestures
+      // set in a relation with the gesture got mounted. If so, we need to update the detector to propagate
+      // the changes to the native side.
+      for (const attachedGesture of state.attachedGestures) {
+        const blocksHandlers = attachedGesture.config.blocksHandlers;
+        const requireToFail = attachedGesture.config.requireToFail;
+        const simultaneousWith = attachedGesture.config.simultaneousWith;
+
+        if (
+          shouldUpdateDetector(blocksHandlers, gesture) ||
+          shouldUpdateDetector(requireToFail, gesture) ||
+          shouldUpdateDetector(simultaneousWith, gesture)
+        ) {
+          updateDetector();
+
+          // We can safely return here, if any other gestures should be updated, they will be by the above call
+          return;
+        }
+      }
+    });
+  }, [updateDetector, state]);
+}

src/handlers/utils.ts

@@ -36,7 +36,8 @@ export function filterConfig(
   }
   return filteredConfig;
 }
-function transformIntoHandlerTags(handlerIDs: any) {
+
+export function transformIntoHandlerTags(handlerIDs: any) {
   handlerIDs = toArray(handlerIDs);
 
   if (Platform.OS === 'web') {

src/mountRegistry.ts

@@ -0,0 +1,51 @@
+import { GestureType } from './handlers/gestures/gesture';
+
+interface ReactComponentWithHandlerTag extends React.Component {
+  handlerTag: number;
+}
+
+export type GestureMountListener = (
+  gesture: GestureType | ReactComponentWithHandlerTag
+) => void;
+
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class MountRegistry {
+  private static mountListeners = new Set<GestureMountListener>();
+  private static unmountListeners = new Set<GestureMountListener>();
+
+  static addMountListener(listener: GestureMountListener): () => void {
+    this.mountListeners.add(listener);
+
+    return () => {
+      this.mountListeners.delete(listener);
+    };
+  }
+
+  static addUnmountListener(listener: GestureMountListener): () => void {
+    this.unmountListeners.add(listener);
+
+    return () => {
+      this.unmountListeners.delete(listener);
+    };
+  }
+
+  static gestureHandlerWillMount(handler: React.Component) {
+    this.mountListeners.forEach((listener) =>
+      listener(handler as ReactComponentWithHandlerTag)
+    );
+  }
+
+  static gestureHandlerWillUnmount(handler: React.Component) {
+    this.unmountListeners.forEach((listener) =>
+      listener(handler as ReactComponentWithHandlerTag)
+    );
+  }
+
+  static gestureWillMount(gesture: GestureType) {
+    this.mountListeners.forEach((listener) => listener(gesture));
+  }
+
+  static gestureWillUnmount(gesture: GestureType) {
+    this.unmountListeners.forEach((listener) => listener(gesture));
+  }
+}