SearchInput

Search input with debounce and clear button, supporting manual and automatic search modes, three visual variants and TextInput passthrough.

Edit on GitHubEditllms.txt

iOSAndroid

Preview SearchInput on your device

Scan with Expo Go

iOS Android

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-search-input

Usage

import { SearchInput } from '@/components/docyrus-native/search-input';

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

<SearchInput
  value={query}
  onValueChange={setQuery}
  onSearch={(value) => fetchResults(value)}
/>

Manual Mode

In manual mode, onSearch fires only when the user submits (return key) or presses the search icon.

<SearchInput
  value={query}
  onValueChange={setQuery}
  onSearch={handleSearch}
  mode="manual"
/>

Variants

<SearchInput value={query} onValueChange={setQuery} onSearch={handleSearch} variant="default" />
<SearchInput value={query} onValueChange={setQuery} onSearch={handleSearch} variant="outline" />
<SearchInput value={query} onValueChange={setQuery} onSearch={handleSearch} variant="ghost" />

Sizes

<SearchInput value={query} onValueChange={setQuery} onSearch={handleSearch} size="sm" />
<SearchInput value={query} onValueChange={setQuery} onSearch={handleSearch} size="default" />
<SearchInput value={query} onValueChange={setQuery} onSearch={handleSearch} size="lg" />

size="md" is kept as a native alias of 'default'.

Ref & TextInput props

const inputRef = useRef<TextInput>(null);

<SearchInput
  ref={inputRef}
  value={query}
  onValueChange={setQuery}
  onSearch={handleSearch}
  returnKeyType="search"
  testID="customer-search"
/>

inputRef.current?.focus();

Translations

Copy comes from useUiTranslation() with the same keys as web — mount a UiTranslationProvider to translate:

Key	English fallback
`ui.common.searchPlaceholder`	`Search...` (placeholder, when `placeholder` is not set)
`ui.common.search`	`Search` (search icon accessibility label)
`ui.common.clearSearch`	`Clear search` (clear button accessibility label)

API Reference

Prop	Type	Default	Description
`value`	`string`	—	The current input value (controlled).
`onValueChange`	`(value: string) => void`	—	Called on every keystroke to update the controlled value.
`onSearch`	`(value: string) => void`	—	Called when a search should run: after the debounce delay (`debounce` mode), or on submit / search-icon press (`manual` mode). Also called with `''` on clear.
`mode`	`'debounce' \| 'manual'`	`'debounce'`	Search trigger mode.
`debounceMs`	`number`	`300`	Debounce delay in milliseconds (debounce mode only).
`variant`	`'default' \| 'outline' \| 'ghost'`	`'default'`	Visual style: input border, border colour, or borderless/transparent.
`size`	`'sm' \| 'default' \| 'md' \| 'lg'`	`'default'`	Height, font size and padding. `'md'` is an alias of `'default'`.
`placeholder`	`string`	`'Search...'`	Placeholder text (translated via `ui.common.searchPlaceholder` when omitted).
`disabled`	`boolean`	`false`	Non-editable and visually dimmed.
`autoFocus`	`boolean`	`false`	Focus the input on mount.
`ref`	`Ref<TextInput>`	—	Ref to the underlying `TextInput` (React 19 ref-as-prop).
`className`	`string`	—	Additional classes for the container.
`inputClassName`	`string`	—	Additional classes for the `TextInput`.
`...TextInputProps`	`TextInputProps`	—	Every other `TextInput` prop (`returnKeyType`, `onSubmitEditing`, `onFocus`, `onBlur`, `keyboardType`, `testID`, …) is forwarded. `onSubmitEditing` / `onFocus` / `onBlur` are chained with the internal handlers.

Exports

Export	Description
`SearchInput`	The search input component
`searchInputVariants`	`tv()` slot definition (`base` / `text` / `icon` …) with `variant` + control sizes

Type Exports

Type	Description
`SearchInputProps`	Props for the SearchInput component.
`SearchInputVariant`	`'default' \| 'outline' \| 'ghost'`.
`SearchInputSize`	`'sm' \| 'default' \| 'md' \| 'lg'`.
`SearchInputMode`	`'debounce' \| 'manual'`.

SearchInput

On this page