From 2b1cbf376a154ca8547bd8979866a6aaf592866c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 10 Nov 2023 06:00:15 +0000
Subject: [PATCH] Add hacks to fix web

---
 src/view/com/pager/Pager.web.tsx       | 13 ++++++++++++-
 src/view/com/pager/PagerWithHeader.tsx | 12 +++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/view/com/pager/Pager.web.tsx b/src/view/com/pager/Pager.web.tsx
index 7ec2926670..3b5e9164a7 100644
--- a/src/view/com/pager/Pager.web.tsx
+++ b/src/view/com/pager/Pager.web.tsx
@@ -49,7 +49,18 @@ export const Pager = React.forwardRef(function PagerImpl(
           onSelect: onTabBarSelect,
         })}
       {React.Children.map(children, (child, i) => (
-        <View style={selectedPage === i ? s.flex1 : s.hidden} key={`page-${i}`}>
+        <View
+          style={
+            selectedPage === i
+              ? s.flex1
+              : {
+                  position: 'absolute',
+                  pointerEvents: 'none',
+                  // @ts-ignore web-only
+                  visibility: 'hidden',
+                }
+          }
+          key={`page-${i}`}>
           {child}
         </View>
       ))}
diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
index df06638030..2e84227c36 100644
--- a/src/view/com/pager/PagerWithHeader.tsx
+++ b/src/view/com/pager/PagerWithHeader.tsx
@@ -60,8 +60,8 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
     const [tabBarHeight, setTabBarHeight] = React.useState(0)
     const [headerOnlyHeight, setHeaderOnlyHeight] = React.useState(0)
     const [isScrolledDown, setIsScrolledDown] = React.useState(false)
-
     const headerHeight = headerOnlyHeight + tabBarHeight
+    const headerOnlyHeightShared = useSharedValue(0)
 
     // capture the header bar sizing
     const onTabBarLayout = React.useCallback(
@@ -73,8 +73,9 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
     const onHeaderOnlyLayout = React.useCallback(
       (evt: LayoutChangeEvent) => {
         setHeaderOnlyHeight(evt.nativeEvent.layout.height)
+        headerOnlyHeightShared.value = evt.nativeEvent.layout.height
       },
-      [setHeaderOnlyHeight],
+      [setHeaderOnlyHeight, headerOnlyHeightShared],
     )
 
     // render the the header and tab bar
@@ -131,7 +132,12 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
     // props to pass into children render functions
     const onScroll = useAnimatedScrollHandler({
       onScroll(e) {
-        clampedScrollY.value = Math.min(e.contentOffset.y, headerOnlyHeight)
+        // TODO: We should be able to use headerOnlyHeight directly here, but on the web
+        // there seems is a bug in Reanimated causing state inside this function to be stale.
+        clampedScrollY.value = Math.min(
+          e.contentOffset.y,
+          headerOnlyHeightShared.value,
+        )
       },
     })
     useAnimatedReaction(