The high-quality native iOS 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
- Run
react-native link react-native-search-bar
- If linking fails, follow the manual linking steps
react-native link react-native-search-bar
cd ios
pod install
In your react native project, run
# npm
npm install react-native-search-bar@latest --save
# yarn
yarn add react-native-search-bar@latest
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 iOSendEditing:true
method on the underlyingUISearchBar
view.this.refs.searchBar.unFocus();
- callsresignFirstResponder
on theUITextField
used by theUISearchBar
.
- 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