Skip to main content
Version: 4.0.0-beta.0

SearchBar

SearchBars are used to search or filter items. Use a SearchBar when the number of items directly impacts a user's ability to find one of them.

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

This component inherits all React Native Elements Input props, which means all native TextInput props that come with a standard React Native TextInput element, along with the following:


Reference

cancelButtonProps

(iOS only) props passed to cancel Button

Also receives all TouchableOpacity props

buttonStyle

cancel Button styling

TypeDefault
object (style)none

buttonTextStyle

cancel Button Text styling

TypeDefault
object (style)none

color

cancel Button text color

TypeDefault
string (color)#007aff

disabled

Prop to indicate cancel Button is disabled

TypeDefault
booleanfalse

buttonDisabledStyle

Disabled cancel Button styling

TypeDefault
object (style)none

buttonDisabledTextStyle

Styles for the text when cancel Button is disabled

TypeDefault
object (style){ color: '#cdcdcd' }

cancelButtonTitle

(iOS only) title of the cancel button on the right side

TypeDefault
string"Cancel"

cancelIcon (platform="android" only)

This props allows to override the Icon props or use a custom component. Use null or false to hide the icon.

TypeDefault
{...Icon props}
OR
component
none

clearIcon

This props allows to override the Icon props or use a custom component. Use null or false to hide the icon.

TypeDefault
{...Icon props}
OR
component
none

containerStyle

style the container of the SearchBar

TypeDefault
object (style)inherited styling

inputContainerStyle

style the container of the TextInput

TypeDefault
object (style)inherited styling

inputStyle

style the TextInput

TypeDefault
object (style)inherited styling

leftIconContainerStyle

style the icon container on the left side

TypeDefault
object (style)inherited styling

lightTheme (platform="default" only)

change theme to light theme

TypeDefault
booleanfalse

loadingProps

props passed to ActivityIndicator

TypeDefault
object{ }

onCancel

callback fired when pressing the cancel button (iOS) or the back icon (Android)

TypeDefault
functionnull

onChangeText

method to fire when text is changed

TypeDefault
functionnone

onClear

method to fire when input is cleared

TypeDefault
functionnone

placeholder

set the placeholder text

TypeDefault
string''

placeholderTextColor

set the color of the placeholder text

TypeDefault
string'#86939e'

platform

choose the look and feel of the search bar. One of "default", "ios", "android"

TypeDefault
string"default"

rightIconContainerStyle

style the icon container on the right side

TypeDefault
object (style)inherited styling

round (platform="default" only)

change TextInput styling to rounded corners

TypeDefault
booleanfalse

searchIcon

This props allows to override the Icon props or use a custom component. Use null or false to hide the icon.

TypeDefault
{...Icon props}
OR
component
none

showCancel (platform="ios" only)

When true the cancel button will stay visible after blur events.

TypeDefault
booleanfalse

showLoading

show the loading ActivityIndicator effect

TypeDefault
booleanfalse

underlineColorAndroid

specify other than the default transparent underline color

TypeDefault
string (color)transparent

value

The value of the search field

TypeDefault
stringnone