wavyapp/react-native-search-bar

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

React Native Search Bar

The high-quality native search bar for react native.

Getting Started

This is a native library. It does not work with expo or create-react-native-app.

Installation

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

# yarn
yarn add react-native-search-bar

Pods

If using CocoaPods or React Native version >= 0.60.0

cd ios && pod install && cd ..

Linking

For React Native <= 0.59 only

react-native link react-native-search-bar

If linking fails, follow the manual linking steps

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}
...

For a full list of props check out the typescript definitions file.

There is also an example project in the example directory.

Contribution

For now, only some of the features of UISearchBar are implemented.

Feel free to send a pull request to the next branch. To get started, you can read the "Native UI Components (iOS)" guide on the React Native website.

Along with code contribution, you are welcomed to answer questions asked in the Issues.

License

MIT