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 <[e-mail]>

src/lib/hooks/useAnimatedScrollHandler_FIXED.ts

···
-// 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'

src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts

···
-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,
-  )
-}

src/view/com/composer/Composer.tsx

···
   runOnUI,
   scrollTo,
   useAnimatedRef,
+  useAnimatedScrollHandler,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
···
   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'

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx

···
   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,

src/view/com/util/List.tsx

···
 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'