@zk2401/react-native-search-list
v2.4.2
Published
react native component for search list view
Downloads
9
Maintainers
Readme
A searchable ListView which supports Chinese PinYin and alphabetical index.
React Native Search List
A searchable ListView which supports Chinese PinYin and alphabetical index.
The following pic may be helpful when understanding the structure and APIs:
Installation
$ npm install @unpourtous/react-native-search-list --save
Usage
To Use SearchList, need a array of object as data source,and each object has searchStr property, eample code are put in ./entry.js
.
export default class example extends Component {
constructor (props) {
super(props)
this.state = {
dataSource: demoList
}
}
// custom render row
renderRow (item, sectionID, rowID, highlightRowFunc, isSearching) {
return (
<Touchable onPress={() => {
Alert.alert('Clicked!', `sectionID: ${sectionID}; item: ${item.searchStr}`,
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{cancelable: true})
}}>
<View key={rowID} style={{flex: 1, marginLeft: 20, height: rowHeight, justifyContent: 'center'}}>
{/*use `HighlightableText` to highlight the search result*/}
<HighlightableText
matcher={item.matcher}
text={item.searchStr}
textColor={'#000'}
hightlightTextColor={'#0069c0'}
/>
</View>
</Touchable>
)
}
// render empty view when datasource is empty
renderEmpty () {
return (
<View style={styles.emptyDataSource}>
<Text style={{color: '#979797', fontSize: 18, paddingTop: 20}}> No Content </Text>
</View>
)
}
// render empty result view when search result is empty
renderEmptyResult (searchStr) {
return (
<View style={styles.emptySearchResult}>
<Text style={{color: '#979797', fontSize: 18, paddingTop: 20}}> No Result For <Text
style={{color: '#171a23', fontSize: 18}}>{searchStr}</Text></Text>
<Text style={{color: '#979797', fontSize: 18, alignItems: 'center', paddingTop: 10}}>Please search again</Text>
</View>
)
}
render () {
return (
<View style={styles.container}>
<StatusBar backgroundColor='#F00' barStyle='light-content' />
<SearchList
data={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
renderEmptyResult={this.renderEmptyResult.bind(this)}
renderBackButton={() => null}
renderEmpty={this.renderEmpty.bind(this)}
rowHeight={rowHeight}
toolbarBackgroundColor={'#2196f3'}
title='Search List Demo'
cancelTitle='取消'
onClickBack={() => {}}
searchListBackgroundColor={'#2196f3'}
searchBarToggleDuration={300}
searchInputBackgroundColor={'#0069c0'}
searchInputBackgroundColorActive={'#6ec6ff'}
searchInputPlaceholderColor={'#FFF'}
searchInputTextColor={'#FFF'}
searchInputTextColorActive={'#000'}
searchInputPlaceholder='Search'
sectionIndexTextColor={'#6ec6ff'}
searchBarBackgroundColor={'#2196f3'}
/>
</View>
)
}
}
APIs
prop name | type | description | default value
--- | --- | --- | ---
data | array | The rows of list view.each object should contain searchStr
, it will be used for search source. If you have custom row id,you should set searchKey
for each object. |
renderRow | number | Render your custom row content. |
rowHeight | number | The height of the default row content, it will be used for scroll calculate. | 40
sectionHeaderHeight | number | The height of section header content. | 24
searchListBackgroundColor | string | BackgroundColor for searchList. | #171a23
toolbarBackgroundColor | string | Toolbar background color. | #171a23
searchBarToggleDuration | number | Custom search bar animation duration. | 300
searchBarBackgroundColor | string | Custom search bar background color. | #171a23
searchInputBackgroundColor | string | Custom search input default state background color. |
searchInputBackgroundColorActive | string | Custom search input searching state background color. |
searchInputPlaceholder | string | Custom search input placeholder text. |
searchInputPlaceholderColor | string | Custom search input placeholder text color. |
searchInputTextColor | string | Custom search input default state text color. |
searchInputTextColorActive | string | Custom search input searching state text color. |
searchBarBackgroundColor | string | Custom search bar background color. |
title | string | Toolbar title. |
titleTextColor | string | Toolbar title text color. |
cancelTextColor | string | Search bar cancel text color. |
cancelTitle | string | Search bar cancel text color. |
sectionIndexTextColor | string | Section index text color. |
hideSectionList | bool | Whether to hide the alphabetical section listing view or not. |
renderSectionIndexItem | func | Custom render SectionIndexItem. |
sortFunc | func | The sort function for the list view data source,sorting alphabetical by default |
resultSortFunc | func | The sort function for the search result,sorting first match position by default |
onScrollToSection | func | The callback of alphabetical section view be clicked or touch. |
renderBackButton | func | Render a custom back buttom on Toolbar. |
renderEmpty | func | Render a view when data is empty. |
renderEmptyResult | func | Render a view when search result is empty. |
renderSeparator | func | Render row separator. |
renderSectionHeader | func | renderSectionHeader
for the internal ListView |
renderHeader | func | renderHeader
for the internal ListView |
renderFooter | func | renderFooter
for the internal ListView |
renderRow | func | renderRow
for the internal ListView |
onSearchStart | func | Callback when searching start. |
onSearchEnd | func | Callback when searching end. |
Thanks
TODO
- ~~add hightlight demo~~
- ~~test ios & android & android with status bar and without~~
License
This library is distributed under MIT Licence.