AppBar
Mobile top bar with leading, title, actions and large-title search layouts.
Installation
npx axiom add app-barpnpm dlx axiom add app-baryarn dlx axiom add app-barbun x axiom add app-barAlso copies: search-bar, title and their dependencies. Installs react-native-reanimated and react-native-safe-area-context.
Colors come from appBar.default in the component tokens. The controls in the slots are yours: pass IconButton, Button or anything else.
Usage
import { AppBar } from "@/components/ui/app-bar";
<AppBar>
<AppBar.Leading>
<IconButton
icon="chevron-left"
accessibilityLabel="Back"
onPress={goBack}
/>
</AppBar.Leading>
<AppBar.Title>Inbox</AppBar.Title>
<AppBar.Actions>
<IconButton
icon="search"
accessibilityLabel="Search"
onPress={openSearch}
/>
</AppBar.Actions>
</AppBar>;Props
AppBar
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The Leading, Title, Actions and optional Search slots. |
variant | 'compact' | 'large' | 'compact' | Uses a centered 17pt title or a 34pt title on a second row. Use large at the root of a section. |
bordered | boolean | false | Draws a hairline under the bar. Useful when content can scroll behind it. |
safeArea | boolean | true | Adds the top safe-area inset. Set it to false when Scaffold already owns that inset. |
collapseProgress | number | SharedValue<number> | 0 | From 0 to 1: the large title fades and folds away first, the compact title takes its place, then the search field folds in turn. At 1 only the compact bar is left. A plain number or a shared value driven by a scroll handler. |
elevationProgress | number | SharedValue<number> | — | From 0 to 1: fades in the background and the hairline. Overrides bordered. See Scroll-aware AppBar. |
titleProgress | number | SharedValue<number> | 1 | From 0 to 1: fades in the compact title, when the page shows its own title first. |
backgroundColor | ColorValue | background token | Overrides the bar background without changing the screen background. |
style | StyleProp<ViewStyle> | — | Extra styles for the bar container. |
AppBar.Leading, AppBar.Actions
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | One leading control, or up to two trailing controls. Icon-only controls need an accessibility label. |
style | StyleProp<ViewStyle> | — | Extra styles for the slot container. |
The two side slots keep equal minimum widths. That leaves the compact title visually centered even when one side contains more controls.
AppBar.Title
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Screen title. Plain text gets the correct compact or large text style automatically. |
numberOfLines | number | 1 | Maximum lines before truncation. Keep compact titles on one line. |
accessibilityRole | 'header' | 'header' | Announces the title as a heading. |
AppBar.Search
The slots can be written in any order: AppBar puts Leading, Title and Actions in the bar row, and the large title and Search under it.
| Prop | Type | Default | Description |
|---|---|---|---|
collapsible | boolean | true | Folds the field away as collapseProgress passes 0.6. false pins it under the bar at every progress. |
...SearchBarProps | — | — | Every SearchBar prop, including value, onChangeText and onCancel. |
Use cases
Back navigation with actions
Keep the leading control predictable and put screen-specific actions on the right. Two trailing icons are the practical limit before the title gets cramped.
<AppBar bordered>
<AppBar.Leading>
<IconButton
icon="chevron-left"
accessibilityLabel="Back"
onPress={goBack}
/>
</AppBar.Leading>
<AppBar.Title>Order #1842</AppBar.Title>
<AppBar.Actions>
<IconButton
icon="share"
accessibilityLabel="Share order"
onPress={share}
/>
<IconButton
icon="more"
accessibilityLabel="More actions"
onPress={openMenu}
/>
</AppBar.Actions>
</AppBar>Large title with search
Use a large title for the first screen in a section. The search field sits below it and can collapse once the list starts moving.
<AppBar variant="large" collapseProgress={scrollProgress}>
<AppBar.Title>Messages</AppBar.Title>
<AppBar.Actions>
<IconButton icon="edit" accessibilityLabel="New message" />
</AppBar.Actions>
<AppBar.Search value={query} onChangeText={setQuery} placeholder="Search" />
</AppBar>Selection mode
Replace navigation controls with the selection count and actions. Do not stack a second bar over the normal one.
<AppBar bordered>
<AppBar.Leading>
<Button variant="ghost" size="sm" onPress={clearSelection}>
Cancel
</Button>
</AppBar.Leading>
<AppBar.Title>{selected.length} selected</AppBar.Title>
<AppBar.Actions>
<IconButton icon="share" accessibilityLabel="Share selected items" />
<IconButton icon="trash" accessibilityLabel="Delete selected items" />
</AppBar.Actions>
</AppBar>Scroll behavior
Drive collapseProgress with the scroll position instead of putting scroll logic inside the bar. See Collapsible header for collapseProgress and Scroll-aware AppBar for elevationProgress and titleProgress.