@hawkrives/react-native-search-bar

React Native Search Bar

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

Getting Started

1. Installation

   • Using npm: npm install react-native-search-bar --save
   • Using yarn: yarn add react-native-search-bar

2. Link

   • Run react-native link react-native-search-bar
   • If linking fails, follow the manual linking steps

Update

In your react native project, run

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

# yarn
yarn add react-native-search-bar@latest

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