From 133bc2921ed9beaafa111afca2404722201f037f Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 23 Sep 2025 04:12:53 -0500
Subject: [PATCH] Fix incorrect usage of `useAnimatedScrollHandler` (#9063)

* Explicitly declare worklets for useAnimatedScrollHandler_FIXED.web.ts

* Delete unused web hook

* delete other platform split file, import directly

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 .../hooks/useAnimatedScrollHandler_FIXED.ts   | 15 -------
 .../useAnimatedScrollHandler_FIXED.web.ts     | 44 -------------------
 src/view/com/composer/Composer.tsx            |  2 +-
 .../components/ImageItem/ImageItem.ios.tsx    |  2 +-
 src/view/com/util/List.tsx                    |  2 +-
 5 files changed, 3 insertions(+), 62 deletions(-)
 delete mode 100644 src/lib/hooks/useAnimatedScrollHandler_FIXED.ts
 delete mode 100644 src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts

diff --git a/src/lib/hooks/useAnimatedScrollHandler_FIXED.ts b/src/lib/hooks/useAnimatedScrollHandler_FIXED.ts
deleted file mode 100644
index 56a1e8b113..0000000000
--- a/src/lib/hooks/useAnimatedScrollHandler_FIXED.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Be warned. This Hook is very buggy unless used in a very constrained way.
-// To use it safely:
-//
-// - DO NOT pass its return value as a prop to any user-defined component.
-// - DO NOT pass its return value to more than a single component.
-//
-// In other words, the only safe way to use it is next to the leaf Reanimated View.
-//
-// Relevant bug reports:
-// - https://github.com/software-mansion/react-native-reanimated/issues/5345
-// - https://github.com/software-mansion/react-native-reanimated/issues/5360
-// - https://github.com/software-mansion/react-native-reanimated/issues/5364
-//
-// It's great when it works though.
-export {useAnimatedScrollHandler} from 'react-native-reanimated'
diff --git a/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts b/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts
deleted file mode 100644
index 7f8a99506a..0000000000
--- a/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {useEffect, useRef} from 'react'
-import {useAnimatedScrollHandler as useAnimatedScrollHandler_BUGGY} from 'react-native-reanimated'
-
-export const useAnimatedScrollHandler: typeof useAnimatedScrollHandler_BUGGY = (
-  config,
-  deps,
-) => {
-  const ref = useRef(config)
-  useEffect(() => {
-    ref.current = config
-  })
-  return useAnimatedScrollHandler_BUGGY(
-    {
-      onBeginDrag(e, ctx) {
-        if (typeof ref.current !== 'function' && ref.current.onBeginDrag) {
-          ref.current.onBeginDrag(e, ctx)
-        }
-      },
-      onEndDrag(e, ctx) {
-        if (typeof ref.current !== 'function' && ref.current.onEndDrag) {
-          ref.current.onEndDrag(e, ctx)
-        }
-      },
-      onMomentumBegin(e, ctx) {
-        if (typeof ref.current !== 'function' && ref.current.onMomentumBegin) {
-          ref.current.onMomentumBegin(e, ctx)
-        }
-      },
-      onMomentumEnd(e, ctx) {
-        if (typeof ref.current !== 'function' && ref.current.onMomentumEnd) {
-          ref.current.onMomentumEnd(e, ctx)
-        }
-      },
-      onScroll(e, ctx) {
-        if (typeof ref.current === 'function') {
-          ref.current(e, ctx)
-        } else if (ref.current.onScroll) {
-          ref.current.onScroll(e, ctx)
-        }
-      },
-    },
-    deps,
-  )
-}
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 2a9635402f..a4e0bd06fb 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -32,6 +32,7 @@ import Animated, {
   runOnUI,
   scrollTo,
   useAnimatedRef,
+  useAnimatedScrollHandler,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -65,7 +66,6 @@ import {
   SUPPORTED_MIME_TYPES,
   type SupportedMimeTypes,
 } from '#/lib/constants'
-import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {useAppState} from '#/lib/hooks/useAppState'
 import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
index c8bf1fcced..7379704283 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -19,13 +19,13 @@ import Animated, {
   useAnimatedProps,
   useAnimatedReaction,
   useAnimatedRef,
+  useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated'
 import {useSafeAreaFrame} from 'react-native-safe-area-context'
 import {Image} from 'expo-image'
 
-import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {
   type Dimensions as ImageDimensions,
   type ImageSource,
diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx
index b4b05a00b2..9b35846076 100644
--- a/src/view/com/util/List.tsx
+++ b/src/view/com/util/List.tsx
@@ -3,11 +3,11 @@ import {RefreshControl, type ViewToken} from 'react-native'
 import {
   type FlatListPropsWithLayout,
   runOnJS,
+  useAnimatedScrollHandler,
   useSharedValue,
 } from 'react-native-reanimated'
 import {updateActiveVideoViewAsync} from '@haileyok/bluesky-video'
 
-import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {useDedupe} from '#/lib/hooks/useDedupe'
 import {useScrollHandlers} from '#/lib/ScrollContext'
 import {addStyle} from '#/lib/styles'