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

3 files changed, 47 insertions, 6 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'