phound-inc / react-native-search-bar Goto Github PK

The high-quality native search bar for react native.

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

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

# yarn
yarn add react-native-search-bar

If using CocoaPods or React Native version >= 0.60.0

cd ios && pod install && cd ..

For React Native <= 0.59 only

react-native link react-native-search-bar

If linking fails, follow the manual linking steps

import SearchBar from 'react-native-search-bar';

<SearchBar
  ref="searchBar"
  placeholder="Search"
  onChangeText={...}
  onSearchButtonPress={...}
  onCancelButtonPress={...}
/>

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

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

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.

MIT