The high-quality iOS native search bar for react native

React Native Search Bar

The high-quality native iOS search bar for react native.

Getting Started

  1. Installation

    • Using npm: npm install react-native-search-bar --save
    • Using yarn: yarn add react-native-search-bar
  2. Link

Update

In your react native project, run

# npm
npm install react-native-search-bar@latest --save

# yarn
yarn add react-native-search-bar@latest

Usage

import SearchBar from 'react-native-search-bar'
<SearchBar
  ref='searchBar'
  placeholder='Search'
  onChangeText={...}
  onSearchButtonPress={...}
  onCancelButtonPress={...}
/>

Managing the keyboard

  • Show - this.refs.searchBar.focus();
  • Hide
    • this.refs.searchBar.blur(); - uses the iOS endEditing:true method on the
      underlying UISearchBar view.
    • this.refs.searchBar.unFocus(); - calls resignFirstResponder on the
      UITextField used by the UISearchBar.

Examples

  • Show the keyboard when the view loads:
componentDidMount() {
  this.refs.searchBar.focus();
}
  • Hide the keyboard when the user searches:
...
onSearchButtonPress={this.refs.searchBar.unFocus}
...

GitHub