Components
LargeTitleHeader
PARTIAL RENDER — on iOS this configures the *native* navigation bar through <Stack.Screen options={…}>, and that instruction is all it emits.
Storybook stubs expo-router (.storybook/mocks/expo-router.tsx), so Stack.Screen renders nothing and what you see below is the Material header the component draws itself. The iOS large-title bar is not reproducible here — check it on a simulator.
The back button only appears when navigation.canGoBack() is true; the stub
always says yes.
Import
import { LargeTitleHeader } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
title | — | "Section title" | Header title. On iOS it renders large and collapses to inline as the screen scrolls. |
materialPreset | stack · inline | "stack" | Android only. stack is the tall collapsing header, inline the compact one. |
backVisible | boolean | true | Shows the back affordance. It navigates through the router, not a callback. |
shadowVisible | boolean | false | Hairline under the header. |
searchBar | — | — | Adds a search affordance to the header. On iOS it expands in place rather than pushing a screen. |
rightView | — | — | Render function for the trailing slot — a function, not a node, so it can react to header state. |
Examples
Inline preset
With Search Bar
A search button appears whenever searchBar is configured.
<LargeTitleHeader
title="Section title"
searchBar={{ placeholder: 'Search…' }}
/>With Right View
<LargeTitleHeader
title="Section title"
rightView={() => (
<Button size="icon" variant="plain">
<Icon name="ellipsis" />
</Button>
)}
/>Hidden
shown: false removes it entirely — the screen keeps its own scroll area.
<View>
<LargeTitleHeader {...args} />
<Text color="tertiary">Header hidden — this text sits at the top.</Text>
</View>