Component

Search bar

A pill-shaped search field that reveals Cancel while focused or whenever the field has text, and a clear button once text is entered.

Standalone

search bar.tsx

<NativeSearchBar value={value} onValueChange={setValue} placeholder="Search" />

Example

Filters a list of saved contacts on the contacts screen as the query is typed.

Morgan Diaz

Saved contact

Priya Shah

Saved contact

search-bar-example.tsx

<NativeSearchBar value={value} onValueChange={setValue} placeholder="Search contacts" />
<NativeRow label="Morgan Diaz" sublabel="Saved contact" />
<NativeRow label="Priya Shah" sublabel="Saved contact" />

Capabilities

Prop	Type	Description
valuerequired	string	-
onValueChangerequired	(value: string) => void	-
placeholder	string	-
cancelLabel	string	Label for the Cancel text button shown on focus
onCancel	() => void	-
autoFocus	boolean	-
className	string	-