[Web] Add findNodeHandle web version

packages/react-native-reanimated/src/component/LayoutAnimationConfig.tsx

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import type { ReactNode } from 'react';
 import { setShouldAnimateExitingForTag } from '../core';
-import { findNodeHandle } from 'react-native';
+import { findNodeHandle } from '../platformFunctions/findNodeHandle';
 
 export const SkipEnteringContext =
   createContext<React.MutableRefObject<boolean> | null>(null);

packages/react-native-reanimated/src/createAnimatedComponent/JSPropsUpdater.ts

@@ -1,5 +1,6 @@
 'use strict';
-import { NativeEventEmitter, Platform, findNodeHandle } from 'react-native';
+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';

packages/react-native-reanimated/src/createAnimatedComponent/NativeEventsManager.ts

@@ -8,7 +8,7 @@ import type {
 } from './commonTypes';
 import { has } from './utils';
 import { WorkletEventHandler } from '../WorkletEventHandler';
-import { findNodeHandle } from 'react-native';
+import { findNodeHandle } from '../platformFunctions/findNodeHandle';
 
 export class NativeEventsManager implements INativeEventsManager {
   readonly #managedComponent: ManagedAnimatedComponent;

packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx

@@ -7,7 +7,8 @@ import type {
   MutableRefObject,
 } from 'react';
 import React from 'react';
-import { findNodeHandle, Platform } from 'react-native';
+import { Platform } from 'react-native';
+import { findNodeHandle } from '../platformFunctions/findNodeHandle';
 import '../layoutReanimation/animationsManager';
 import invariant from 'invariant';
 import { adaptViewConfig } from '../ConfigHelper';
@@ -478,9 +479,7 @@ export function createAnimatedComponent(
       setLocalRef: (ref) => {
         // TODO update config
 
-        const tag = IS_WEB
-          ? (ref as HTMLElement)
-          : findNodeHandle(ref as Component);
+        const tag = findNodeHandle(ref as Component);
 
         this._componentViewTag = tag as number;
 
@@ -504,7 +503,7 @@ export function createAnimatedComponent(
                 : getReduceMotionFromConfig();
             if (!reduceMotionInExiting) {
               updateLayoutAnimations(
-                tag as number,
+                tag,
                 LayoutAnimationType.EXITING,
                 maybeBuild(
                   exiting,
@@ -518,7 +517,7 @@ export function createAnimatedComponent(
           const skipEntering = this.context?.current;
           if (entering && !skipEntering && !IS_WEB) {
             updateLayoutAnimations(
-              tag as number,
+              tag,
               LayoutAnimationType.ENTERING,
               maybeBuild(
                 entering,

packages/react-native-reanimated/src/hook/useAnimatedRef.ts

@@ -7,7 +7,8 @@ import type { ShadowNodeWrapper } from '../commonTypes';
 import { getShadowNodeWrapperFromRef } from '../fabricUtils';
 import { makeShareableCloneRecursive } from '../shareables';
 import { shareableMappingCache } from '../shareableMappingCache';
-import { Platform, findNodeHandle } from 'react-native';
+import { Platform } from 'react-native';
+import { findNodeHandle } from '../platformFunctions/findNodeHandle';
 import type { ScrollView, FlatList } from 'react-native';
 import { isFabric, isWeb } from '../PlatformChecker';
 

packages/react-native-reanimated/src/platformFunctions/findNodeHandle.ts

@@ -0,0 +1,4 @@
+'use strict';
+import { findNodeHandle } from 'react-native';
+
+export { findNodeHandle };

packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts

@@ -0,0 +1,8 @@
+'use strict';
+import type { Component, ComponentClass } from 'react';
+
+export function findNodeHandle(
+  componentOrHandle: null | number | Component<any, any> | ComponentClass<any>
+) {
+  return componentOrHandle;
+}