1.0.11 • Published 6 years ago

react-native-multi-select-picker v1.0.11

Weekly downloads
48
License
ISC
Repository
github
Last release
6 years ago

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

Install

npm install react-native-multi-select-picker

Usage

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<any, {}> {
    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 (
            <ScrollView>
                <TouchableOpacity
                    onPress={() => {
                        this.setState({ isShownPicker: !this.state.isShownPicker })
                    }}
                    style={{ height: 50, width: '100%', justifyContent: 'center', alignItems: 'center', backgroundColor: '#dadde3' }}
                >
                    <Text>Picker</Text>
                </TouchableOpacity>
                {this.state.isShownPicker ? <MultipleSelectPicker
                    items={items}
                    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 <Text key={index}>
                        {item.label}
                    </Text>
                })}

            </ScrollView >
        )
    }
}

Properties

PropDefaultTypeDescription
items-arrayAll items available in the list (array of string or { label, value })
selectedItems[]arrayThe currently selected items (array of string or { label, value })
onSelectionsChange-funcCallback called when a user selects or de-selects an item, passed (selections, item)
keyExtractorindexfunckeyExtractor prop for the FlatList
checkboxSourceimageobjectImage source for the checkbox (unchecked).
selectedCheckboxSourceimageobjectImage source for the checkbox (checked).
flatListProps{}objectAdditional props for the flat list
styledefault stylesobjectStyle for the FlatList container.
rowStyledefault stylesobjectStyle for the row container.
checkboxStyledefault stylesobjectStyle for the checkbox image.
labelStyledefault stylesobjectStyle for the text label.
selectedRowStyledefault stylesobjectStyle for the row container when selected.
selectedCheckboxStyledefault stylesobjectStyle for the checkbox image when selected.
selectedLabelStyledefault stylesobjectStyle for the text label when selected.
renderLabelnullfuncFunction for render label.

Contribute

Fell free to modify or open issues or to give pull requests..

License

ISC