https://github.com/zanechua/react-native-search-list
A searchable ListView which supports Chinese PinYin and alphabetical index.
https://github.com/zanechua/react-native-search-list
react-native react-native-search-list
Last synced: 9 months ago
JSON representation
A searchable ListView which supports Chinese PinYin and alphabetical index.
- Host: GitHub
- URL: https://github.com/zanechua/react-native-search-list
- Owner: zanechua
- License: mit
- Created: 2019-04-23T07:33:01.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:02:01.000Z (over 3 years ago)
- Last Synced: 2024-09-22T09:13:19.077Z (almost 2 years ago)
- Topics: react-native, react-native-search-list
- Language: JavaScript
- Homepage: https://github.com/zanechua/react-native-search-list/
- Size: 4.84 MB
- Stars: 8
- Watchers: 2
- Forks: 4
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
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](https://github.com/waterchestnut/pinyin)
* [@unpourtous/react-native-search-list](https://github.com/unpourtous/react-native-search-list)
* [react-native-selectablesectionlistview](https://github.com/johanneslumpe/react-native-selectablesectionlistview)