1.0.5 • Published 7 years ago

react-native-multiselect-view v1.0.5

Weekly downloads
29
License
MIT
Repository
github
Last release
7 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

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