Work around web stale closure bug in Reanimated (#1865)

4 files changed, 48 insertions, 7 deletions

diff --git a/src/lib/hooks/useAnimatedScrollHandler_FIXED.ts b/src/lib/hooks/useAnimatedScrollHandler_FIXED.ts
new file mode 100644
index 000000000..eccfabbb0
--- /dev/null
+++ b/src/lib/hooks/useAnimatedScrollHandler_FIXED.ts
@@ -0,0 +1 @@
+export {useAnimatedScrollHandler} from 'react-native-reanimated'
diff --git a/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts b/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts
new file mode 100644
index 000000000..131e7bdd7
--- /dev/null
+++ b/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts
@@ -0,0 +1,44 @@
+import {useRef, useEffect} 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) {
+        if (typeof ref.current !== 'function' && ref.current.onBeginDrag) {
+          ref.current.onBeginDrag(e)
+        }
+      },
+      onEndDrag(e) {
+        if (typeof ref.current !== 'function' && ref.current.onEndDrag) {
+          ref.current.onEndDrag(e)
+        }
+      },
+      onMomentumBegin(e) {
+        if (typeof ref.current !== 'function' && ref.current.onMomentumBegin) {
+          ref.current.onMomentumBegin(e)
+        }
+      },
+      onMomentumEnd(e) {
+        if (typeof ref.current !== 'function' && ref.current.onMomentumEnd) {
+          ref.current.onMomentumEnd(e)
+        }
+      },
+      onScroll(e) {
+        if (typeof ref.current === 'function') {
+          ref.current(e)
+        } else if (ref.current.onScroll) {
+          ref.current.onScroll(e)
+        }
+      },
+    },
+    deps,
+  )
+}
diff --git a/src/lib/hooks/useOnMainScroll.ts b/src/lib/hooks/useOnMainScroll.ts
index cc07329ea..4cad34f40 100644
--- a/src/lib/hooks/useOnMainScroll.ts
+++ b/src/lib/hooks/useOnMainScroll.ts
@@ -4,12 +4,8 @@ import {useSetMinimalShellMode, useMinimalShellMode} from '#/state/shell'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {s} from 'lib/styles'
 import {isWeb} from 'platform/detection'
-import {
-  useAnimatedScrollHandler,
-  useSharedValue,
-  interpolate,
-  runOnJS,
-} from 'react-native-reanimated'
+import {useSharedValue, interpolate, runOnJS} from 'react-native-reanimated'
+import {useAnimatedScrollHandler} from './useAnimatedScrollHandler_FIXED'
 
 function clamp(num: number, min: number, max: number) {
   'worklet'
diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
index 86139fb63..f3ea4a1d1 100644
--- a/src/view/com/pager/PagerWithHeader.tsx
+++ b/src/view/com/pager/PagerWithHeader.tsx
@@ -3,7 +3,6 @@ import {LayoutChangeEvent, StyleSheet, View} from 'react-native'
 import Animated, {
   Easing,
   useAnimatedReaction,
-  useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -13,6 +12,7 @@ import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {TabBar} from './TabBar'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
+import {useAnimatedScrollHandler} from 'lib/hooks/useAnimatedScrollHandler_FIXED'
 
 const SCROLLED_DOWN_LIMIT = 200