diff --git a/src/reanimated2/hook/commonTypes.ts b/src/reanimated2/hook/commonTypes.ts index e294c9b10dbc..573573edd864 100644 --- a/src/reanimated2/hook/commonTypes.ts +++ b/src/reanimated2/hook/commonTypes.ts @@ -30,6 +30,7 @@ export interface AnimatedRef { | ShadowNodeWrapper // Fabric | HTMLElement; // web current: T | null; + getTag: () => number; } // Might make that type generic if it's ever needed. diff --git a/src/reanimated2/hook/useAnimatedRef.ts b/src/reanimated2/hook/useAnimatedRef.ts index 7bd87e523e34..61599c34261c 100644 --- a/src/reanimated2/hook/useAnimatedRef.ts +++ b/src/reanimated2/hook/useAnimatedRef.ts @@ -55,9 +55,20 @@ export function useAnimatedRef< const getTagValueFunction = isFabric() ? getShadowNodeWrapperFromRef : findNodeHandle; - tag.value = IS_WEB - ? getComponentOrScrollable(component) - : getTagValueFunction(getComponentOrScrollable(component)); + + const getTagOrShadowNodeWrapper = () => { + return IS_WEB + ? getComponentOrScrollable(component) + : getTagValueFunction(getComponentOrScrollable(component)); + }; + + tag.value = getTagOrShadowNodeWrapper(); + + // On Fabric we have to unwrap the tag from the shadow node wrapper + fun.getTag = isFabric() + ? () => findNodeHandle(getComponentOrScrollable(component)) + : getTagOrShadowNodeWrapper; + fun.current = component; // viewName is required only on iOS with Paper if (Platform.OS === 'ios' && !isFabric()) { diff --git a/src/reanimated2/hook/useScrollViewOffset.ts b/src/reanimated2/hook/useScrollViewOffset.ts index 70433cf026a6..d8bf6b25dc92 100644 --- a/src/reanimated2/hook/useScrollViewOffset.ts +++ b/src/reanimated2/hook/useScrollViewOffset.ts @@ -1,7 +1,6 @@ 'use strict'; import { useEffect, useRef, useCallback } from 'react'; import type { SharedValue } from '../commonTypes'; -import { findNodeHandle } from 'react-native'; import type { EventHandlerInternal } from './useEvent'; import { useEvent } from './useEvent'; import { useSharedValue } from './useSharedValue'; @@ -103,9 +102,8 @@ function useScrollViewOffsetNative( } scrollRef.current = animatedRef.current; - const component = animatedRef.current; - const viewTag = findNodeHandle(component); - eventHandler.workletEventHandler.registerForEvents(viewTag as number); + const viewTag = animatedRef.getTag(); + eventHandler.workletEventHandler.registerForEvents(viewTag); return () => { eventHandler.workletEventHandler.unregisterFromEvents(); };