Component
Search bar
A pill-shaped search field that reveals a Cancel button on focus and a clear button once text is entered, matching the iOS search pattern.
The primitive
search bar.tsx
<NativeSearchBar value={value} onValueChange={setValue} placeholder="Search" />Example
Filters a list of saved destinations 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 | Show the "Cancel" text button — iOS always shows it on focus |
| onCancel | () => void | — |
| autoFocus | boolean | — |
| className | string | — |