From 027bc9476aa9466100f42ebeecf5e433f5908346 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Sun, 11 Aug 2024 15:02:54 +0200 Subject: [PATCH 1/5] Add our implementation --- .../src/platformFunctions/findNodeHandle.ts | 3 +++ .../src/platformFunctions/findNodeHandle.web.ts | 7 +++++++ 2 files changed, 10 insertions(+) create mode 100644 packages/react-native-reanimated/src/platformFunctions/findNodeHandle.ts create mode 100644 packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts diff --git a/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.ts b/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.ts new file mode 100644 index 000000000000..736584212d9e --- /dev/null +++ b/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.ts @@ -0,0 +1,3 @@ +import { findNodeHandle } from 'react-native'; + +export { findNodeHandle }; diff --git a/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts b/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts new file mode 100644 index 000000000000..417d636e68f9 --- /dev/null +++ b/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts @@ -0,0 +1,7 @@ +import { Component, ComponentClass } from 'react'; + +export function findNodeHandle( + componentOrHandle: null | number | Component | ComponentClass +) { + return componentOrHandle; +} From d3fa1bbdf4723e28da9374428cfa40045ed65884 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Sun, 11 Aug 2024 15:04:15 +0200 Subject: [PATCH 2/5] Change imports --- .../src/component/LayoutAnimationConfig.tsx | 2 +- .../src/createAnimatedComponent/JSPropsUpdater.ts | 3 ++- .../src/createAnimatedComponent/NativeEventsManager.ts | 2 +- .../createAnimatedComponent/createAnimatedComponent.tsx | 7 +++---- .../react-native-reanimated/src/hook/useAnimatedRef.ts | 3 ++- 5 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/react-native-reanimated/src/component/LayoutAnimationConfig.tsx b/packages/react-native-reanimated/src/component/LayoutAnimationConfig.tsx index eedf4bad5cb3..9fb49c41bc2e 100644 --- a/packages/react-native-reanimated/src/component/LayoutAnimationConfig.tsx +++ b/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 | null>(null); diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/JSPropsUpdater.ts b/packages/react-native-reanimated/src/createAnimatedComponent/JSPropsUpdater.ts index fab7c1dd4781..59bc5a75a87a 100644 --- a/packages/react-native-reanimated/src/createAnimatedComponent/JSPropsUpdater.ts +++ b/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'; diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/NativeEventsManager.ts b/packages/react-native-reanimated/src/createAnimatedComponent/NativeEventsManager.ts index 35ce8a68a99b..da0bbb03b239 100644 --- a/packages/react-native-reanimated/src/createAnimatedComponent/NativeEventsManager.ts +++ b/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; diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx b/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx index 039f06eeb3c5..9a23094289af 100644 --- a/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx +++ b/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; diff --git a/packages/react-native-reanimated/src/hook/useAnimatedRef.ts b/packages/react-native-reanimated/src/hook/useAnimatedRef.ts index 61599c34261c..3451f91217bb 100644 --- a/packages/react-native-reanimated/src/hook/useAnimatedRef.ts +++ b/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'; From be39c8b93323fcc30949721044328b8514a1fd82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Sun, 11 Aug 2024 15:33:09 +0200 Subject: [PATCH 3/5] Import as type --- .../src/platformFunctions/findNodeHandle.web.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts b/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts index 417d636e68f9..433dfa4ebef3 100644 --- a/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts +++ b/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts @@ -1,4 +1,4 @@ -import { Component, ComponentClass } from 'react'; +import type { Component, ComponentClass } from 'react'; export function findNodeHandle( componentOrHandle: null | number | Component | ComponentClass From 75a75cb700129add702451be0b1960791de70cbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Sun, 11 Aug 2024 15:33:35 +0200 Subject: [PATCH 4/5] Remove assertion --- .../src/createAnimatedComponent/createAnimatedComponent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx b/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx index 9a23094289af..4e548278d26e 100644 --- a/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx +++ b/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx @@ -503,7 +503,7 @@ export function createAnimatedComponent( : getReduceMotionFromConfig(); if (!reduceMotionInExiting) { updateLayoutAnimations( - tag as number, + tag, LayoutAnimationType.EXITING, maybeBuild( exiting, @@ -517,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, From 494c6517968f7b3ced50ee297bf18638147e72bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Sun, 11 Aug 2024 15:54:29 +0200 Subject: [PATCH 5/5] Add use strict --- .../src/platformFunctions/findNodeHandle.ts | 1 + .../src/platformFunctions/findNodeHandle.web.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.ts b/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.ts index 736584212d9e..b4e540230095 100644 --- a/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.ts +++ b/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.ts @@ -1,3 +1,4 @@ +'use strict'; import { findNodeHandle } from 'react-native'; export { findNodeHandle }; diff --git a/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts b/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts index 433dfa4ebef3..d006db867245 100644 --- a/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts +++ b/packages/react-native-reanimated/src/platformFunctions/findNodeHandle.web.ts @@ -1,3 +1,4 @@ +'use strict'; import type { Component, ComponentClass } from 'react'; export function findNodeHandle(