```js import { SearchBar } from 'react-native-elements' ``` #### SearchBar props ##### This component inherits [all native TextInput props that come with a standard React Native TextInput element](https://facebook.github.io/react-native/docs/textinput.html), along with the following: | prop | default | type | description | | ---- | ---- | ----| ---- | | containerStyle | inherited styling | object (style) | style the container of the TextInput | | inputStyle | inherited styling | object (style) | style the TextInput | | icon | { color: '#86939e', name: 'search' } | object {name (string), color (string), style (object)} | specify color, styling, or another [Material Icon Name](https://design.google.com/icons/) | | noIcon | false | boolean | remove icon from textinput | | lightTheme | false | boolean | change theme to light theme | | round | false | boolean | change TextInput styling to rounded corners | | underlineColorAndroid | transparent | string (color) | specify other than the default transparent underline color | | loadingIcon | { color: '#86939e' } | object {color (string), style (object)} | specify color, styling of the loading ActivityIndicator effect | | showLoadingIcon | false | boolean | show the loading ActivityIndicator effect | | placeholder | '' | string | set the placeholder text | | placeholderTextColor | '#86939e' | string | set the color of the placeholder text | | onChangeText | none | function | method to fire when text is changed | | clearIcon | { color: '#86939e', name: 'search' } | object {name (string), color (string), style (object)} | specify color, styling, or another [Material Icon Name](https://design.google.com/icons/) (Note: pressing on this icon clears text inside the searchbar) | ##### Interaction methods | method | description | | ---- | ---- | | focus | call focus on the textinput ([example](#calling)) | | blur | call blur on the textinput ([example](#calling)) | | clearText | call clear on the textinput ([example](#calling))| #### Calling methods on SearchBar Store a reference to the SearchBar in your component by using the ref prop provided by React ([see docs](https://facebook.github.io/react/docs/refs-and-the-dom.html)): ```js this.search = search} ... /> ``` You can then access SearchBar methods like so: ``` this.search.focus(); this.search.blur(); this.search.clearText(); ```