React Native Search Filter

React Native search component with filter function.

Getting Started

Installation

Using npm:

$ npm install react-native-search-filter --save

Using yarn:

$ yarn add react-native-search-filter

Example Usage

Complete example available here.

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native';
import SearchInput, { createFilter } from 'react-native-search-filter';
import emails from './emails';
const KEYS_TO_FILTERS = ['user.name', 'subject'];

export default class App extends Component<{}> {
 constructor(props) {
    super(props);
    this.state = {
      searchTerm: ''
    }
  }
  searchUpdated(term) {
    this.setState({ searchTerm: term })
  }
  render() {
    const filteredEmails = emails.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
    return (
      <View style={styles.container}>
        <SearchInput 
          onChangeText={(term) => { this.searchUpdated(term) }} 
          style={styles.searchInput}
          placeholder="Type a message to search"
          />
        <ScrollView>
          {filteredEmails.map(email => {
            return (
              <TouchableOpacity onPress={()=>alert(email.user.name)} key={email.id} style={styles.emailItem}>
                <View>
                  <Text>{email.user.name}</Text>
                  <Text style={styles.emailSubject}>{email.subject}</Text>
                </View>
              </TouchableOpacity>
            )
          })}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'flex-start'
  },
  emailItem:{
    borderBottomWidth: 0.5,
    borderColor: 'rgba(0,0,0,0.3)',
    padding: 10
  },
  emailSubject: {
    color: 'rgba(0,0,0,0.5)'
  },
  searchInput:{
    padding: 10,
    borderColor: '#CCC',
    borderWidth: 1
  }
});

API and Configuration

| Property | Type | Default | Description | |-------------|----------|--------------|----------------------------------------------------------------| |caseSensitive|boolean|false|Define if the search should be case sensitive.| |clearIcon|Node|null|Optional clear icon. | |clearIconViewStyles|Style|{position:absolute',top: 18,right: 22}|Optional styles for the clear icon view.| |filterKeys|string or [string]||Will be use by the filter method if no argument is passed there.| |fuzzy|boolean|false|Define if the search should be fuzzy.| |inputViewStyles| Style | |Optional styles for the input container. | | onChangeText | Function | Required| Function called when the search term is changed (will be passed as an argument). |sortResults|boolean|false|Define if search results should be sorted by relevance (only works with fuzzy search).| |throttle|number|200|Reduce call frequency to the onChange function (in ms).| |onSubmitEditing|function|() => {}|Defines a function for the keyboard search button onPress.| |inputFocus|boolean|false|Defines whether the field receives focus.| |returnKeyType|string|done|Determines how the return key should look. The following values work across platforms: done, go, next, search, send|

Methods

filter([keys])

Return a function which can be used to filter an array. keys can be string, [string] or null.

If an array keys is an array, the function will return true if at least one of the keys of the item matches the search term.

Static Methods

filter(searchTerm, [keys], [{caseSensitive, fuzzy, sortResults}])

Return a function which can be used to filter an array. searchTerm can be a regex or a String. keys can be string, [string] or null.

If an array keys is an array, the function will return true if at least one of the keys of the item matches the search term.

Known Issues

Hide clearIcon if search input is empty.

Provided you have a custom icon package, a short toggle method for the property will do: clearIcon={this.state.searchTerm!==''&&<Icon name="x"/>}.

Fuse.js: Unknown plugin "babel-plugin-add-module-exports"

Add babel-plugin-add-module-exports as a dev dependency. Fuse.js #154.

npm i babel-plugin-add-module-exports babel-preset-es2015 babel-preset-stage-2 --save-dev

Acknowledgement

enkidevs - Simple react.js component for a search input, providing a filter function .