Make animated component's event tag properly update

src/createAnimatedComponent/NativeEventsManager.ts

@@ -0,0 +1,118 @@
+'use strict';
+import type {
+  INativeEventsManager,
+  IAnimatedComponentInternal,
+  AnimatedComponentProps,
+  InitialComponentProps,
+} from './commonTypes';
+import { has } from './utils';
+import { WorkletEventHandler } from '../reanimated2/WorkletEventHandler';
+import { isWeb } from '../reanimated2/PlatformChecker';
+
+const IS_WEB = isWeb();
+
+type ManagedAnimatedComponent = React.Component<
+  AnimatedComponentProps<InitialComponentProps>
+> &
+  IAnimatedComponentInternal;
+
+type WorkletEventHandlerProp = {
+  workletEventHandler: InstanceType<typeof WorkletEventHandler>;
+};
+
+function isWorkletEventHandler(prop: unknown): prop is WorkletEventHandlerProp {
+  return (
+    has('workletEventHandler', prop) &&
+    prop.workletEventHandler instanceof WorkletEventHandler
+  );
+}
+
+function executeForEachEventHandler(
+  props: AnimatedComponentProps<InitialComponentProps>,
+  callback: (
+    key: string,
+    handler: InstanceType<typeof WorkletEventHandler>
+  ) => void
+) {
+  for (const key in props) {
+    const prop = props[key];
+    if (isWorkletEventHandler(prop)) {
+      callback(key, prop.workletEventHandler);
+    }
+  }
+}
+
+export class NativeEventsManager implements INativeEventsManager {
+  _managedComponent: ManagedAnimatedComponent;
+
+  constructor(component: ManagedAnimatedComponent) {
+    this._managedComponent = component;
+  }
+
+  public attachNativeEvents(): void {
+    if (IS_WEB) {
+      return;
+    }
+    executeForEachEventHandler(this._managedComponent.props, (key, handler) => {
+      handler.registerForEvents(this._managedComponent._eventViewTag, key);
+    });
+  }
+
+  public detachNativeEvents(): void {
+    if (IS_WEB) {
+      return;
+    }
+    executeForEachEventHandler(
+      this._managedComponent.props,
+      (_key, handler) => {
+        handler.unregisterFromEvents(this._managedComponent._eventViewTag);
+      }
+    );
+  }
+
+  public updateNativeEvents(
+    prevProps: AnimatedComponentProps<InitialComponentProps>,
+    computedEventTag: number
+  ): void {
+    if (IS_WEB) {
+      return;
+    }
+    // If the event view tag changes, we need to completely re-mount all events
+    if (this._managedComponent._eventViewTag !== computedEventTag) {
+      // Remove all bindings from previous props that ran on the old viewTag
+      executeForEachEventHandler(prevProps, (_key, handler) => {
+        handler.unregisterFromEvents(this._managedComponent._eventViewTag);
+      });
+      // We don't need to unregister from current (new) props, because their events weren't registered yet
+      // Replace the view tag
+      this._managedComponent._eventViewTag = computedEventTag;
+      // Attach the events with a new viewTag
+      this.attachNativeEvents();
+      return;
+    }
+
+    executeForEachEventHandler(prevProps, (key, prevHandler) => {
+      const newProp = this._managedComponent.props[key];
+      if (!newProp) {
+        // Prop got deleted
+        prevHandler.unregisterFromEvents(this._managedComponent._eventViewTag);
+      } else if (
+        isWorkletEventHandler(newProp) &&
+        newProp.workletEventHandler !== prevHandler
+      ) {
+        // Prop got changed
+        prevHandler.unregisterFromEvents(this._managedComponent._eventViewTag);
+        newProp.workletEventHandler.registerForEvents(
+          this._managedComponent._eventViewTag
+        );
+      }
+    });
+
+    executeForEachEventHandler(this._managedComponent.props, (key, handler) => {
+      if (!prevProps[key]) {
+        // Prop got added
+        handler.registerForEvents(this._managedComponent._eventViewTag);
+      }
+    });
+  }
+}

src/createAnimatedComponent/commonTypes.ts

@@ -54,6 +54,15 @@ export interface IJSPropsUpdater {
   ): void;
 }
 
+export interface INativeEventsManager {
+  attachNativeEvents(): void;
+  detachNativeEvents(): void;
+  updateNativeEvents(
+    prevProps: AnimatedComponentProps<InitialComponentProps>,
+    computedEventTag: number
+  ): void;
+}
+
 export type LayoutAnimationStaticContext = {
   presetName: string;
 };
@@ -105,6 +114,7 @@ export interface IAnimatedComponentInternal {
   _jsPropsUpdater: IJSPropsUpdater;
   _InlinePropManager: IInlinePropManager;
   _PropsFilter: IPropsFilter;
+  _NativeEventsManager: INativeEventsManager;
   _viewInfo?: ViewInfo;
   context: React.ContextType<typeof SkipEnteringContext>;
 }

src/createAnimatedComponent/createAnimatedComponent.tsx

@@ -8,7 +8,6 @@ import type {
 } from 'react';
 import React from 'react';
 import { findNodeHandle, Platform } from 'react-native';
-import { WorkletEventHandler } from '../reanimated2/WorkletEventHandler';
 import '../reanimated2/layoutReanimation/animationsManager';
 import invariant from 'invariant';
 import { adaptViewConfig } from '../ConfigHelper';
@@ -33,8 +32,9 @@ import type {
   AnimatedComponentRef,
   IAnimatedComponentInternal,
   ViewInfo,
+  INativeEventsManager,
 } from './commonTypes';
-import { has, flattenArray } from './utils';
+import { flattenArray } from './utils';
 import setAndForwardRef from './setAndForwardRef';
 import {
   isFabric,
@@ -56,6 +56,7 @@ import type { CustomConfig } from '../reanimated2/layoutReanimation/web/config';
 import type { FlatList, FlatListProps } from 'react-native';
 import { addHTMLMutationObserver } from '../reanimated2/layoutReanimation/web/domUtils';
 import { getViewInfo } from './getViewInfo';
+import { NativeEventsManager } from './NativeEventsManager';
 
 const IS_WEB = isWeb();
 
@@ -131,6 +132,7 @@ export function createAnimatedComponent(
     _jsPropsUpdater = new JSPropsUpdater();
     _InlinePropManager = new InlinePropManager();
     _PropsFilter = new PropsFilter();
+    _NativeEventsManager: INativeEventsManager;
     _viewInfo?: ViewInfo;
     static displayName: string;
     static contextType = SkipEnteringContext;
@@ -141,12 +143,13 @@ export function createAnimatedComponent(
       if (isJest()) {
         this.jestAnimatedStyle = { value: {} };
       }
+      this._NativeEventsManager = new NativeEventsManager(this);
     }
 
     componentDidMount() {
-      this._setComponentViewTag();
-      this._setEventViewTag();
-      this._attachNativeEvents();
+      this._componentViewTag = this._getComponentViewTag();
+      this._eventViewTag = this._getEventViewTag();
+      this._NativeEventsManager.attachNativeEvents();
       this._jsPropsUpdater.addOnJSPropsChangeListener(this);
       this._attachAnimatedStyles();
       this._InlinePropManager.attachInlineProps(this, this._getViewInfo());
@@ -180,7 +183,7 @@ export function createAnimatedComponent(
     }
 
     componentWillUnmount() {
-      this._detachNativeEvents();
+      this._NativeEventsManager.detachNativeEvents();
       this._jsPropsUpdater.removeOnJSPropsChangeListener(this);
       this._detachStyles();
       this._InlinePropManager.detachInlineProps();
@@ -226,46 +229,24 @@ export function createAnimatedComponent(
       }
     }
 
-    _setComponentViewTag() {
-      this._componentViewTag = this._getViewInfo().viewTag as number;
+    _getComponentViewTag() {
+      return this._getViewInfo().viewTag as number;
     }
 
-    _setEventViewTag() {
-      // Setting the tag for registering events - since the event emitting view can be nested inside the main component
+    _getEventViewTag() {
+      // Get the tag for registering events - since the event emitting view can be nested inside the main component
       const componentAnimatedRef = this._component as AnimatedComponentRef;
+      let newTag: number;
       if (componentAnimatedRef.getScrollableNode) {
         const scrollableNode = componentAnimatedRef.getScrollableNode();
-        this._eventViewTag = findNodeHandle(scrollableNode) ?? -1;
+        newTag = findNodeHandle(scrollableNode) ?? -1;
       } else {
-        this._eventViewTag =
+        newTag =
           findNodeHandle(
             options?.setNativeProps ? this : componentAnimatedRef
           ) ?? -1;
       }
-    }
-
-    _attachNativeEvents() {
-      for (const key in this.props) {
-        const prop = this.props[key];
-        if (
-          has('workletEventHandler', prop) &&
-          prop.workletEventHandler instanceof WorkletEventHandler
-        ) {
-          prop.workletEventHandler.registerForEvents(this._eventViewTag, key);
-        }
-      }
-    }
-
-    _detachNativeEvents() {
-      for (const key in this.props) {
-        const prop = this.props[key];
-        if (
-          has('workletEventHandler', prop) &&
-          prop.workletEventHandler instanceof WorkletEventHandler
-        ) {
-          prop.workletEventHandler.unregisterFromEvents(this._eventViewTag);
-        }
-      }
+      return newTag;
     }
 
     _detachStyles() {
@@ -288,48 +269,6 @@ export function createAnimatedComponent(
       }
     }
 
-    _updateNativeEvents(
-      prevProps: AnimatedComponentProps<InitialComponentProps>
-    ) {
-      for (const key in prevProps) {
-        const prevProp = prevProps[key];
-        if (
-          has('workletEventHandler', prevProp) &&
-          prevProp.workletEventHandler instanceof WorkletEventHandler
-        ) {
-          const newProp = this.props[key];
-          if (!newProp) {
-            // Prop got deleted
-            prevProp.workletEventHandler.unregisterFromEvents(
-              this._eventViewTag
-            );
-          } else if (
-            has('workletEventHandler', newProp) &&
-            newProp.workletEventHandler instanceof WorkletEventHandler &&
-            newProp.workletEventHandler !== prevProp.workletEventHandler
-          ) {
-            // Prop got changed
-            prevProp.workletEventHandler.unregisterFromEvents(
-              this._eventViewTag
-            );
-            newProp.workletEventHandler.registerForEvents(this._eventViewTag);
-          }
-        }
-      }
-
-      for (const key in this.props) {
-        const newProp = this.props[key];
-        if (
-          has('workletEventHandler', newProp) &&
-          newProp.workletEventHandler instanceof WorkletEventHandler &&
-          !prevProps[key]
-        ) {
-          // Prop got added
-          newProp.workletEventHandler.registerForEvents(this._eventViewTag);
-        }
-      }
-    }
-
     _updateFromNative(props: StyleProps) {
       if (options?.setNativeProps) {
         options.setNativeProps(this._component as AnimatedComponentRef, props);
@@ -477,7 +416,10 @@ export function createAnimatedComponent(
       ) {
         this._configureSharedTransition();
       }
-      this._updateNativeEvents(prevProps);
+      this._NativeEventsManager.updateNativeEvents(
+        prevProps,
+        this._getEventViewTag()
+      );
       this._attachAnimatedStyles();
       this._InlinePropManager.attachInlineProps(this, this._getViewInfo());