The high-quality iOS native search bar for react native.
In your react native project, run npm install react-native-search-bar --save
To link this library, please follow the first two steps in the Linking Libraries (iOS) guide on React Native website. The .xcodeproj
file is in node_modules/react-native-search-bar/
. In the end, you should have RNSearchBar.xcodeproj
in the Libaries
group on Xcode and libRNSearchBar.a
in the Link Binary With Libraries
section inside the Build Phases
tab of your project target.
In your react native project, run
npm install react-native@latest --save # optional, just for the latest react-native
npm install react-native-search-bar@latest --save
var SearchBar = require('react-native-search-bar');
<SearchBar
ref='searchBar'
placeholder='Search'
onChangeText={...}
onSearchButtonPress={...}
onCancelButtonPress={...}
/>
this.refs.searchBar.focus();
For all supportted properties, please check out propTypes
in either SearchBar.coffee or SearchBar.js.
There is also an example project in the SearchBarExample directory.
For now, implemented are only some of the features of UISearchBar. Feel free to send a pull request. To get started, you can read the "Native UI Components (iOS)" guide on React Native website.
MIT