@mrizki/react-native-modal-filter-picker v1.3.5

react-native-modal-filter-picker

A cross-platform (iOS, Android) modal picker for React Native.

Features:

• Cross-platform (iOS, Android)
• Default styling works well
• Extensively customisable styling and rendering
• Built-in search filter for long lists
• Uses React Native ListView for lazy-loading and high performance
• Compatible with React Native 0.40+
• Successfully used in production apps

Installation

Use NPM/Yarn to install package: react-native-modal-filter-picker

Usage

A basic demo:

import { Component, View, Text, TouchableOpacity } from 'react-native'

import ModalFilterPicker from 'react-native-modal-filter-picker'


export default class App extends Component {
  constructor (props, ctx) {
    super(props, ctx);

    this.state = {
      visible: false,
      picked: null,
    };
  }

  render() {
    const { visible, picked } = this.state;

    const options = [
      {
        key: 'kenya',
        label: 'Kenya',
      },
      {
        key: 'uganda',
        label: 'Uganda',
      },
      {
        key: 'libya',
        label: 'Libya',
      },
      {
        key: 'morocco',
        label: 'Morocco',
      },
      {
        key: 'estonia',
        label: 'Estonia',
      },
    ];

    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.buttonContainer} onPress={this.onShow}>
          <Text>Select country</Text>
        </TouchableOpacity>      
        <Text style={appStyles.label}>Selected:</Text>
        <Text>{picked}</Text>
        <ModalFilterPicker
          visible={visible}
          onSelect={this.onSelect}
          onCancel={this.onCancel}
          options={options}
        />
      </View>
    );
  }

  onShow = () => {
    this.setState({ visible: true });
  }

  onSelect = (picked) => {
    this.setState({
      picked: picked,
      visible: false
    })
  }

  onCancel = () => {
    this.setState({
      visible: false
    });
  }
}

Options

The following functionality props can be passed to the component:

In addition, the following styling props (each of which must be an Object consisting of styles) can be passed in:

Advanced filtering

By default the filter input field allows you to filter by the option label that's displayed on the screen.

But you can also attach a searchKey attribute to each option for the filtering algorithm to use. For example, we can allow the user to filter by continent as well as country name, even though we don't display the continent name:

render() {
  const { visible } = this.state;

  const options = [
    {
      key: 'kenya',
      label: 'Kenya',
      searchKey: 'Africa',
    },
    {
      key: 'uganda',
      label: 'Uganda',
      searchKey: 'Africa',
    },
    {
      key: 'libya',
      label: 'Libya',
      searchKey: 'Africa',
    },
    {
      key: 'japan',
      label: 'Japan',
      searchKey: 'Asia',
    },
    {
      key: 'estonia',
      label: 'Estonia',
      searchKey: 'Europe',
    },
  ];

  return (
    <View style={styles.container}>
      <ModalFilterPicker
        onSelect={this.onSelect}
        onCancel={this.onCancel}
        options={options}
      />
    </View>
  );
}

If you run the above example, you will be able to type africa into the filter input field to see all the countries within Africa.

Note: Filtering is case-insensitive

License

MIT