[simonhamp]

Stacked on #136 (pager tabs). The devnull app needs it for profiles (NativePHP/dev-null-app#11): a header with the avatar, bio and counts above Commits and Replies tabs that swipe.

What it does

<native:pager-header> goes inside a horizontal pager beside the pages. The header scrolls up with the page you're on, the tabs pin under the nav bar once it has gone, and the pages swipe sideways under the tabs while the header stays where it is. That's how profiles behave in most native apps.

<native:pager-overlay> hangs something under the tabs over the pages, like a "3 new posts" pill. It follows the tabs as the header scrolls.

<native:pager horizontal :tabs="['Posts', 'Replies']" :page="$page" on-page-change="showPage">
    <native:pager-header> ... </native:pager-header>
    <native:column> <native:list> ... </native:list> </native:column>
    <native:column> <native:list> ... </native:list> </native:column>
    <native:pager-overlay> ... </native:pager-overlay>
</native:pager>

How

I tried laying the header over the pages and insetting each list under it. Drags that start on the header then don't scroll anything, since the header isn't in a scroll view, so I dropped that.

Instead the pager hands the header to each page through the environment (a CompositionLocal on Android), and the page's list draws it as its first row, with the tabs as a pinned section header on iOS and a stickyHeader on Android. Scrolling, taps and pull to refresh all come from the list itself, and the refresh spinner shows above the header as it should.

While the pager swipes, each page's header and tabs are moved against the page by the pager's position, so they look still and the halves of the two pages' headers meet as one. On Android that happens in the draw phase. For that to look right, the pages either side must be level. The pager keeps every list at the same offset while any of the header shows. Once the header has gone, each list keeps its own place, and a list that isn't that far down yet is brought to where the tabs pin. A list too short to scroll the header away gets room at its end.

What to look at

• iOS sets the other lists' offsets on their UIScrollView, found from inside the header row. SwiftUI has no way to set a List's offset. Android uses LazyListState.requestScrollToItem.
• The header is drawn once per page, so a frame carries it once but each page renders it.
• Every page needs a list. A page without one shows no header.
• Inside a header, a list's list_section rows go into the one section under the tabs.
• The overlay's position comes from where the tabs actually are on screen, not from adding up heights. My first try added the list's top inset and put the pill a nav bar too low.

Verified

Pest (291 tests) and swiftc -parse pass locally. On the devnull app in an iPhone 17 Pro simulator (iOS 26.2): swipe both ways, tab taps, reselect back to the top, header part-scrolled then swiped (the other page is level), header scrolled away then swiped to a short tab, pull to refresh, the pill under the tabs, dark mode, own profile and someone else's. On Android (API 35 emulator) with a test screen: same swipe, pin, short tab, overlay and reselect checks, and Kotlin compiles.

Header at the top	Tabs pinned	Mid-swipe, header still

Short tab, level	Pill under the tabs	Pull to refresh

Android at the top	Android mid-swipe	Android pill

Recording on iOS: ios-profile-pager.mp4. The screenshots are on the orphan branch pager-header-screenshots, to delete after merge.

🤖 Generated with Claude Code