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

• js-pinyin
• md5
• react-native-selectablesectionlistview

TODO

1. add hightlight demo
2. test ios & android & android with status bar and without

Our Other Projects

• WeTrident: A simple App development framework based on React Native。
• WT-Console: Realtime log utils in React Native App。
• React Native Popup Stub: A smart popup container.
• WT Console Server: An open source log manager backend.

License

This library is distributed under MIT Licence.