1.0.6 • Published 2 years ago

react-native-multiselect-view2 v1.0.6

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

react-native-multiselect-view

release NPM version PRs Welcome License MIT

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

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

Screenshots

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

PropsTypeOptionalDefaultDescription
activeContainerStyleView.propTypes.styletruebackgroundColor: '#BDD358',borderColor: 'transparent'Active or selected Container Style
inactiveContainerStyleView.propTypes.styletrueInactive Container Style
activeTextStyleText.propTypes.styletruecolor: '#fff'Style for Active Text
inactiveTextStyleText.propTypes.styletrueStyle for Inactive Text
activeIconPropTypes.elementtrueIconIcon for Active Container
inactiveIconPropTypes.elementtruefalseIcon for Inactive Container
onSelectionStatusChangePropTypes.functrueFunction to perform on any item selection state change
valueKeyPropTypes.stringfalse if data is array of objectText or key to show in container
dataPropTypes.arrayOf(PropTypes.oneOfType(PropTypes.number, PropTypes.string, PropTypes.object)falseArray of list to be displayed

Other popular components

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

MIT Licensed