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.
#
Default SearchBar![](/img/searchbar.png)
#
Platform specific SearchBariOS
![](https://user-images.githubusercontent.com/17592779/31585176-b124cdae-b1bd-11e7-809f-ba966cebc663.gif)
Android
![](https://user-images.githubusercontent.com/17592779/31586716-f6e8ff9c-b1d4-11e7-918f-2a7e11d51b08.gif)
#
Usageimport { SearchBar } from 'react-native-elements';
export default class App extends React.Component { state = { search: '', };
updateSearch = (search) => { this.setState({ search }); };
render() { const { search } = this.state;
return ( <SearchBar placeholder="Type Here..." onChangeText={this.updateSearch} value={search} /> ); }}
#
PropsThis 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
leftIconContainerStyle
rightIconContainerStyle
lightTheme
(platform="default"
only)loadingProps
onChangeText
onClear
placeholder
placeholderTextColor
round
(platform="default"
only)showCancel
(platform="ios"
only)showLoading
underlineColorAndroid
cancelButtonTitle
cancelButtonProps
onCancel
#
Referenceplatform
#
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 |
leftIconContainerStyle
#
style the icon container on the left side
Type | Default |
---|---|
object (style) | inherited styling |
rightIconContainerStyle
#
style the icon container on the right side
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 |
showCancel
(platform="ios"
only)#
When true
the cancel button will stay visible after blur events.
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" |
value
#
The value of the search field
Type | Default |
---|---|
string | none |
cancelButtonProps
#
(iOS only) props passed to cancel Button
Also receives all TouchableOpacity props
buttonStyle
#
cancel Button styling
Type | Default |
---|---|
object (style) | none |
buttonTextStyle
#
cancel Button Text styling
Type | Default |
---|---|
object (style) | none |
color
#
cancel Button text color
Type | Default |
---|---|
string (color) | #007aff |
disabled
#
Prop to indicate cancel Button is disabled
Type | Default |
---|---|
boolean | false |
buttonDisabledStyle
#
Disabled cancel Button styling
Type | Default |
---|---|
object (style) | none |
buttonDisabledTextStyle
#
Styles for the text when cancel Button is disabled
Type | Default |
---|---|
object (style) | { color: '#cdcdcd' } |
onCancel
#
callback fired when pressing the cancel button (iOS) or the back icon (Android)
Type | Default |
---|---|
function | null |
#
Interaction methodsmethod | 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"