Package Exports

react-native-search-list

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-search-list) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

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.