https://github.com/umhan35/react-native-search-bar
The high-quality iOS native search bar for react native.
https://github.com/umhan35/react-native-search-bar
Last synced: 3 months ago
JSON representation
The high-quality iOS native search bar for react native.
- Host: GitHub
- URL: https://github.com/umhan35/react-native-search-bar
- Owner: umhan35
- License: mit
- Created: 2015-06-14T00:19:53.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-04-16T13:04:33.000Z (over 2 years ago)
- Last Synced: 2024-04-25T00:50:49.140Z (over 1 year ago)
- Language: Objective-C
- Homepage:
- Size: 1.12 MB
- Stars: 857
- Watchers: 13
- Forks: 213
- Open Issues: 45
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-search-bar ★671 - The native search bar for react native. (Components / UI)
- awesome-react-native-native-modules - react-native-search-bar ★582 - quality iOS native search bar for react native. (<a name="UI:-Native-Modules">UI: Native Modules</a>)
- awesome-reactnative-ui - react-native-search-bar - quality iOS native search bar for react native.|<ul><li>Last updated : This week</li><li>Stars : 691</li><li>Open issues : 7</li></ul>|| (Others)
- awesome-react-native - react-native-search-bar ★671 - The native search bar for react native. (Components / UI)
- awesome-reactnative-ui - react-native-search-bar - quality iOS native search bar for react native.|<ul><li>Last updated : This week</li><li>Stars : 691</li><li>Open issues : 7</li></ul>|| (Others)
- awesome-react-native - react-native-search-bar
- awesome-react-native - react-native-search-bar ★671 - The native search bar for react native. (Components / UI)
- ReactNativeMaterials - react-native-search-bar
- awesome-react-native-ui - react-native-search-bar ★403 - The native search bar for react native. (Components / UI)
- awesome-react-native - react-native-search-bar ★671 - The native search bar for react native. (Components / UI)
README
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
```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