Awesome

react-native-multiple-select

Simple multi-select component for react-native (Select2 for react-native).

Important notice

I've been super busy with work and other projects lately that I really don't have enough time to dedicate to this project. If you would like to maintain this project, you can drop me an email. Thanks.

Installation

$ npm install react-native-multiple-select --save

or use yarn

$ yarn add react-native-multiple-select

Usage

Note: Ensure to add and configure react-native-vector-icons to your project before using this package.

You can clone and try out the sample app or you can try sample

The snippet below shows how the component can be used

// import component
import React, { Component } from 'react';
import { View } from 'react-native';
import MultiSelect from 'react-native-multiple-select';

const items = [{
    id: '92iijs7yta',
    name: 'Ondo'
  }, {
    id: 'a0s0a8ssbsd',
    name: 'Ogun'
  }, {
    id: '16hbajsabsd',
    name: 'Calabar'
  }, {
    id: 'nahs75a5sg',
    name: 'Lagos'
  }, {
    id: '667atsas',
    name: 'Maiduguri'
  }, {
    id: 'hsyasajs',
    name: 'Anambra'
  }, {
    id: 'djsjudksjd',
    name: 'Benue'
  }, {
    id: 'sdhyaysdj',
    name: 'Kaduna'
  }, {
    id: 'suudydjsjd',
    name: 'Abuja'
    }
];

class MultiSelectExample extends Component {

  state = {
    selectedItems : []
  };

  
  onSelectedItemsChange = selectedItems => {
    this.setState({ selectedItems });
  };

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

    return (
      <View style={{ flex: 1 }}>
        <MultiSelect
          hideTags
          items={items}
          uniqueKey="id"
          ref={(component) => { this.multiSelect = component }}
          onSelectedItemsChange={this.onSelectedItemsChange}
          selectedItems={selectedItems}
          selectText="Pick Items"
          searchInputPlaceholderText="Search Items..."
          onChangeInput={ (text)=> console.log(text)}
          altFontFamily="ProximaNova-Light"
          tagRemoveIconColor="#CCC"
          tagBorderColor="#CCC"
          tagTextColor="#CCC"
          selectedItemTextColor="#CCC"
          selectedItemIconColor="#CCC"
          itemTextColor="#000"
          displayKey="name"
          searchInputStyle={{ color: '#CCC' }}
          submitButtonColor="#CCC"
          submitButtonText="Submit"
        />
        <View>
          {this.multiSelect.getSelectedItemsExt(selectedItems)}
        </View>
      </View>
    );
  }
}

The component takes 3 compulsory props - items, uniqueKey and onSelectedItemsChange. Other props are optional. The table below explains more.

Props

Note

• Tokenized selected items can be displayed in any other part of the view by adding a ref to the MultiSelect component like so ref={(component) => { this.multiSelect = component }}. Then add this to any part of the screen you want the tokens to show up: this.multiSelect.getSelectedItemsExt(selectedItems). The selectedItems argument passed into the above mentioned method is the same selectedItems passed as the main component selected items prop. (See example above).

• If users shouldn't be able to select any of the items in the dropdown list, set a disabled key to true in the item. Such item will be rendered in gray and won't be clickable.

• When using the single prop, selectedItems should still be passed in as an array of selected items keys. Also, when an item is selected in the single mode, the selected item is returned as an array of string.

• The items props must be passed as an array of objects with a compulsory name key present in each object as the name key is used to display the items in the options component.

• filterMethod partial example: searchTerm = "University of New" will return "University of New York", "University of New Orleans", "The University of New York" as well as "University of Columbia" and "New England Tech" due to partial matches.

• filterMethod full example: searchTerm = "University of New" will return" University of New York", "University of New Orleans", "The University of New York" because all three contain the substring "University of New"

Removing all selected items

To use, add ref to MultiSelect component in parent component, then call method against reference. i.e.

<MultiSelect
  ref={c => this._multiSelect = c}
  ...
/>

clearSelectedCategories = () => {
   this._multiSelect._removeAllItems();
};

Contributing

Contributions are welcome and will be fully credited.

Contributions are accepted via Pull Requests on Github.

Pull Requests

• Document any change in behaviour - Make sure the README.md and any other relevant documentation are kept up-to-date.

• Consider our release cycle - We try to follow SemVer v2.0.0. Randomly breaking public APIs is not an option.

• Create feature branches - Don't ask us to pull from your master branch.

• One pull request per feature - If you want to do more than one thing, send multiple pull requests.

• Send coherent history - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please squash them before submitting.

Issues

Check issues for current issues.

Contributors

Here is list of CONTRIBUTORS

License

The MIT License (MIT). Please see LICENSE for more information.