Components
Search Bar
Full-width search field with optional leading slot, clear affordance, and room for trailing accessories.
Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add search-bar to your project.
watermelon add search-bar2
Import the component
Import Search Bar from your local UI registry output.
Import
import { SearchBar } from "@/components/ui/search-bar";Import
Import
import { SearchBar } from "@/components/ui/search-bar";Usage
Control text with value / onChangeText. Pass onClear to show a clear control when the query is non-empty. Use leftSlot for a search icon and rightSlot when you need an extra action when there is nothing to clear.
| prop | type | default | description |
|---|---|---|---|
| onClear | () => void | - | When set, shows a clear affordance when value is non-empty. |
| leftSlot | ReactNode | - | Leading accessory (e.g. search icon). |
| rightSlot | ReactNode | - | Trailing accessory when clear is not shown. |