From ab04074197f8432a3d502ca2393beca3b8f6ca97 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Mon, 11 Dec 2023 21:47:41 +0000
Subject: [PATCH] Fix scroll on native (#2170)

---
 .../hooks/useAnimatedScrollHandler_FIXED.ts   |  2 +-
 .../useAnimatedScrollHandler_FIXED.web.ts     | 81 +++++++++----------
 src/view/com/feeds/ProfileFeedgens.tsx        |  4 +-
 .../components/ImageItem/ImageItem.ios.tsx    |  4 +-
 src/view/com/lists/ProfileLists.tsx           |  4 +-
 src/view/com/notifications/Feed.tsx           |  4 +-
 src/view/com/posts/Feed.tsx                   |  4 +-
 src/view/screens/ProfileFeed.tsx              |  4 +-
 8 files changed, 53 insertions(+), 54 deletions(-)

diff --git a/src/lib/hooks/useAnimatedScrollHandler_FIXED.ts b/src/lib/hooks/useAnimatedScrollHandler_FIXED.ts
index 0ed4139f98..56a1e8b113 100644
--- a/src/lib/hooks/useAnimatedScrollHandler_FIXED.ts
+++ b/src/lib/hooks/useAnimatedScrollHandler_FIXED.ts
@@ -12,4 +12,4 @@
 // - https://github.com/software-mansion/react-native-reanimated/issues/5364
 //
 // It's great when it works though.
-export {useAnimatedScrollHandler as useAnimatedScrollHandler_FIXED} from 'react-native-reanimated'
+export {useAnimatedScrollHandler} from 'react-native-reanimated'
diff --git a/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts b/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts
index b94f49e428..98e05a8ce6 100644
--- a/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts
+++ b/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts
@@ -1,45 +1,44 @@
 import {useRef, useEffect} from 'react'
 import {useAnimatedScrollHandler as useAnimatedScrollHandler_BUGGY} from 'react-native-reanimated'
 
-export const useAnimatedScrollHandler_FIXED: 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)
-          }
-        },
+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)
+        }
       },
-      deps,
-    )
-  }
+      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/feeds/ProfileFeedgens.tsx b/src/view/com/feeds/ProfileFeedgens.tsx
index 156ab3649d..a499c82819 100644
--- a/src/view/com/feeds/ProfileFeedgens.tsx
+++ b/src/view/com/feeds/ProfileFeedgens.tsx
@@ -19,7 +19,7 @@ import {OnScrollHandler} from '#/lib/hooks/useOnMainScroll'
 import {logger} from '#/logger'
 import {Trans} from '@lingui/macro'
 import {cleanError} from '#/lib/strings/errors'
-import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
+import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {useTheme} from '#/lib/ThemeContext'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {hydrateFeedGenerator} from '#/state/queries/feed'
@@ -184,7 +184,7 @@ export const ProfileFeedgens = React.forwardRef<
     [error, refetch, onPressRetryLoadMore, pal, preferences],
   )
 
-  const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
+  const scrollHandler = useAnimatedScrollHandler(onScroll || {})
   return (
     <View testID={testID} style={style}>
       <FlatList
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 860e2edbde..99a9416639 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -17,7 +17,7 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated'
-import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
+import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 
 import useImageDimensions from '../../hooks/useImageDimensions'
@@ -61,7 +61,7 @@ const ImageItem = ({imageSrc, onTap, onZoom, onRequestClose}: Props) => {
     }
   })
 
-  const scrollHandler = useAnimatedScrollHandler_FIXED({
+  const scrollHandler = useAnimatedScrollHandler({
     onScroll(e) {
       const nextIsScaled = e.zoomScale > 1
       translationY.value = nextIsScaled ? 0 : e.contentOffset.y
diff --git a/src/view/com/lists/ProfileLists.tsx b/src/view/com/lists/ProfileLists.tsx
index 54fe86fd26..1bd9d188ff 100644
--- a/src/view/com/lists/ProfileLists.tsx
+++ b/src/view/com/lists/ProfileLists.tsx
@@ -20,7 +20,7 @@ import {OnScrollHandler} from '#/lib/hooks/useOnMainScroll'
 import {logger} from '#/logger'
 import {Trans} from '@lingui/macro'
 import {cleanError} from '#/lib/strings/errors'
-import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
+import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {useTheme} from '#/lib/ThemeContext'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {isNative} from '#/platform/detection'
@@ -187,7 +187,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
       [error, refetch, onPressRetryLoadMore, pal],
     )
 
-    const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
+    const scrollHandler = useAnimatedScrollHandler(onScroll || {})
     return (
       <View testID={testID} style={style}>
         <FlatList
diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx
index ca6d2f156d..260c9bbd58 100644
--- a/src/view/com/notifications/Feed.tsx
+++ b/src/view/com/notifications/Feed.tsx
@@ -7,7 +7,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
 import {EmptyState} from '../util/EmptyState'
 import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
-import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
+import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useNotificationFeedQuery} from '#/state/queries/notifications/feed'
@@ -135,7 +135,7 @@ export function Feed({
     [isFetchingNextPage],
   )
 
-  const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
+  const scrollHandler = useAnimatedScrollHandler(onScroll || {})
   return (
     <View style={s.hContentRegion}>
       {error && (
diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
index 76eec28104..c4f859e041 100644
--- a/src/view/com/posts/Feed.tsx
+++ b/src/view/com/posts/Feed.tsx
@@ -18,7 +18,7 @@ import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
 import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
+import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {useTheme} from 'lib/ThemeContext'
 import {logger} from '#/logger'
 import {
@@ -271,7 +271,7 @@ let Feed = ({
     )
   }, [isFetchingNextPage, shouldRenderEndOfFeed, renderEndOfFeed, headerOffset])
 
-  const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll || {})
+  const scrollHandler = useAnimatedScrollHandler(onScroll || {})
   return (
     <View testID={testID} style={style}>
       <FlatList
diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx
index 0e112130ef..620b1814af 100644
--- a/src/view/screens/ProfileFeed.tsx
+++ b/src/view/screens/ProfileFeed.tsx
@@ -46,7 +46,7 @@ import {logger} from '#/logger'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'
-import {useAnimatedScrollHandler_FIXED} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
+import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {
   useFeedSourceInfoQuery,
   FeedSourceFeedInfo,
@@ -572,7 +572,7 @@ function AboutSection({
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
-  const scrollHandler = useAnimatedScrollHandler_FIXED(onScroll)
+  const scrollHandler = useAnimatedScrollHandler(onScroll)
   const [likeUri, setLikeUri] = React.useState(feedInfo.likeUri)
   const {hasSession} = useSession()
   const {track} = useAnalytics()