SearchInputThe SearchInput component allows users to find or filter content by entering a search term.

Overview

Usage Examples

The SearchInput component can be used in two ways:

• Inline: Displays search results directly on the same screen, filtering them in real time.
• Entry point to SearchScreen: Used as an entry point that opens that SearchScreen, providing a focused search experience.

Inline

Entry point to SearchScreen

Presets

Preset	Component
Default Usually appears at the top of the screen, can be used for filtering or searching.
Prominent The prominent style is best used for screens where the search is the primary focus.

States

First column	Default	Prominent
Focused
Typing
Loading results
Unfocused

Accessories

Prop	Preview
Cancel Button Used in searchScreen to dismiss the entire screen
Filter Icon

Spec

Dev

PlaygroundCode Example

TIP

This component extends the TextInput props.

APIThis is the list of additional props for the component

cancelButtonProps

ButtonProps

Props for the cancel button

containerStyle

ViewStyle

Override styles for the input

containerStyle

ViewStyle

Override styles for the input

customLoader

React.ReactElement

custom loader element to render instead of the default loader

customRightElement

React.ReactElement

Custom right element

inaccessible

boolean

Turn off accessibility for this view and its nested children

inaccessible

boolean

Turn off accessibility for this view and its nested children

invertColors

boolean

converts the colors of the search's input elements, icons and button to white

loaderProps

LoaderProps

Loader props to pass to the loader (only when 'showLoader' is passed).

onClear

() => void

On clear button callback.

onClear

() => void

On clear button callback.

onDismiss

() => void

callback for dismiss action

onDismiss

() => void

callback for dismiss action

schemeColor

string | null

The SearchInput colors (affects the search icon color, the filter icon color when 'showFilterIcon' is passed and the cancel button color)

schemeColor

string | null

The SearchInput colors (affects the search icon color and the cancel button color)

showFilterIcon

boolean

Pass true to add filter icon on the right.

showLoader

boolean

Whether to show a loader instead of the left search icon.

showLoader

boolean

Whether to show a loader instead of the left search icon.

style

ViewStyle

Override styles for container

style

ViewStyle

Override styles for container

title

string

Title prop.

useSafeArea

boolean

in case the SearchInput is rendered in a safe area (top of the screen)

useSafeArea

boolean

in case the SearchInput is rendered in a safe area (top of the screen)