multiple selection picker for react-native
npm install react-native-multi-select-picker
> react-native-select-multiple is a customiseable flatlist picker that allows you to select multiple items.
!select-multip-select-picker
``sh`
npm install react-native-multi-select-picker
`js
import * as React from 'react'
import { StyleSheet, Text, View, TouchableOpacity, Image, ScrollView } from 'react-native'
import { MultipleSelectPicker } from 'react-native-multi-select-picker'
export default class App extends React.Component
state = {
selectectedItems: [],
isShownPicker: false
}
multiSelect
render() {
const items = [
{ label: 'itachi', value: '1' },
{ label: 'kakashi', value: '2' },
{ label: 'madara', value: '3' },
{ label: 'menato', value: '4' },
{ label: 'naruto', value: '5' },
{ label: 'hinata', value: '6' },
{ label: 'jiraya', value: '7' },
{ label: 'tsunade', value: '8' },
{ label: 'naruto', value: '9' },
{ label: 'sasuke', value: '10' },
{ label: 'hashirama', value: '11' },
{ label: 'tobirama', value: '12' },
{ label: 'pain', value: '13' },
{ label: 'sarada', value: '14' },
{ label: 'sakura', value: '15' },
{ label: 'asura', value: '16' },
{ label: 'indra', value: '17' }
]
return (
this.setState({ isShownPicker: !this.state.isShownPicker })
}}
style={{ height: 50, width: '100%', justifyContent: 'center', alignItems: 'center', backgroundColor: '#dadde3' }}
>
{this.state.isShownPicker ?
onSelectionsChange={(ele) => { this.setState({ selectectedItems: ele }) }}
selectedItems={this.state.selectectedItems}
buttonStyle={{ height: 100, justifyContent: 'center', alignItems: 'center' }}
buttonText='hello'
checkboxStyle={{ height: 20, width: 20 }}
/>
: null
}
{(this.state.selectectedItems || []).map((item: any, index) => {
return
{item.label}
})}
)
}
}
`
| Prop | Default | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| items | - | array | All items available in the list (array of string or { label, value }) |[]
| selectedItems | | array | The currently selected items (array of string or { label, value }) |func
| onSelectionsChange | - | | Callback called when a user selects or de-selects an item, passed (selections, item) |index
| keyExtractor | | func | keyExtractor prop for the FlatList |object
| checkboxSource | image | | Image source for the checkbox (unchecked). |object
| selectedCheckboxSource | image | | Image source for the checkbox (checked). |object
| flatListProps | {} | | Additional props for the flat list |object
| style | default styles | | Style for the FlatList container. |object
| rowStyle | default styles | | Style for the row container. |object
| checkboxStyle | default styles | | Style for the checkbox image. |object
| labelStyle | default styles | | Style for the text label. |object
| selectedRowStyle | default styles | | Style for the row container when selected. |object
| selectedCheckboxStyle | default styles | | Style for the checkbox image when selected. |object
| selectedLabelStyle | default styles | | Style for the text label when selected. |func` | Function for render label. |
| renderLabel | null |
Fell free to modify or open issues or to give pull requests..
----