Skip to main content
Version: 4.0.0-rc.3

SearchBar

Import

import { SearchBar } from "@rneui/themed";

Usage

iOS

Android

Interaction methods

methoddescription
focuscall focus on the textinput (example)
blurcall blur on the textinput (example)
clearcall clear on the textinput (example)
cancel(Android and iOS SearchBars only) call cancel on the SearchBar (left arrow on Android, Cancel button on iOS). This will basically blur the input and hide the keyboard (example)

Store a reference to the SearchBar in your component by using the ref prop provided by React (see docs):

<SearchBar
ref={search => this.search = search}
...
/>

You can then access SearchBar methods like so:

this.search.focus();
this.search.blur();
this.search.clear();
this.search.cancel(); // Only available if `platform` props is "ios" | "android"

Props

note

Includes all Input props.

NameTypeDefaultDescription
cancelButtonPropsText Style
cancelButtonTitlestring
cancelIconIconNode
clearIconIconNode
containerStyleView Style
inputContainerStyleView Style
inputStyleText Style
leftIconContainerStyleView Style
lightThemeboolean
loadingPropsActivityIndicatorProps
onCancel(() => any) or (() => any)
onClearFunction
platformdefault or android or ios'default' as const
rightIconContainerStyleView Style
roundboolean
searchIconIconNode
showCancelboolean
showLoadingboolean

Playground

Loading...