cherry-pick: Refactor findNodeHandler (#6736)

software-mansion · Dec 10, 2024 · 574ebb5 · 574ebb5
1 parent f612edd
commit 574ebb5
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 103 deletions.
diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/JSPropsUpdater.ts b/packages/react-native-reanimated/src/createAnimatedComponent/JSPropsUpdater.ts
@@ -1,6 +1,5 @@
 'use strict';
 import { NativeEventEmitter, Platform } from 'react-native';
-import { findNodeHandle } from '../platformFunctions/findNodeHandle';
 import type { NativeModule } from 'react-native';
 import { shouldBeUseWeb } from '../PlatformChecker';
 import type { StyleProps } from '../commonTypes';
@@ -39,7 +38,7 @@ class JSPropsUpdaterPaper implements IJSPropsUpdater {
     > &
       IAnimatedComponentInternal
   ) {
-    const viewTag = findNodeHandle(animatedComponent);
+    const viewTag = animatedComponent.getComponentViewTag();
     JSPropsUpdaterPaper._tagToComponentMapping.set(viewTag, animatedComponent);
     if (JSPropsUpdaterPaper._tagToComponentMapping.size === 1) {
       const listener = (data: ListenerData) => {
@@ -61,7 +60,7 @@ class JSPropsUpdaterPaper implements IJSPropsUpdater {
     > &
       IAnimatedComponentInternal
   ) {
-    const viewTag = findNodeHandle(animatedComponent);
+    const viewTag = animatedComponent.getComponentViewTag();
     JSPropsUpdaterPaper._tagToComponentMapping.delete(viewTag);
     if (JSPropsUpdaterPaper._tagToComponentMapping.size === 0) {
       this._reanimatedEventEmitter.removeAllListeners(
@@ -101,7 +100,7 @@ class JSPropsUpdaterFabric implements IJSPropsUpdater {
     if (!JSPropsUpdaterFabric.isInitialized) {
       return;
     }
-    const viewTag = findNodeHandle(animatedComponent);
+    const viewTag = animatedComponent.getComponentViewTag();
     JSPropsUpdaterFabric._tagToComponentMapping.set(viewTag, animatedComponent);
   }
 
@@ -114,7 +113,7 @@ class JSPropsUpdaterFabric implements IJSPropsUpdater {
     if (!JSPropsUpdaterFabric.isInitialized) {
       return;
     }
-    const viewTag = findNodeHandle(animatedComponent);
+    const viewTag = animatedComponent.getComponentViewTag();
     JSPropsUpdaterFabric._tagToComponentMapping.delete(viewTag);
   }
 }

diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/NativeEventsManager.ts b/packages/react-native-reanimated/src/createAnimatedComponent/NativeEventsManager.ts
@@ -39,7 +39,7 @@ export class NativeEventsManager implements INativeEventsManager {
   public updateEvents(
     prevProps: AnimatedComponentProps<InitialComponentProps>
   ) {
-    const computedEventTag = this.getEventViewTag();
+    const computedEventTag = this.getEventViewTag(true);
     // If the event view tag changes, we need to completely re-mount all events
     if (this.#eventViewTag !== computedEventTag) {
       // Remove all bindings from previous props that ran on the old viewTag
@@ -77,23 +77,54 @@ export class NativeEventsManager implements INativeEventsManager {
     });
   }
 
-  private getEventViewTag() {
+  private getEventViewTag(componentUpdate: boolean = false) {
     // Get the tag for registering events - since the event emitting view can be nested inside the main component
     const componentAnimatedRef = this.#managedComponent
-      ._component as AnimatedComponentRef;
-    let newTag: number;
+      ._componentRef as AnimatedComponentRef & {
+      // Fabric
+      __nativeTag?: number;
+      // Paper
+      _nativeTag?: number;
+    };
     if (componentAnimatedRef.getScrollableNode) {
+      /*
+        In most cases, getScrollableNode() returns a view tag, and findNodeHandle is not required. 
+        However, to cover more exotic list cases, we will continue to use findNodeHandle 
+        for consistency. For numerical values, findNodeHandle should return the value immediately, 
+        as documented here: https://github.com/facebook/react/blob/91061073d57783c061889ac6720ef1ab7f0c2149/packages/react-native-renderer/src/ReactNativePublicCompat.js#L113
+      */
       const scrollableNode = componentAnimatedRef.getScrollableNode();
-      newTag = findNodeHandle(scrollableNode) ?? -1;
-    } else {
-      newTag =
-        findNodeHandle(
-          this.#componentOptions?.setNativeProps
-            ? this.#managedComponent
-            : componentAnimatedRef
-        ) ?? -1;
+      if (typeof scrollableNode === 'number') {
+        return scrollableNode;
+      }
+      return findNodeHandle(scrollableNode) ?? -1;
+    }
+    if (this.#componentOptions?.setNativeProps) {
+      // This case ensures backward compatibility with components that
+      // have their own setNativeProps method passed as an option.
+      return findNodeHandle(this.#managedComponent) ?? -1;
+    }
+    if (!componentUpdate) {
+      // On the first render of a component, we may already receive a resolved view tag.
+      return this.#managedComponent.getComponentViewTag();
+    }
+    if (componentAnimatedRef.__nativeTag || componentAnimatedRef._nativeTag) {
+      /*
+        Fast path for native refs,
+        _nativeTag is used by Paper components,
+        __nativeTag is used by Fabric components.
+      */
+      return (
+        componentAnimatedRef.__nativeTag ??
+        componentAnimatedRef._nativeTag ??
+        -1
+      );
     }
-    return newTag;
+    /*
+      When a component is updated, a child could potentially change and have a different 
+      view tag. This can occur with a GestureDetector component.
+    */
+    return findNodeHandle(componentAnimatedRef) ?? -1;
   }
 }
 

diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/commonTypes.ts b/packages/react-native-reanimated/src/createAnimatedComponent/commonTypes.ts
@@ -100,15 +100,10 @@ export interface AnimatedComponentRef extends Component {
 export interface IAnimatedComponentInternal {
   _styles: StyleProps[] | null;
   _animatedProps?: Partial<AnimatedComponentProps<AnimatedProps>>;
-  /**
-   * Used for Shared Element Transitions, Layout Animations and Animated Styles.
-   * It is not related to event handling.
-   */
-  _componentViewTag: number;
   _isFirstRender: boolean;
   jestInlineStyle: NestedArray<StyleProps> | undefined;
   jestAnimatedStyle: { value: StyleProps };
-  _component: AnimatedComponentRef | HTMLElement | null;
+  _componentRef: AnimatedComponentRef | HTMLElement | null;
   _sharedElementTransition: SharedTransition | null;
   _jsPropsUpdater: IJSPropsUpdater;
   _InlinePropManager: IInlinePropManager;
@@ -117,6 +112,11 @@ export interface IAnimatedComponentInternal {
   _NativeEventsManager?: INativeEventsManager;
   _viewInfo?: ViewInfo;
   context: React.ContextType<typeof SkipEnteringContext>;
+  /**
+   * Used for Shared Element Transitions, Layout Animations and Animated Styles.
+   * It is not related to event handling.
+   */
+  getComponentViewTag: () => number;
 }
 
 export type NestedArray<T> = T | NestedArray<T>[];