React Native Search List

A searchable ListView which supports Chinese PinYin and alphabetical index.

The original library was missing some commonly used features that are now implemented and the deprecated ListView was replaced with a SectionList to be compatible with future releases of React Native.

The following picture may be helpful to understand the structure and APIs:

Installation

$ npm install @zanechua/react-native-search-list --save

Usage

To Use SearchList, you will need an array of objects as the data source, and each object has to have a searchStr property, example code is 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
          key={this.state.dataSourceKey}
          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.
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`
listContainerStyle	object	Style properties for the internal TextInput Component
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`
searchBarContainerStyle	object	Style properties for the SearchBar Container Component
searchBarStyle	object	Style properties for the SearchBar Component
searchOnDefaultValue	bool	Enable filtered results based on default value
searchInputBackgroundColor	string	Custom search input default state background color	`#ffffff`
searchInputBackgroundColorActive	string	Custom search input searching state background color
searchInputPlaceholder	string	Custom search input placeholder text
searchInputDefaultValue	string	Custom search input default value text
searchInputPlaceholderColor	string	Custom search input placeholder text color	`#979797`
searchInputTextColor	string	Custom search input default state text color	`#171a23`
searchInputTextColorActive	string	Custom search input searching state text color	`#ffffff`
searchInputStyle	object	Style properties for the internal TextInput Component
statusBarHeight	number	The height of the status bar
toolbarHeight	number	The height of the tool bar	`44`
searchBarBackgroundColor	string	Custom search bar background color
staticCancelButton	bool	Enable/Disable a static cancel button with no slide in animation	`false`
showSearchIcon	bool	Show/Hide the search icon	`true`
displayMask	bool	Show/Hide the mask during searching	`true`
title	string	Toolbar title
titleTextColor	string	Toolbar title text color
cancelTitle	string	Search bar cancel text color	`Cancel`
cancelTextColor	string	Search bar cancel text color	`#ffffff`
cancelContainerStyle	object	Style properties for the cancel button container
hideSectionList	bool	Whether to hide the alphabetical section listing view or not.
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
sectionIndexTextColor	string	Section index text color
sectionIndexContainerStyle	object	Style properties for the Section Index Container Component
renderSectionIndexItem	func	Custom render SectionIndexItem.
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.
renderItemSeparator	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
renderStickyHeader	func	`renderStickyHeader` for the section below the SearchBar
renderRow	func	`renderRow` for the internal ListView
renderToolbar	func	`renderToolbar` for the Toolbar
renderCancel	func	`renderCancel` for custom rendering of the cancel button
renderCancelWhileSearching	func	`renderCancelWhileSearching` for custom rendering of the cancel button during search
renderToolbar	func	`renderToolbar` for the Toolbar
onSearchStart	func	Callback when searching start.
onSearchEnd	func	Callback when searching end.

JavanHuang/react-native-search-list

React Native Search List

Installation

Usage

APIs

Contributions