React Native Search List

A searchable ListView which supports Chinese PinYin and alphabetical index.

A fork of https://github.com/unpourtous/react-native-search-list

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

yarn add react-native-search-list

Usage

To Use SearchList, you will need an array of objects as the data source, and each object has to have a cursor property, example code is in ./example.js.

APIs

prop name | type | description | default value --- | --- | --- | --- data | array | The data object searchCursor | string | Set the key in the data array that's being used as the search source | cursor 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 | searchIconColor | string | Custom color for the search icon | #171a23 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 | 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 | onSearchStart | func | Callback when searching start. | onSearchEnd | func | Callback when searching end. |

Contributions

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