SearchBar
Default SearchBar
Platform specific SearchBar
iOS
Android
import { SearchBar } from 'react-native-elements'
<SearchBar
onChangeText={someMethod}
onClear={someMethod}
placeholder='Type Here...' />
<SearchBar
clearIcon={{ color: 'red' }}
searchIcon={false} // You could have passed `null` too
onChangeText={someMethod}
onClear={someMethod}
placeholder='Type Here...' />
<SearchBar
round
searchIcon={{ size: 24 }}
onChangeText={someMethod}
onClear={someMethod}
placeholder='Type Here...' />
<SearchBar
lightTheme
searchIcon={<CustomComponent />}
onChangeText={someMethod}
onClear={someMethod}
placeholder='Type Here...' />
<SearchBar
lightTheme
onChangeText={someMethod}
onClear={someMethod}
placeholder='Type Here...' />
<SearchBar
showLoading
platform="ios"
cancelButtonTitle="Cancel"
placeholder='Search' />
<SearchBar
showLoading
platform="android"
placeholder='Search' />
<SearchBar
showLoading
platform="android"
cancelIcon={{ type: 'font-awesome', name: 'chevron-left' }}
placeholder='Search' />
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:
platform
clearIcon
searchIcon
cancelIcon
(platform="android"
only)containerStyle
inputContainerStyle
inputStyle
lightTheme
(platform="default"
only)loadingProps
noIcon
onChangeText
onClear
placeholder
placeholderTextColor
round
(platform="default"
only)showLoading
underlineColorAndroid
cancelButtonTitle
cancelButtonProps
onCancel
Reference
platform
choose the look and feel of the search bar. One of "default", "ios", "android"
Type | Default |
---|---|
string | "default" |
clearIcon
This props allows to override the Icon
props or use a custom component.
Use null
or false
to hide the icon.
Type | Default |
---|---|
{...Icon props} OR component | none |
searchIcon
This props allows to override the Icon
props or use a custom component.
Use null
or false
to hide the icon.
Type | Default |
---|---|
{...Icon props} OR component | none |
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.
Type | Default |
---|---|
{...Icon props} OR component | none |
containerStyle
style the container of the SearchBar
Type | Default |
---|---|
object (style) | inherited styling |
inputContainerStyle
style the container of the TextInput
Type | Default |
---|---|
object (style) | inherited styling |
inputStyle
style the TextInput
Type | Default |
---|---|
object (style) | inherited styling |
lightTheme
(platform="default"
only)
change theme to light theme
Type | Default |
---|---|
boolean | false |
loadingProps
props passed to ActivityIndicator
Type | Default |
---|---|
object | { } |
onChangeText
method to fire when text is changed
Type | Default |
---|---|
function | none |
onClear
method to fire when input is cleared
Type | Default |
---|---|
function | none |
placeholder
set the placeholder text
Type | Default |
---|---|
string | '' |
placeholderTextColor
set the color of the placeholder text
Type | Default |
---|---|
string | '#86939e' |
round
(platform="default"
only)
change TextInput styling to rounded corners
Type | Default |
---|---|
boolean | false |
showLoading
show the loading ActivityIndicator effect
Type | Default |
---|---|
boolean | false |
underlineColorAndroid
specify other than the default transparent underline color
Type | Default |
---|---|
string (color) | transparent |
cancelButtonTitle
(iOS only) title of the cancel button on the right side
Type | Default |
---|---|
string | "Cancel" |
cancelButtonProps
(iOS only) props passed to Button
Type | Default |
---|---|
object | { } |
onCancel
callback fired when pressing the cancel button (iOS) or the back icon (Android)
Type | Default |
---|---|
function | null |
Interaction methods
method | description |
---|---|
focus | call focus on the textinput (example) |
blur | call blur on the textinput (example) |
clear | call 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) |
Calling methods on SearchBar
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"