react-native-multi-select-picker

multiple selection picker for react-native

Showing:

Popularity

Downloads/wk

60

GitHub Stars

4

Maintenance

Last Commit

2yrs ago

Contributors

1

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

No?

Readme

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


Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial