react-native-multiselect-view2 v1.0.6
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
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
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
2 years ago