Version: 2.3.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

platform

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

TypeDefault
string"default"

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

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

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

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

rightIconContainerStyle

style the icon container on the right side

TypeDefault
object (style)inherited styling

lightTheme (platform="default" only)

change theme to light theme

TypeDefault
booleanfalse

loadingProps

props passed to ActivityIndicator

TypeDefault
object{ }

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'

round (platform="default" only)

change TextInput styling to rounded corners

TypeDefault
booleanfalse

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

cancelButtonTitle

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

TypeDefault
string"Cancel"

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' }

onCancel

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

TypeDefault
functionnull

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"