SearchInput

SearchInput is a search field built on top of Input. It renders a leading search icon and a contextual clear (✕) button that appears only while there is text, using a rounded outline variant and a localized "Search" placeholder.

It wraps the supplied onChangeText so it can track whether the field has text (to toggle the clear button) and reset the value when the clear button is pressed.

Usage

import { SearchInput } from "stream-chat-react-native";

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

<SearchInput value={query} onChangeText={setQuery} />;

Props

SearchInputProps is Partial<InputProps>, so it accepts every Input prop (and, through it, every React Native TextInputProps) as an optional override.

SearchInput applies the following defaults internally; pass the corresponding prop to override any of them:

Default	Description
`variant='outline'`	Renders the bordered outline variant of `Input` with a fully rounded radius.
`helperText={false}`	Hides the helper text area below the field.
`autoCapitalize='words'`	Capitalizes the first letter of each word.
`autoCorrect={false}`	Disables autocorrect.
`placeholder`	Localized `"Search"` string from the translation context.

Input

EmptySearchResult