MultiSelectView component for react native to select multiple items smoothly with minimum efforts, it works on iOS and Android like a charm.
- 1.Run
npm i react-native-multiselect-view --save - 2.
import MultiSelectView from 'react-native-multiselect-view'
Add react-native-multiselect-view to your js file.
import MultiSelectView from 'react-native-multiselect-view'
Inside your component's render method, use MultiSelectView:
<MultiSelectView ref='list1' onSelectionStatusChange={this.onSelectionStatusChange} data={LoremIpsum} valueKey={'value'} /><MultiSelectView ref='list2' data={LoremIpsum1} activeContainerStyle={styles.activeCom} inactiveContainerStyle={styles.inactiveCom} activeTextStyle={styles.activeText} inactiveTextStyle={styles.inactiveText} /><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} />} />| 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 |
https://github.com/bgoyal2222/react-native-checkbox-component
MIT Licensed