useReanimatedEventsManager

Author: j-piasecki

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

@@ -6,28 +6,31 @@ import {
   AnimatedNativeDetector,
   NativeDetectorProps,
   nativeDetectorStyles,
-  ReanimatedNativeDetector,
 } from './common';
+import { useReanimatedEventsManager } from './useReanimatedEventsManager';
 
 export function NativeDetector<THandlerData, TConfig>({
   gesture,
   children,
 }: NativeDetectorProps<THandlerData, TConfig>) {
+  // TODO: is it possible with useReanimatedEventsManager to handle both Animated and Reanimated at the same time?
+
   const NativeDetectorComponent = gesture.config.dispatchesAnimatedEvents
     ? AnimatedNativeDetector
-    : gesture.config.shouldUseReanimatedDetector
-      ? ReanimatedNativeDetector
-      : HostGestureDetector;
+    : HostGestureDetector;
 
   ensureNativeDetectorComponent(NativeDetectorComponent);
   configureRelations(gesture);
 
+  // TODO: call useReanimatedEventsManager only when using Reanimated
+  const viewRef = useReanimatedEventsManager(gesture);
   const handlerTags = useMemo(() => {
     return isComposedGesture(gesture) ? gesture.tags : [gesture.tag];
   }, [gesture]);
 
   return (
     <NativeDetectorComponent
+      ref={viewRef}
       pointerEvents={'box-none'}
       // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
       onGestureHandlerStateChange={
@@ -40,18 +43,6 @@ export function NativeDetector<THandlerData, TConfig>({
         gesture.detectorCallbacks.onGestureHandlerTouchEvent
       }
       // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
-      onGestureHandlerReanimatedStateChange={
-        gesture.detectorCallbacks.onReanimatedStateChange
-      }
-      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
-      onGestureHandlerReanimatedEvent={
-        gesture.detectorCallbacks.onReanimatedUpdateEvent
-      }
-      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
-      onGestureHandlerReanimatedTouchEvent={
-        gesture.detectorCallbacks.onReanimatedTouchEvent
-      }
-      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
       onGestureHandlerAnimatedEvent={
         gesture.detectorCallbacks.onGestureHandlerAnimatedEvent
       }

packages/react-native-gesture-handler/src/v3/detectors/useReanimatedEventsManager.ts

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Gesture } from '../types';
+import { findNodeHandle } from 'react-native';
+// TODO: import from reanimatedWrapper
+import { NativeEventsManager } from 'react-native-reanimated/src/createAnimatedComponent/NativeEventsManager';
+
+// TODO: web
+export function useReanimatedEventsManager<THandlerData, TConfig>(
+  gesture: Gesture<THandlerData, TConfig>
+) {
+  const prevProps = useRef<any>(null);
+  const eventManager = useRef<any>(null);
+  const viewRef = useRef<any>(null);
+
+  const reaProps = useMemo(
+    () => ({
+      onGestureHandlerReanimatedStateChange:
+        gesture.detectorCallbacks.onReanimatedStateChange,
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
+      onGestureHandlerReanimatedEvent:
+        gesture.detectorCallbacks.onReanimatedUpdateEvent,
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
+      onGestureHandlerReanimatedTouchEvent:
+        gesture.detectorCallbacks.onReanimatedTouchEvent,
+    }),
+    [
+      gesture.detectorCallbacks.onReanimatedStateChange,
+      gesture.detectorCallbacks.onReanimatedTouchEvent,
+      gesture.detectorCallbacks.onReanimatedUpdateEvent,
+    ]
+  );
+
+  useEffect(() => {
+    const nativeTag = findNodeHandle(viewRef.current) ?? -1;
+    viewRef.__nativeTag = nativeTag;
+    eventManager.current = new NativeEventsManager({
+      props: reaProps,
+      _componentRef: viewRef,
+      getComponentViewTag: () => {
+        return nativeTag;
+      },
+    });
+    eventManager.current.attachEvents();
+
+    return () => {
+      eventManager.current.detachEvents();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (prevProps.current) {
+      eventManager.current.updateEvents(prevProps.current);
+    }
+    prevProps.current = reaProps;
+  }, [reaProps]);
+
+  return viewRef;
+}