Package Exports

react-native-search-list-tst

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-tst) 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 React Native ListView with a search bar

Installation

npm install react-native-search-list --save

One of the dependancies in this libary contains native modules. Follow the Linking Libraries (iOS) guide on React Native website for instructions on how to link these.

Usage

import SearchListView from 'react-native-search-list';

<SearchListView 
    ref={'searchList'}
    onSearch={this.onSearch}
    dataSource={this.props.dataSource}
    renderRow={this.renderRow}
/>

The SearchListView has 3 required props

Prop	Description
`onSearch`	A search function that is called when the user begins typing into the search bar
`dataSource`	A data source for the underlying ListView. Contains the results that should be displayed
`renderRow`	A function for rendering an individual row in the underling ListView

The onSearch method should modify your dataSource, so that when the user performs a search, the results are seen in the ListView

Focusing and Unfocusing

The component is automatically focused when the user taps on the search bar. This brings up the keyboard.

It is unfocused when the user taps the cancel button, or clears the text input. Unfocusing will dismiss the keyboard. It is also dimssed when the user taps the 'Search' button.

The component can be unfocused programmatically by calling the unfocus method. This will clear the text input.

this.refs.searchList.unfocus()

Optional Properties

The search bar can be customised using all the props avalible in react-native-search-bar