##
Usage

    import { SearchBar } from 'react-native-elements'

    <SearchBar
      onChangeText={someMethod}
      onClearText={someMethod}
      placeholder='Type Here...' />

    <SearchBar
      noIcon
      onChangeText={someMethod}
      onClearText={someMethod}
      placeholder='Type Here...' />

    <SearchBar
      round
      onChangeText={someMethod}
      onClearText={someMethod}
      placeholder='Type Here...' />

    <SearchBar
      lightTheme
      onChangeText={someMethod}
      onClearText={someMethod}
      placeholder='Type Here...' />

    <SearchBar
      lightTheme
      onChangeText={someMethod}
      onClearText={someMethod}
      icon={{ type: 'font-awesome', name: 'search' }}
      placeholder='Type Here...' />

##
Props

> This component inherits all native TextInput props that come with a standard React Native TextInput element, along with the following:

- `clearIcon`
- `containerStyle`
- `icon`
- `inputStyle`
- `lightTheme`
- `loadingIcon`
- `noIcon`
- `onChangeText`
- `onClearText`
- `placeholder`
- `placeholderTextColor`
- `round`
- `showLoadingIcon`
- `underlineColorAndroid`

##
Reference

###
`clearIcon`

specify color, styling, or another Material Icon Name (Note: pressing on this icon clears text inside the searchbar)

Type | Default
--- | ---
object {name (string), color (string), style (object)} | { color: '#86939e', name: 'search' }

###
`containerStyle`

style the container of the TextInput

Type | Default
--- | ---
object (style) | inherited styling

###
`icon`

specify type, name, color, and styling of the icon

Type | Default
--- | ---
object {type (string), name (string), color (string), style (object)} | { type: 'material', color: '#86939e', name: 'search' }

###
`inputStyle`

style the TextInput

Type | Default
--- | ---
object (style) | inherited styling

###
`lightTheme`

change theme to light theme

Type | Default
--- | ---
boolean | false

###
`loadingIcon`

specify color, styling of the loading ActivityIndicator effect

Type | Default
--- | ---
object {color (string), style (object)} | { color: '#86939e' }

###
`noIcon`

remove icon from textinput

Type | Default
--- | ---
boolean | false

###
`onChangeText`

method to fire when text is changed

Type | Default
--- | ---
function | none

###
`onClearText`

method to fire when text 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`

change TextInput styling to rounded corners

Type | Default
--- | ---
boolean | false

###
`showLoadingIcon`

show the loading ActivityIndicator effect

Type | Default
--- | ---
boolean | false

###
`underlineColorAndroid`

specify other than the default transparent underline color

Type | Default
--- | ---
string (color) | transparent

##
Interaction methods

method | description
--- | ---
focus | call focus on the textinput
blur | call blur on the textinput
clearText | call clear on the textinput

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.clearText();

← Rating Slider →