From 86727408333c4eb2553798d68cd9c7f3ba4790a1 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 17 Feb 2026 11:47:57 +0200
Subject: [PATCH] Hoist minimumHeaderHeight and expose collapsedHeaderHeight in
 PagerWithHeader

Move minimumHeaderHeight state from PagerTabBar up to PagerWithHeader so it
can be shared with child tabs. Compute collapsedHeaderHeight as
minimumHeaderHeight + tabBarHeight and pass it through PagerWithHeaderChildParams
alongside headerHeight. This gives each tab access to the collapsed header
offset for scroll indicator positioning.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/view/com/pager/PagerWithHeader.tsx     | 17 +++++++++++++++--
 src/view/com/pager/PagerWithHeader.web.tsx |  2 ++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
index 61a30de4a5..ed363651ac 100644
--- a/src/view/com/pager/PagerWithHeader.tsx
+++ b/src/view/com/pager/PagerWithHeader.tsx
@@ -30,8 +30,9 @@ import {TabBar} from './TabBar'
 
 export interface PagerWithHeaderChildParams {
   headerHeight: number
+  collapsedHeaderHeight: number
   isFocused: boolean
-  scrollElRef: React.MutableRefObject<ListMethods | ScrollView | null>
+  scrollElRef: React.RefObject<ListMethods | ScrollView | null>
 }
 
 export interface PagerWithHeaderProps {
@@ -67,6 +68,7 @@ export function PagerWithHeader({
   const [currentPage, setCurrentPage] = useState(0)
   const [tabBarHeight, setTabBarHeight] = useState(0)
   const [headerOnlyHeight, setHeaderOnlyHeight] = useState(0)
+  const [minimumHeaderHeight, setMinimumHeaderHeight] = useState(0)
   const scrollY = useSharedValue(0)
   const headerHeight = headerOnlyHeight + tabBarHeight
 
@@ -91,6 +93,8 @@ export function PagerWithHeader({
         <PagerHeaderProvider scrollY={scrollY} headerHeight={headerOnlyHeight}>
           <PagerTabBar
             headerOnlyHeight={headerOnlyHeight}
+            minimumHeaderHeight={minimumHeaderHeight}
+            setMinimumHeaderHeight={setMinimumHeaderHeight}
             items={items}
             isHeaderReady={isHeaderReady}
             renderHeader={renderHeader}
@@ -110,6 +114,8 @@ export function PagerWithHeader({
     },
     [
       headerOnlyHeight,
+      minimumHeaderHeight,
+      setMinimumHeaderHeight,
       items,
       isHeaderReady,
       renderHeader,
@@ -202,6 +208,7 @@ export function PagerWithHeader({
             <View key={i} collapsable={false}>
               <PagerItem
                 headerHeight={headerHeight}
+                collapsedHeaderHeight={minimumHeaderHeight + tabBarHeight}
                 index={i}
                 isReady={isReady}
                 isFocused={i === currentPage}
@@ -219,6 +226,8 @@ export function PagerWithHeader({
 let PagerTabBar = ({
   currentPage,
   headerOnlyHeight,
+  minimumHeaderHeight,
+  setMinimumHeaderHeight,
   isHeaderReady,
   items,
   scrollY,
@@ -234,6 +243,8 @@ let PagerTabBar = ({
 }: {
   currentPage: number
   headerOnlyHeight: number
+  minimumHeaderHeight: number
+  setMinimumHeaderHeight: (height: number) => void
   isHeaderReady: boolean
   items: string[]
   testID?: string
@@ -252,7 +263,6 @@ let PagerTabBar = ({
   dragState: SharedValue<'idle' | 'dragging' | 'settling'>
 }): React.ReactNode => {
   const t = useTheme()
-  const [minimumHeaderHeight, setMinimumHeaderHeight] = useState(0)
   const headerTransform = useAnimatedStyle(() => {
     const translateY =
       Math.min(
@@ -344,6 +354,7 @@ PagerTabBar = memo(PagerTabBar)
 
 function PagerItem({
   headerHeight,
+  collapsedHeaderHeight,
   index,
   isReady,
   isFocused,
@@ -352,6 +363,7 @@ function PagerItem({
   registerRef,
 }: {
   headerHeight: number
+  collapsedHeaderHeight: number
   index: number
   isFocused: boolean
   isReady: boolean
@@ -376,6 +388,7 @@ function PagerItem({
     <ScrollProvider onScroll={onScrollWorklet}>
       {renderTab({
         headerHeight,
+        collapsedHeaderHeight,
         isFocused,
         scrollElRef: scrollElRef as React.MutableRefObject<
           ListMethods | ScrollView | null
diff --git a/src/view/com/pager/PagerWithHeader.web.tsx b/src/view/com/pager/PagerWithHeader.web.tsx
index 7fed2c3c7f..4d5f55f259 100644
--- a/src/view/com/pager/PagerWithHeader.web.tsx
+++ b/src/view/com/pager/PagerWithHeader.web.tsx
@@ -15,6 +15,7 @@ import {TabBar} from './TabBar'
 
 export interface PagerWithHeaderChildParams {
   headerHeight: number
+  collapsedHeaderHeight: number
   isFocused: boolean
   scrollElRef: React.MutableRefObject<ListMethods | ScrollView | null>
 }
@@ -177,6 +178,7 @@ function PagerItem({
   }
   return renderTab({
     headerHeight: 0,
+    collapsedHeaderHeight: 0,
     isFocused,
     scrollElRef: scrollElRef as React.MutableRefObject<
       ListMethods | ScrollView | null