detach handlers

Author: Andrzej Antoni Kwaśniewski

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

@@ -69,6 +69,12 @@ - (void)willMoveToWindow:(RNGHWindow *)newWindow
       NSNumber *handlerTag = [NSNumber numberWithInt:handler];
       [handlerManager.registry detachHandlerWithTag:handlerTag];
     }
+    for (const auto &child : logicChildren) {
+      for (id handlerTag : child.second.attachedHandlers) {
+        [handlerManager.registry detachHandlerWithTag:handlerTag];
+      }
+    }
+    logicChildren.clear();
   }
 }
 
@@ -227,19 +233,25 @@ - (void)updateProps:(const Props::Shared &)propsBase oldProps:(const Props::Shar
            attachedHandlers:_attachedHandlers
              nativeHandlers:_nativeHandlers];
   [super updateProps:propsBase oldProps:oldPropsBase];
+  RNGestureHandlerManager *handlerManager = [RNGestureHandlerModule handlerManagerForModuleId:_moduleId];
+  react_native_assert(handlerManager != nullptr && "Tried to access a non-existent handler manager")
+
+      std::unordered_map<int, bool>
+          shouldKeepLogicChild;
+  for (const std::pair<const int, LogicChild> &child : logicChildren) {
+    shouldKeepLogicChild[child.first] = false;
+  }
 
   for (const RNGestureHandlerDetectorLogicChildrenStruct &child : newProps.logicChildren) {
     if (logicChildren.find(child.viewTag) == logicChildren.end()) {
       // Initialize the vector for a new logic child
-      RNGestureHandlerManager *handlerManager = [RNGestureHandlerModule handlerManagerForModuleId:_moduleId];
-      react_native_assert(handlerManager != nullptr && "Tried to access a non-existent handler manager")
-          logicChildren[child.viewTag]
-              .view = [handlerManager viewForReactTag:@(child.viewTag)];
+      logicChildren[child.viewTag].view = [handlerManager viewForReactTag:@(child.viewTag)];
       logicChildren[child.viewTag].handlerTags = {};
       logicChildren[child.viewTag].attachedHandlers = [NSMutableSet set];
       logicChildren[child.viewTag].nativeHandlers = [NSMutableSet set];
       [[handlerManager registry] registerLogicChild:@(child.viewTag) toParent:@(self.tag)];
     }
+    shouldKeepLogicChild[child.viewTag] = true;
     [self updatePropsInternal:child.handlerTags
                oldHandlerTags:logicChildren[child.viewTag].handlerTags
                       isLogic:true
@@ -248,6 +260,15 @@ - (void)updateProps:(const Props::Shared &)propsBase oldProps:(const Props::Shar
                nativeHandlers:logicChildren[child.viewTag].nativeHandlers];
   }
 
+  for (const auto &child : shouldKeepLogicChild) {
+    if (!child.second) {
+      for (id handlerTag : logicChildren[child.first].attachedHandlers) {
+        [handlerManager.registry detachHandlerWithTag:handlerTag];
+      }
+      logicChildren.erase(child.first);
+    }
+  }
+
   // Override to force hittesting to work outside bounds
   self.clipsToBounds = NO;
 }

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

@@ -25,7 +25,7 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   const attachedHandlerTags = useRef<Set<number>>(new Set<number>());
   const attachedNativeHandlerTags = useRef<Set<number>>(new Set<number>());
 
-  const logicChildren = useRef<Map<LogicDetectorProps, LogicChild>>(new Map());
+  const logicChildren = useRef<Map<number, LogicChild>>(new Map());
 
   const detachHandlers = (
     oldHandlerTags: Set<number>,
@@ -103,18 +103,29 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
       attachedHandlerTags.current,
       attachedNativeHandlerTags.current
     );
+  }, [handlerTags, children]);
+
+  useEffect(() => {
+    const shouldKeepLogicChild: Map<number, boolean> = new Map();
 
-    props.logicChildren?.forEach((child) => {
-      if (!logicChildren.current.has(child)) {
-        logicChildren.current.set(child, {
+    for (const key of logicChildren.current.keys()) {
+      shouldKeepLogicChild.set(key, false);
+    }
+
+    props.logicChildren?.forEach((child, key) => {
+      if (!logicChildren.current.has(child.viewTag)) {
+        logicChildren.current.set(child.viewTag, {
           attachedHandlerTags: new Set(),
           attachedNativeHandlerTags: new Set(),
         });
       }
-      const attachedHandlerTags =
-        logicChildren.current.get(child)?.attachedHandlerTags;
-      const attachedNativeHandlerTags =
-        logicChildren.current.get(child)?.attachedNativeHandlerTags;
+      shouldKeepLogicChild.set(key.viewTag, true);
+      const attachedHandlerTags = logicChildren.current.get(
+        child.viewTag
+      )?.attachedHandlerTags;
+      const attachedNativeHandlerTags = logicChildren.current.get(
+        child.viewTag
+      )?.attachedNativeHandlerTags;
       if (attachedHandlerTags && attachedNativeHandlerTags) {
         attachHandlers(
           child.viewRef,
@@ -126,27 +137,37 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
         );
       }
     });
-  }, [handlerTags, children]);
 
-  useEffect(() => {
-    return () => {
-      detachHandlers(
-        attachedHandlerTags.current,
-        attachedHandlerTags.current,
-        attachedNativeHandlerTags.current
-      );
-      props.logicChildren?.forEach((child) => {
+    shouldKeepLogicChild.forEach((value, key) => {
+      if (value) {
         const attachedHandlerTags =
-          logicChildren.current.get(child)?.attachedHandlerTags;
+          logicChildren.current.get(key)?.attachedHandlerTags;
         const attachedNativeHandlerTags =
-          logicChildren.current.get(child)?.attachedNativeHandlerTags;
+          logicChildren.current.get(key)?.attachedNativeHandlerTags;
         if (attachedHandlerTags && attachedNativeHandlerTags) {
           detachHandlers(
             attachedHandlerTags,
             attachedHandlerTags,
             attachedNativeHandlerTags
           );
         }
+      }
+    });
+  }, [props.logicChildren]);
+
+  useEffect(() => {
+    return () => {
+      detachHandlers(
+        attachedHandlerTags.current,
+        attachedHandlerTags.current,
+        attachedNativeHandlerTags.current
+      );
+      logicChildren?.current.forEach((child) => {
+        detachHandlers(
+          child.attachedHandlerTags,
+          child.attachedHandlerTags,
+          child.attachedNativeHandlerTags
+        );
       });
     };
   }, []);