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.

Note this component is only supported on iOS.

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