detaching handlers

Author: akwasniewski

packages/react-native-gesture-handler/src/RNGestureHandlerModule.web.ts

@@ -65,6 +65,10 @@ export default {
     // @ts-ignore Types should be HTMLElement or React.Component
     NodeManager.getHandler(handlerTag).init(newView, propsRef);
   },
+  detachGestureHandler(handlerTag: number) {
+    shouldPreventDrop = false;
+    NodeManager.getHandler(handlerTag).detachHtml();
+  },
   updateGestureHandler(handlerTag: number, newConfig: Config) {
     NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
 
@@ -80,7 +84,7 @@ export default {
     if (shouldPreventDrop) {
       return;
     }
-
+    console.log();
     NodeManager.dropGestureHandler(handlerTag);
   },
   // eslint-disable-next-line @typescript-eslint/no-empty-function

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

@@ -1,52 +1,21 @@
 import { useEffect, useRef } from 'react';
-import {
-  GestureHandlerStateChangeEvent,
-  GestureHandlerTouchEvent,
-  GestureHandlerEvent,
-} from '../web/interfaces';
 import { View } from 'react-native';
 import RNGestureHandlerModuleWeb from '../RNGestureHandlerModule.web';
 import { ActionType } from '../ActionType';
 export interface GestureHandlerDetectorProps {
-  onGestureHandlerEvent?: (e: GestureHandlerEvent) => void;
-  onGestureHandlerAnimatedEvent?: (e: GestureHandlerEvent) => void;
-  onGestureHandlerStateChange?: (e: GestureHandlerStateChangeEvent) => void;
-  onGestureHandlerTouchEvent?: (e: GestureHandlerTouchEvent) => void;
-
   handlerTags: number[];
   dispatchesAnimatedEvents: boolean;
   moduleId: number;
   children?: React.ReactNode;
 }
 
 const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
-  const {
-    onGestureHandlerEvent,
-    onGestureHandlerAnimatedEvent,
-    onGestureHandlerStateChange,
-    onGestureHandlerTouchEvent,
-    handlerTags,
-    dispatchesAnimatedEvents,
-    moduleId,
-    children,
-  } = props;
+  const { handlerTags, children } = props;
 
   const viewRef = useRef(null);
   const propsRef = useRef<GestureHandlerDetectorProps>(props);
   const oldHandlerTags = useRef<Set<number>>(new Set<number>());
 
-  useEffect(() => {
-    attachHandlers();
-  }, [
-    onGestureHandlerEvent,
-    onGestureHandlerAnimatedEvent,
-    onGestureHandlerStateChange,
-    onGestureHandlerTouchEvent,
-    handlerTags,
-    dispatchesAnimatedEvents,
-    moduleId,
-  ]);
-
   const attachHandlers = (): void => {
     const curHandlerTags = new Set(handlerTags);
     const newHandlerTags: Set<number> = curHandlerTags.difference(
@@ -62,6 +31,19 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
     });
   };
 
+  const detachHandlers = (): void => {
+    handlerTags.forEach((tag) => {
+      RNGestureHandlerModuleWeb.detachGestureHandler(tag);
+    });
+  };
+
+  useEffect(() => {
+    attachHandlers();
+    return () => {
+      detachHandlers();
+    };
+  }, [attachHandlers, detachHandlers]);
+
   return <View ref={viewRef}>{children}</View>;
 };
 

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
+import { createRef } from 'react';
 import { State } from '../../State';
 import {
   Config,
@@ -65,6 +66,13 @@ export default abstract class GestureHandler implements IGestureHandler {
     this.delegate.init(viewRef, this);
   }
 
+  public detachHtml() {
+    this.propsRef = createRef();
+    this.viewRef = 0;
+    this.state = State.UNDETERMINED;
+    this.delegate.detachHtml();
+  }
+
   public attachEventManager(manager: EventManager<unknown>): void {
     manager.setOnPointerDown(this.onPointerDown.bind(this));
     manager.setOnPointerAdd(this.onPointerAdd.bind(this));

packages/react-native-gesture-handler/src/web/handlers/IGestureHandler.ts

@@ -35,6 +35,7 @@ export default interface IGestureHandler {
   cancel: () => void;
 
   reset: () => void;
+  detachHtml: () => void;
 
   shouldWaitForHandlerFailure: (handler: IGestureHandler) => boolean;
   shouldRequireToWaitForFailure: (handler: IGestureHandler) => boolean;

packages/react-native-gesture-handler/src/web/tools/GestureHandlerDelegate.ts

@@ -11,6 +11,7 @@ export interface GestureHandlerDelegate<TComponent, THandler> {
   view: TComponent;
 
   init(viewRef: number, handler: THandler): void;
+  detachHtml(): void;
   isPointerInBounds({ x, y }: { x: number; y: number }): boolean;
   measureView(): MeasureResult;
   reset(): void;

packages/react-native-gesture-handler/src/web/tools/GestureHandlerWebDelegate.ts

@@ -63,6 +63,10 @@ export class GestureHandlerWebDelegate
     );
   }
 
+  detachHtml(): void {
+    this.view = null as unknown as HTMLElement;
+  }
+
   isPointerInBounds({ x, y }: { x: number; y: number }): boolean {
     return isPointerInBounds(this.view, { x, y });
   }