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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user