resolved workaround

Author: akwasniewski

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

@@ -10,11 +10,7 @@ import {
 } from '../types';
 import { DetectorContext } from './useDetectorContext';
 import { Reanimated } from '../../handlers/gestures/reanimatedWrapper';
-import {
-  configureRelations,
-  getHandlerTag,
-  invokeDetectorEvent,
-} from './utils';
+import { configureRelations } from './utils';
 import { isComposedGesture } from '../hooks/utils/relationUtils';
 
 export interface NativeDetectorProps {
@@ -77,19 +73,53 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
 
   const handleGestureEvent = (key: keyof GestureEvents<unknown>) => {
     return (e: GestureHandlerEvent<unknown>) => {
-      const handlerTag = getHandlerTag(e);
-
-      const method = !logicMethods.current.has(handlerTag)
-        ? gesture.gestureEvents[key]
-        : logicMethods.current.get(handlerTag)?.current?.[key];
-
-      invokeDetectorEvent(
-        method as (e: GestureHandlerEvent<unknown>) => void,
-        e
-      );
+      if (gesture.gestureEvents[key]) {
+        gesture.gestureEvents[key](e);
+      }
+
+      logicMethods.current.forEach((ref) => {
+        const method = ref.current?.[key];
+        if (method) {
+          method(e);
+        }
+      });
     };
   };
 
+  const getHandlers = useCallback(
+    (key: keyof GestureEvents<unknown>) => {
+      const handlers: ((e: GestureHandlerEvent<unknown>) => void)[] = [];
+
+      if (gesture.gestureEvents[key]) {
+        handlers.push(
+          gesture.gestureEvents[key] as (
+            e: GestureHandlerEvent<unknown>
+          ) => void
+        );
+      }
+
+      logicMethods.current.forEach((ref) => {
+        const handler = ref.current?.[key];
+        if (handler) {
+          handlers.push(handler as (e: GestureHandlerEvent<unknown>) => void);
+        }
+      });
+
+      return handlers;
+    },
+    [logicChildren, gesture.gestureEvents]
+  );
+
+  const reanimatedEventHandler = Reanimated?.useComposedEventHandler(
+    getHandlers('onReanimatedUpdateEvent')
+  );
+  const reanimedStateChangeHandler = Reanimated?.useComposedEventHandler(
+    getHandlers('onReanimatedStateChange')
+  );
+  const reanimatedTouchEventHandler = Reanimated?.useComposedEventHandler(
+    getHandlers('onReanimatedTouchEvent')
+  );
+
   return (
     <DetectorContext.Provider value={{ register, unregister }}>
       <NativeDetectorComponent
@@ -108,17 +138,11 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
           'onGestureHandlerTouchEvent'
         )}
         // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
-        onGestureHandlerReanimatedStateChange={handleGestureEvent(
-          'onReanimatedStateChange'
-        )}
+        onGestureHandlerReanimatedStateChange={reanimatedEventHandler}
         // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
-        onGestureHandlerReanimatedEvent={handleGestureEvent(
-          'onReanimatedUpdateEvent'
-        )}
+        onGestureHandlerReanimatedEvent={reanimedStateChangeHandler}
         // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
-        onGestureHandlerReanimatedTouchEvent={handleGestureEvent(
-          'onReanimatedTouchEvent'
-        )}
+        onGestureHandlerReanimatedTouchEvent={reanimatedTouchEventHandler}
         moduleId={globalThis._RNGH_MODULE_ID}
         handlerTags={isComposedGesture(gesture) ? gesture.tags : [gesture.tag]}
         style={styles.detector}

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

@@ -5,12 +5,11 @@
 // For `simultaneousHandlers` we use Set as the order doesn't matter.
 
 import RNGestureHandlerModule from '../../RNGestureHandlerModule';
-import { tagMessage } from '../../utils';
 import {
   isComposedGesture,
   prepareRelations,
 } from '../hooks/utils/relationUtils';
-import { ComposedGestureName, Gesture, GestureHandlerEvent } from '../types';
+import { ComposedGestureName, Gesture } from '../types';
 
 // The tree consists of ComposedGestures and NativeGestures. NativeGestures are always leaf nodes.
 export const traverseAndConfigureRelations = (
@@ -146,48 +145,3 @@ export function configureRelations(gesture: Gesture) {
     );
   }
 }
-
-// Some event handlers are plain functions, whereas those marked as worklets
-// are wrapped in objects under eventMethod.workletEventHandler.worklet.
-// This function normalises invocation so that both forms can be called safely.
-// Note: this worklet unpacking is essentially a workaround since we need to
-// decide on the JS side which handle logic to execute.
-export function invokeDetectorEvent<T>(
-  method:
-    | ((event: GestureHandlerEvent<T>) => void)
-    | {
-        workletEventHandler: {
-          worklet: (event: GestureHandlerEvent<T>) => void;
-        };
-      }
-    | null
-    | undefined,
-  event: GestureHandlerEvent<T>
-): void {
-  if (!method) {
-    return;
-  }
-
-  if (typeof method === 'function') {
-    method(event);
-    return;
-  }
-
-  if ('workletEventHandler' in method) {
-    if ('worklet' in method.workletEventHandler) {
-      invokeDetectorEvent(method.workletEventHandler.worklet, event);
-    }
-    return;
-  }
-}
-
-export function getHandlerTag<T>(e: GestureHandlerEvent<T>): number {
-  if ('nativeEvent' in e) {
-    return (e.nativeEvent as any).handlerTag;
-  }
-  if ('handlerTag' in e) {
-    return (e as any).handlerTag;
-  }
-
-  throw new Error(tagMessage('Cannot extract handler tag from event'));
-}