Skip to main content
Version: 3.4.2

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#

Platform specific SearchBar#

iOS

Android

Usage#

import { 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}      />    );  }}

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

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)

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"