react-native-search-list-tst v0.1.0
react-native-search-list
A React Native ListView with a search bar
Installation
npm install react-native-search-list --saveOne of the dependancies in this libary contains native modules. Follow the Linking Libraries (iOS) guide on React Native website for instructions on how to link these.
Usage
import SearchListView from 'react-native-search-list';<SearchListView
ref={'searchList'}
onSearch={this.onSearch}
dataSource={this.props.dataSource}
renderRow={this.renderRow}
/>The SearchListView has 3 required props
| Prop | Description |
|---|---|
onSearch | A search function that is called when the user begins typing into the search bar |
dataSource | A data source for the underlying ListView. Contains the results that should be displayed |
renderRow | A function for rendering an individual row in the underling ListView |
The onSearch method should modify your dataSource, so that when the user performs a search, the results are seen in the ListView
Focusing and Unfocusing
The component is automatically focused when the user taps on the search bar. This brings up the keyboard.
It is unfocused when the user taps the cancel button, or clears the text input. Unfocusing will dismiss the keyboard. It is also dimssed when the user taps the 'Search' button.
The component can be unfocused programmatically by calling the unfocus method. This will clear the text input.
this.refs.searchList.unfocus()Optional Properties
The search bar can be customised using all the props avalible in react-native-search-bar
4 years ago