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

   • Run react-native link react-native-search-bar
   • If linking fails, follow the
     manual linking steps

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