Skip to content

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

License

Notifications You must be signed in to change notification settings

churchtools/react-native-search-bar

 
 

Repository files navigation

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

# 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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Objective-C 36.1%
  • Java 34.5%
  • JavaScript 17.2%
  • Ruby 7.2%
  • Starlark 5.0%