/react-native-search-list

A searchable ListView which supports Chinese PinYin and alphabetical index.

Primary LanguageJavaScriptMIT LicenseMIT

React Native Search List

Release Release Release Standard - JavaScript Style Guide License

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