Don't keep virtual callbacks in ref

Author: j-piasecki

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

@@ -1,7 +1,7 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import HostGestureDetector from '../HostGestureDetector';
 import {
-  VirtualChildren,
+  VirtualChild,
   GestureHandlerEvent,
   DetectorCallbacks,
 } from '../../types';
@@ -21,17 +21,24 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
   gesture,
   children,
 }: InterceptingGestureDetectorProps<THandlerData, TConfig>) {
-  const [virtualChildren, setVirtualChildren] = useState<VirtualChildren[]>([]);
-
-  const virtualMethods = useRef<Map<number, DetectorCallbacks<unknown>>>(
-    new Map()
+  const [virtualChildren, setVirtualChildren] = useState<VirtualChild[]>([]);
+
+  const shouldUseReanimated = useMemo(
+    () =>
+      virtualChildren.reduce(
+        (acc, child) => acc || child.forReanimated,
+        gesture?.config.shouldUseReanimatedDetector ?? false
+      ),
+    [virtualChildren, gesture]
   );
 
-  const [shouldUseReanimated, setShouldUseReanimated] = useState(
-    gesture ? gesture.config.shouldUseReanimatedDetector : false
-  );
-  const [dispatchesAnimatedEvents, setDispatchesAnimatedEvents] = useState(
-    gesture ? gesture.config.dispatchesAnimatedEvents : false
+  const dispatchesAnimatedEvents = useMemo(
+    () =>
+      virtualChildren.reduce(
+        (acc, child) => acc || child.forAnimated,
+        gesture?.config.dispatchesAnimatedEvents ?? false
+      ),
+    [virtualChildren, gesture]
   );
 
   const NativeDetectorComponent = dispatchesAnimatedEvents
@@ -40,41 +47,20 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
       ? ReanimatedNativeDetector
       : HostGestureDetector;
 
-  const register = useCallback(
-    (
-      child: VirtualChildren,
-      methods: DetectorCallbacks<unknown>,
-      forReanimated: boolean | undefined,
-      forAnimated: boolean | undefined
-    ) => {
-      // console.log('[IGD] Registering virtual detector', child.viewTag, child.handlerTags);
-      setShouldUseReanimated(!!forReanimated);
-      setDispatchesAnimatedEvents(!!forAnimated);
-
-      setVirtualChildren((prev) => {
-        const index = prev.findIndex((c) => c.viewTag === child.viewTag);
-        if (index !== -1) {
-          const updated = [...prev];
-          updated[index] = child;
-          return updated;
-        }
-
-        return [...prev, child];
-      });
-
-      child.handlerTags.forEach((tag) => {
-        virtualMethods.current.set(tag, methods);
-      });
-    },
-    []
-  );
+  const register = useCallback((child: VirtualChild) => {
+    setVirtualChildren((prev) => {
+      const index = prev.findIndex((c) => c.viewTag === child.viewTag);
+      if (index !== -1) {
+        const updated = [...prev];
+        updated[index] = child;
+        return updated;
+      }
 
-  const unregister = useCallback((childTag: number, handlerTags: number[]) => {
-    // console.log('[IGD] Unregistering virtual detector', childTag, handlerTags);
-    handlerTags.forEach((tag) => {
-      virtualMethods.current.delete(tag);
+      return [...prev, child];
     });
+  }, []);
 
+  const unregister = useCallback((childTag: number) => {
     setVirtualChildren((prev) => prev.filter((c) => c.viewTag !== childTag));
   }, []);
 
@@ -93,8 +79,8 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
         gesture.detectorCallbacks[key](e);
       }
 
-      virtualMethods.current.forEach((callbacks) => {
-        const method = callbacks[key];
+      virtualChildren.forEach((child) => {
+        const method = child.methods[key];
         if (method) {
           method(e);
         }
@@ -114,8 +100,8 @@ export function InterceptingGestureDetector<THandlerData, TConfig>({
         );
       }
 
-      virtualMethods.current.forEach((callbacks) => {
-        const handler = callbacks[key];
+      virtualChildren.forEach((child) => {
+        const handler = child.methods[key];
         if (handler) {
           handlers.push(
             handler as (e: GestureHandlerEvent<THandlerData>) => void

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

@@ -6,7 +6,7 @@ import { isComposedGesture } from '../../hooks/utils/relationUtils';
 import { NativeDetectorProps } from '../common';
 import { configureRelations } from '../utils';
 import { tagMessage } from '../../../utils';
-import { DetectorCallbacks } from '../../types';
+import { DetectorCallbacks, VirtualChild } from '../../types';
 
 export function VirtualDetector<THandlerData, TConfig>(
   props: NativeDetectorProps<THandlerData, TConfig>
@@ -52,26 +52,20 @@ export function VirtualDetector<THandlerData, TConfig>(
       ? props.gesture.tags
       : [props.gesture.tag];
 
-    const virtualProps = {
+    const virtualChild: VirtualChild = {
       viewTag,
       handlerTags,
+      methods: props.gesture.detectorCallbacks as DetectorCallbacks<unknown>,
+      forReanimated: !!props.gesture.config.shouldUseReanimatedDetector,
+      forAnimated: !!props.gesture.config.dispatchesAnimatedEvents,
+      // TODO: why do we need this?
+      viewRef: Platform.OS === 'web' ? viewRef.current : undefined,
     };
 
-    if (Platform.OS === 'web') {
-      Object.assign(virtualProps, { viewRef });
-    }
-
-    console.log('[VD] Registering virtual detector', viewTag, handlerTags);
-    register(
-      virtualProps,
-      props.gesture.detectorCallbacks as DetectorCallbacks<unknown>,
-      props.gesture.config.shouldUseReanimatedDetector,
-      props.gesture.config.dispatchesAnimatedEvents
-    );
+    register(virtualChild);
 
     return () => {
-      console.log('[VD] Unregistering virtual detector', viewTag, handlerTags);
-      unregister(viewTag, handlerTags);
+      unregister(viewTag);
     };
   }, [viewTag, props.gesture, register, unregister]);
 

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

@@ -1,14 +1,9 @@
 import { createContext, use } from 'react';
-import { DetectorCallbacks, VirtualChildren } from '../../types';
+import { VirtualChild } from '../../types';
 
 type DetectorContextType = {
-  register: (
-    child: VirtualChildren,
-    methods: DetectorCallbacks<unknown>,
-    forReanimated: boolean | undefined,
-    forAnimated: boolean | undefined
-  ) => void;
-  unregister: (child: number, handlerTags: number[]) => void;
+  register: (child: VirtualChild) => void;
+  unregister: (child: number) => void;
 };
 
 export const DetectorContext = createContext<DetectorContextType | null>(null);

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

@@ -21,7 +21,13 @@ export type DetectorCallbacks<THandlerData> = {
   onGestureHandlerAnimatedEvent: undefined | AnimatedEvent;
 };
 
-export type VirtualChildren = {
+export type VirtualChild = {
   viewTag: number;
   handlerTags: number[];
+  methods: DetectorCallbacks<unknown>;
+  forReanimated: boolean;
+  forAnimated: boolean;
+
+  // only set on web
+  viewRef: unknown;
 };