Skip to main content
Version: 4.0.0-rc.8

SearchBar

Usage

Import

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

Theme Key

SearchBar

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
clearIconIconNodeClear Icon
containerStyleView StyleStyle for container
inputContainerStyleView StyleStyle for input container
inputStyleText StyleInput Style
leftIconContainerStyleView StyleLeft Icon Container Style
lightThemeboolean
loadingPropsActivityIndicatorPropsActivityIndicatorProps
onCancel(() => any) | (() => any)Callback Function on cancel icon press
onClearFunction
onKeyboardHideFunctionCallback Function on keyboard hides
platformdefault | android | iosdefault
rightIconContainerStyleView StyleRight Icon Container Style
roundboolean
searchIconIconNodeIcon for search
showCancelbooleanShow cancel
showLoadingbooleanShow loading

Playground

Loading...