react-native-search-bar

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

☀️ Battle-tested in WeatherEh app.

Installation

In your react native project, run npm install react-native-search-bar --save

To link this library, please follow the first two steps in the Linking Libraries (iOS) guide on React Native website. The .xcodeproj file is in node_modules/react-native-search-bar/. In the end, you should have RNSearchBar.xcodeproj in the Libaries group on Xcode and libRNSearchBar.a in the Link Binary With Libraries section inside the Build Phases tab of your project target.

Update

In your react native project, run

npm install react-native@latest --save # optional, just for the latest react-native
npm install react-native-search-bar@latest --save

Usage

var SearchBar = require('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}
...

For all supportted properties, please check out propTypes in either SearchBar.coffee or SearchBar.js.

There is also an example project in the SearchBarExample directory.

Contribution

For now, implemented are only some of the features of UISearchBar. Feel free to send a pull request. To get started, you can read the "Native UI Components (iOS)" guide on React Native website.

Except code contribution, you are welcome to answer question asked in Issues.

License

MIT