handling animated events in sendEvents

Author: akwasniewski

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

@@ -47,7 +47,7 @@ export default {
     handlerTag: number,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     newView: any,
-    _actionType: ActionType,
+    actionType: ActionType,
     propsRef: React.RefObject<unknown>
   ) {
     if (!(newView instanceof Element || newView instanceof React.Component)) {
@@ -63,7 +63,7 @@ export default {
     }
 
     // @ts-ignore Types should be HTMLElement or React.Component
-    NodeManager.getHandler(handlerTag).init(newView, propsRef);
+    NodeManager.getHandler(handlerTag).init(newView, propsRef, actionType);
   },
   detachGestureHandler(handlerTag: number) {
     shouldPreventDrop = false;

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

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { createRef } from 'react';
 import { State } from '../../State';
 import {
   Config,
@@ -19,6 +18,7 @@ import IGestureHandler from './IGestureHandler';
 import { MouseButton } from '../../handlers/gestureHandlerCommon';
 import { PointerType } from '../../PointerType';
 import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
+import { ActionType } from '../../ActionType';
 
 export default abstract class GestureHandler implements IGestureHandler {
   private lastSentState: State | null = null;
@@ -29,8 +29,9 @@ export default abstract class GestureHandler implements IGestureHandler {
   protected hasCustomActivationCriteria = false;
   private _enabled = false;
 
-  private viewRef!: number;
-  private propsRef!: React.RefObject<unknown>;
+  private viewRef: number | null = null;
+  private propsRef: React.RefObject<unknown> | null = null;
+  private actionType: ActionType | null = null;
   private _handlerTag!: number;
   private _config: Config = { enabled: false };
 
@@ -57,19 +58,25 @@ export default abstract class GestureHandler implements IGestureHandler {
   // Initializing handler
   //
 
-  protected init(viewRef: number, propsRef: React.RefObject<unknown>) {
+  protected init(
+    viewRef: number,
+    propsRef: React.RefObject<unknown>,
+    actionType: ActionType
+  ) {
     this.propsRef = propsRef;
     this.viewRef = viewRef;
-
+    this.actionType = actionType;
     this.state = State.UNDETERMINED;
 
     this.delegate.init(viewRef, this);
   }
 
   public detachHtml() {
-    this.propsRef = createRef();
-    this.viewRef = 0;
+    this.propsRef = null;
+    this.viewRef = null;
+    this.actionType = null;
     this.state = State.UNDETERMINED;
+
     this.delegate.detachHtml();
   }
 
@@ -344,18 +351,18 @@ export default abstract class GestureHandler implements IGestureHandler {
   }
 
   public sendTouchEvent(event: AdaptedEvent): void {
-    if (!this.enabled) {
+    if (!this.enabled || !this.propsRef) {
       return;
     }
 
-    const { onGestureHandlerEvent }: PropsRef = this.propsRef
+    const { onGestureHandlerTouchEvent }: PropsRef = this.propsRef
       .current as PropsRef;
 
     const touchEvent: ResultTouchEvent | undefined =
       this.transformTouchEvent(event);
 
     if (touchEvent) {
-      invokeNullableMethod(onGestureHandlerEvent, touchEvent);
+      invokeNullableMethod(onGestureHandlerTouchEvent, touchEvent);
     }
   }
 
@@ -364,9 +371,14 @@ export default abstract class GestureHandler implements IGestureHandler {
   //
 
   public sendEvent = (newState: State, oldState: State): void => {
-    const { onGestureHandlerEvent, onGestureHandlerStateChange }: PropsRef =
-      this.propsRef.current as PropsRef;
-
+    if (!this.propsRef) {
+      return;
+    }
+    const {
+      onGestureHandlerEvent,
+      onGestureHandlerStateChange,
+      onGestureHandlerAnimatedEvent,
+    }: PropsRef = this.propsRef.current as PropsRef;
     const resultEvent: ResultEvent = this.transformEventData(
       newState,
       oldState
@@ -383,7 +395,14 @@ export default abstract class GestureHandler implements IGestureHandler {
     }
     if (this.state === State.ACTIVE) {
       resultEvent.nativeEvent.oldState = undefined;
-      invokeNullableMethod(onGestureHandlerEvent, resultEvent);
+      if (
+        this.actionType === ActionType.NATIVE_DETECTOR ||
+        this.actionType === ActionType.NATIVE_DETECTOR_ANIMATED_EVENT
+      ) {
+        invokeNullableMethod(onGestureHandlerAnimatedEvent, resultEvent);
+      } else {
+        invokeNullableMethod(onGestureHandlerEvent, resultEvent);
+      }
     }
   };
 
@@ -397,7 +416,7 @@ export default abstract class GestureHandler implements IGestureHandler {
         ),
         ...this.transformNativeEvent(),
         handlerTag: this.handlerTag,
-        target: this.viewRef,
+        target: this.viewRef!,
         oldState: newState !== oldState ? oldState : undefined,
         pointerType: this.pointerType,
       },
@@ -512,7 +531,7 @@ export default abstract class GestureHandler implements IGestureHandler {
 
     const trackerData = this.tracker.trackedPointers;
 
-    if (trackerData.size === 0) {
+    if (trackerData.size === 0 || !this.propsRef) {
       return;
     }
 

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

@@ -1,3 +1,4 @@
+import { ActionType } from '../../ActionType';
 import { State } from '../../State';
 import { AdaptedEvent, Config } from '../interfaces';
 
@@ -21,12 +22,16 @@ export default class LongPressGestureHandler extends GestureHandler {
 
   private activationTimeout: number | undefined;
 
-  public init(ref: number, propsRef: React.RefObject<unknown>) {
+  public init(
+    ref: number,
+    propsRef: React.RefObject<unknown>,
+    actionType: ActionType
+  ) {
     if (this.config.enableContextMenu === undefined) {
       this.config.enableContextMenu = false;
     }
 
-    super.init(ref, propsRef);
+    super.init(ref, propsRef, actionType);
   }
 
   protected transformNativeEvent() {

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

@@ -4,6 +4,7 @@ import { DEFAULT_TOUCH_SLOP } from '../constants';
 import { AdaptedEvent, Config } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
+import { ActionType } from '../../ActionType';
 export default class NativeViewGestureHandler extends GestureHandler {
   private buttonRole!: boolean;
 
@@ -16,8 +17,12 @@ export default class NativeViewGestureHandler extends GestureHandler {
   private startY = 0;
   private minDistSq = DEFAULT_TOUCH_SLOP * DEFAULT_TOUCH_SLOP;
 
-  public init(ref: number, propsRef: React.RefObject<unknown>): void {
-    super.init(ref, propsRef);
+  public init(
+    ref: number,
+    propsRef: React.RefObject<unknown>,
+    actionType: ActionType
+  ): void {
+    super.init(ref, propsRef, actionType);
 
     this.shouldCancelWhenOutside = true;
 

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

@@ -6,6 +6,7 @@ import GestureHandler from './GestureHandler';
 import ScaleGestureDetector, {
   ScaleGestureListener,
 } from '../detectors/ScaleGestureDetector';
+import { ActionType } from '../../ActionType';
 
 export default class PinchGestureHandler extends GestureHandler {
   private scale = 1;
@@ -48,8 +49,12 @@ export default class PinchGestureHandler extends GestureHandler {
     this.scaleDetectorListener
   );
 
-  public init(ref: number, propsRef: React.RefObject<unknown>) {
-    super.init(ref, propsRef);
+  public init(
+    ref: number,
+    propsRef: React.RefObject<unknown>,
+    actionType: ActionType
+  ) {
+    super.init(ref, propsRef, actionType);
 
     this.shouldCancelWhenOutside = false;
   }

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

@@ -5,6 +5,7 @@ import GestureHandler from './GestureHandler';
 import RotationGestureDetector, {
   RotationGestureListener,
 } from '../detectors/RotationGestureDetector';
+import { ActionType } from '../../ActionType';
 
 const ROTATION_RECOGNITION_THRESHOLD = Math.PI / 36;
 
@@ -44,8 +45,12 @@ export default class RotationGestureHandler extends GestureHandler {
   private rotationGestureDetector: RotationGestureDetector =
     new RotationGestureDetector(this.rotationGestureListener);
 
-  public init(ref: number, propsRef: React.RefObject<unknown>): void {
-    super.init(ref, propsRef);
+  public init(
+    ref: number,
+    propsRef: React.RefObject<unknown>,
+    actionType: ActionType
+  ): void {
+    super.init(ref, propsRef, actionType);
 
     this.shouldCancelWhenOutside = false;
   }

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

@@ -130,7 +130,9 @@ export interface ResultTouchEvent
 
 export interface PropsRef {
   onGestureHandlerEvent: () => void;
+  onGestureHandlerAnimatedEvent: () => void;
   onGestureHandlerStateChange: () => void;
+  onGestureHandlerTouchEvent: () => void;
 }
 
 export interface StylusData {

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

@@ -65,6 +65,12 @@ export class GestureHandlerWebDelegate
 
   detachHtml(): void {
     this.view = null as unknown as HTMLElement;
+    this.defaultViewStyles = {
+      userSelect: '',
+      touchAction: '',
+    };
+
+    this.eventManagers = [];
   }
 
   isPointerInBounds({ x, y }: { x: number; y: number }): boolean {