From a09f7e4ffbf17cbd7ac5a4cc972bab2ff7c9b8c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= <tomasz.zelawski@swmansion.com>
Date: Thu, 14 Mar 2024 17:14:24 +0100
Subject: [PATCH 1/2] init

---
 src/reanimated2/hook/commonTypes.ts         | 1 +
 src/reanimated2/hook/useAnimatedRef.ts      | 9 ++++++---
 src/reanimated2/hook/useScrollViewOffset.ts | 9 ++-------
 3 files changed, 9 insertions(+), 10 deletions(-)

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<T extends Component> {
     | 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 fdbb11fad405..72d50a557d7a 100644
--- a/src/reanimated2/hook/useAnimatedRef.ts
+++ b/src/reanimated2/hook/useAnimatedRef.ts
@@ -57,9 +57,12 @@ export function useAnimatedRef<
     ) => {
       // enters when ref is set by attaching to a component
       if (component) {
-        tag.value = IS_WEB
-          ? getComponentOrScrollable(component)
-          : getTagValueFunction(getComponentOrScrollable(component));
+        fun.getTag = () => {
+          return IS_WEB
+            ? getComponentOrScrollable(component)
+            : getTagValueFunction(getComponentOrScrollable(component));
+        };
+        tag.value = fun.getTag();
         fun.current = component;
         // viewName is required only on iOS with Paper
         if (Platform.OS === 'ios' && !IS_FABRIC) {
diff --git a/src/reanimated2/hook/useScrollViewOffset.ts b/src/reanimated2/hook/useScrollViewOffset.ts
index 879c0d99af10..c8d978b4c734 100644
--- a/src/reanimated2/hook/useScrollViewOffset.ts
+++ b/src/reanimated2/hook/useScrollViewOffset.ts
@@ -1,7 +1,6 @@
 'use strict';
 import { useEffect, useRef } 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';
@@ -11,9 +10,6 @@ import type {
   RNNativeScrollEvent,
   ReanimatedScrollEvent,
 } from './commonTypes';
-import { isWeb } from '../PlatformChecker';
-
-const IS_WEB = isWeb();
 
 const scrollEventNames = [
   'onScroll',
@@ -53,10 +49,9 @@ export function useScrollViewOffset(
   ) as unknown as EventHandlerInternal<ReanimatedScrollEvent>;
 
   useEffect(() => {
-    const component = animatedRef.current;
-    const viewTag = IS_WEB ? component : findNodeHandle(component);
+    const viewTag = animatedRef.getTag();
 
-    eventHandler.workletEventHandler.registerForEvents(viewTag as number);
+    eventHandler.workletEventHandler.registerForEvents(viewTag);
 
     return () => {
       eventHandler.workletEventHandler?.unregisterFromEvents();

From 2c8b4a12651a16279fa58940a0871c2a1da1500d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= <tomasz.zelawski@swmansion.com>
Date: Wed, 3 Apr 2024 14:06:48 +0200
Subject: [PATCH 2/2] fix Fabric

---
 src/reanimated2/hook/useAnimatedRef.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/reanimated2/hook/useAnimatedRef.ts b/src/reanimated2/hook/useAnimatedRef.ts
index 6016a9756a75..61599c34261c 100644
--- a/src/reanimated2/hook/useAnimatedRef.ts
+++ b/src/reanimated2/hook/useAnimatedRef.ts
@@ -56,12 +56,19 @@ export function useAnimatedRef<
           ? getShadowNodeWrapperFromRef
           : findNodeHandle;
 
-        fun.getTag = () => {
+        const getTagOrShadowNodeWrapper = () => {
           return IS_WEB
             ? getComponentOrScrollable(component)
             : getTagValueFunction(getComponentOrScrollable(component));
         };
-        tag.value = fun.getTag();
+
+        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()) {