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>
This commit is contained in:
Samuel Newman
2026-02-17 11:47:57 +02:00
parent 13b453e506
commit 8672740833
2 changed files with 17 additions and 2 deletions
+15 -2
View File
@@ -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
@@ -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