umhan35 / react-native-search-bar

The high-quality iOS native search bar for react native.
MIT License
861 stars 207 forks source link

React Native Search Bar

The high-quality native search bar for react native.

npm version npm downloads code style: prettier


## Getting Started This is a native library. **It does not work with expo or create-react-native-app.** ### Installation ```bash # 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 ```bash cd ios && pod install && cd .. ``` ### Linking > For React Native <= 0.59 only ```bash react-native link react-native-search-bar ``` If linking fails, follow the [manual linking steps](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking) ## Usage ```javascript import SearchBar from 'react-native-search-bar'; ``` ```JSX ``` ### 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: ```javascript componentDidMount() { this.refs.searchBar.focus(); } ``` - Hide the keyboard when the user searches: ```javascript ... onSearchButtonPress={this.refs.searchBar.unFocus} ... ``` For a full list of props check out [the typescript definitions file](./src/index.d.ts). There is also an example project in the [example](./example) directory. ## Contribution For now, only some of the features of [UISearchBar](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISearchBar_Class/) are implemented. Feel free to send a pull request to the [next](https://github.com/umhan35/react-native-search-bar/tree/next) branch. To get started, you can read the ["Native UI Components (iOS)"](http://facebook.github.io/react-native/docs/native-components-ios.html) guide on the React Native website. Along with code contribution, you are welcomed to answer questions asked in the [Issues](https://github.com/umhan35/react-native-search-bar/issues). ## License MIT