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. |

Contributions

• js-pinyin
• @unpourtous/react-native-search-list
• react-native-selectablesectionlistview