Component
Page header
A nav bar paired with an oversized title beneath it, the large title fading into the compact bar title as the screen scrolls, the standard top-of-screen pattern.
Standalone
Account
Manage your details
page header.tsx
<NativePageHeader title="Account" subtitle="Manage your details" onBack={() => {}} />Example
Sits above a list of settings rows, its large title compressing into the bar as the list scrolls beneath it.
Settings
page-header-example.tsx
<NativePageHeader title="Settings" onBack={onBack} />
<SettingsList />Capabilities
| Prop | Type | Description |
|---|---|---|
| titlerequired | string | - |
| largeTitle | boolean | Large title displayed below the nav bar, collapses on scroll |
| largeTitleAccessory | ReactNode | With `largeTitle`, render this instead of oversized text (e.g. wordmark). `title` stays for the collapsed bar and screen readers. |
| subtitle | string | - |
| onBack | () => void | Left action (back button by default if onBack provided) |
| backLabel | string | - |
| rightAction | React.ReactNode | Right action slot |
| scrollRef | React.RefObject<HTMLElement | null> | Container ref to track scroll - if not provided, uses window scroll |
| className | string | - |