react-native-multiselect-view

MultiSelectView component for react native to select multiple items smoothly with minimum efforts, it works on iOS and Android like a charm.

Content

• Modified Version
• Demo
• Installation
• Getting started
• API

Modified Version

Modified Version

This version of react-native-multiselect-view is a tweaked version of the original. It includes the following modification:

In line 28 of the index.js file, the code was updated to fix an error that displayed "valueKey doesn't exist" when trying to create a multiselect view from an array of objects. The change made was adding props in value: item[props.valueKey]:

constructor(props) {
  super(props);
  this.onTouch = this.onTouch.bind(this);
  let newData = [];
  props.data.forEach((item) => {
    if (typeof item !== 'string' && typeof item !== 'number') {
      newData.push({ ...item, value: item[props.valueKey], checked: false });
    } else {
      newData.push({ value: item, checked: false });
    }
  });
  this.state = {
    data: newData,
  };
}

Please note that this modified version is intended for a specific use case and may not be compatible with the original package or receive updates from the original maintainer.

Demo

• Examples

Installation

• 1.Run npm i react-native-multiselect-view --save
• 2.import MultiSelectView from 'react-native-multiselect-view'

Getting started

Add react-native-multiselect-view to your js file.

import MultiSelectView from 'react-native-multiselect-view'

Inside your component's render method, use MultiSelectView:

Example 1

<MultiSelectView
    ref='list1'
    onSelectionStatusChange={this.onSelectionStatusChange}
    data={LoremIpsum}
    valueKey={'value'}
/>

Example 2

<MultiSelectView
    ref='list2'
    data={LoremIpsum1}
    activeContainerStyle={styles.activeCom}
    inactiveContainerStyle={styles.inactiveCom}
    activeTextStyle={styles.activeText}
    inactiveTextStyle={styles.inactiveText}
/>

Example 3

<MultiSelectView
    ref='list3'
    data={LoremIpsum2}
    activeIcon={<Ionicons name='md-checkmark-circle' size={16} style={styles.icon} />}
    inactiveIcon={<Ionicons name='md-log-in' size={16} style={styles.icon} />}
/>

API

Props | Type | Optional | Default | Description ----------------- | -------- | -------- | ----------- | ----------- activeContainerStyle | View.propTypes.style |true | backgroundColor: '#BDD358',borderColor: 'transparent'|Active or selected Container Style inactiveContainerStyle| View.propTypes.style | true | |Inactive Container Style activeTextStyle | Text.propTypes.style |true | color: '#fff' | Style for Active Text inactiveTextStyle | Text.propTypes.style | true | | Style for Inactive Text activeIcon | PropTypes.element | true | Icon | Icon for Active Container inactiveIcon | PropTypes.element | true | false | Icon for Inactive Container onSelectionStatusChange | PropTypes.func | true | | Function to perform on any item selection state change valueKey | PropTypes.string | false if data is array of object | | Text or key to show in container data | PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object]) | false | | Array of list to be displayed

Other popular components

https://github.com/bgoyal2222/react-native-checkbox-component

MIT Licensed