Search App Bar

running shoes

Trail running shoes$129 · 4 colors

Running socks, 3 pack$18

Running belt$24

running shoes womenRecent search

The field takes the place of the title, between the back button and the actions. The filters button carries a counter of active filters.

Installation

npx axiom add search-app-bar

pnpm dlx axiom add search-app-bar

yarn dlx axiom add search-app-bar

bun x axiom add search-app-bar

Also copies: app-bar, search-bar, icon-button, text, tappable and their dependencies. Installs react-native-reanimated, for the Cancel slide. The file lands in components/compositions/search-app-bar.tsx. It brings no tokens of its own: colors come from AppBar and SearchBar.

Requires the arrow-left and close icons in your icon registry.

Usage

A search screen opened from a search button: the field has the focus as soon as the screen appears.

import { SearchAppBar } from "@/components/compositions/search-app-bar";

const [query, setQuery] = useState("");

<SearchAppBar
	value={query}
	onChangeText={setQuery}
	onSubmit={runSearch}
	placeholder="Search products"
	autoFocus
	loading={isFetching}
	onNavigate={router.back}
>
	<IconButton
		icon="filter"
		badge={activeFilters.length}
		accessibilityLabel="Filters"
		onPress={openFilters}
	/>
</SearchAppBar>;

Opened as a modal, pass navigation="close". With Scaffold, which already pads the status bar, pass safeArea={false}.

The actions are the bar’s children: write the buttons you need after the field, as many as fit. Every SearchBar prop goes through to the field. To lay the field out yourself, put a SearchBar in AppBar.Center.

With Cancel

On iOS, a search that’s part of the screen often ends with a Cancel button. Pass onCancel: the button slides in while the field is focused, from its measured width so the field shrinks smoothly, and stays still with Reduce Motion. A press blurs the field, then calls onCancel, where you clear the query or leave the screen.

<SearchAppBar
	value={query}
	onChangeText={setQuery}
	placeholder="Search messages"
	onCancel={() => setQuery("")}
/>

Props

Prop	Type	Default	Description
`navigation`	`'back' \| 'close'`	`'back'`	An arrow, or a cross for a search opened as a modal.
`onNavigate`	`() => void`	—	Shows the navigation button.
`navigationLabel`	`string`	`"Back"` or `"Close"`	Label of the navigation button.
`children`	`ReactNode`	—	Buttons after the field, such as filters or scan. Rendered as written.
`onCancel`	`() => void`	—	Shows a Cancel button while the field is focused. Called after the field blurs.
`cancelLabel`	`string`	`"Cancel"`	Label of the Cancel button.
`bordered`	`boolean`	`true`	Hairline under the bar.
`safeArea`	`boolean`	`true`	Adds the top safe-area inset.
`barStyle`	`StyleProp<ViewStyle>`	—	Styles for the bar.
`variant`	`'filled' \| 'outline'`	`'filled'`	Look of the field.
…	`SearchBarProps`	—	`value`, `onChangeText`, `onSubmit`, `placeholder`, `loading`, `clearable`, `autoFocus`…

Accessibility

The field is a search field with its placeholder as a label, from SearchBar. An action with a counter reads it after its label: “Filters, 2”.

Built with

AppBar: the bar, its safe area, its background and its slots.
SearchBar: the 36pt field, its clear button and spinner.
IconButton: navigation, and the actions you pass.
Badge: the counter or dot on an action.

Used in

No block uses Search App Bar yet.

Search Result Item: the rows under the bar.
Search experience: recent searches, suggestions and results.
Profile App Bar
Compositions

Search App Bar

On this page