🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A customizable ListView that allows you to select multiple rows.

Form React Native

Documentation

react-native-select-multiple

dependencies Status

A customiseable FlatList that allows you to select multiple rows.

select-multiple

Install

npm install react-native-select-multiple

Usage

import React, { Component } from 'react' import { View } from 'react-native' import SelectMultiple from 'react-native-select-multiple'  const fruits = ['Apples', 'Oranges', 'Pears'] // --- OR --- // const fruits = [ //   { label: 'Apples', value: 'appls' }, //   { label: 'Oranges', value: 'orngs' }, //   { label: 'Pears', value: 'pears' } // ]  class App extends Component {   state = { selectedFruits: [] }    onSelectionsChange = (selectedFruits) => {     // selectedFruits is array of { label, value }     this.setState({ selectedFruits })   }    render () {     return (       <View>         <SelectMultiple           items={fruits}           selectedItems={this.state.selectedFruits}           onSelectionsChange={this.onSelectionsChange} />       </View>     )   } } export default App 

Customize label

import React, { Component } from 'react' import { View, Text, Image } from 'react-native' import SelectMultiple from 'react-native-select-multiple'  const fruits = ['Apples', 'Oranges', 'Pears'] // --- OR --- // const fruits = [ //   { label: 'Apples', value: 'appls' }, //   { label: 'Oranges', value: 'orngs' }, //   { label: 'Pears', value: 'pears' } // ]  const renderLabel = (label, style) => {   return (     <View style={{flexDirection: 'row', alignItems: 'center'}}>       <Image style={{width: 42, height: 42}} source={{uri: 'https://dummyimage.com/100x100/52c25a/fff&text=S'}} />       <View style={{marginLeft: 10}}>         <Text style={style}>{label}</Text>       </View>     </View>   ) }  class App extends Component {   state = { selectedFruits: [] }    onSelectionsChange = (selectedFruits) => {     // selectedFruits is array of { label, value }     this.setState({ selectedFruits })   }    render () {     return (       <View>         <SelectMultiple           items={fruits}           renderLabel={renderLabel}           selectedItems={this.state.selectedFruits}           onSelectionsChange={this.onSelectionsChange} />       </View>     )   } }

Properties

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 })
onSelectionsChange - func Callback called when a user selects or de-selects an item, passed (selections, item)
keyExtractor index func keyExtractor for the FlatList
checkboxSource image object Image source for the checkbox (unchecked).
selectedCheckboxSource image object Image source for the checkbox (checked).
flatListProps {} object Additional props for the flat list
style default styles object Style for the FlatList container.
rowStyle default styles object Style for the row container.
checkboxStyle default styles object Style for the checkbox image.
labelStyle default styles object Style for the text label.
selectedRowStyle default styles object Style for the row container when selected.
selectedCheckboxStyle default styles object Style for the checkbox image when selected.
selectedLabelStyle default styles object Style for the text label when selected.
renderLabel null func Function for render label.

Contribute

Feel free to dive in! Open an issue or submit PRs.

License

ISC © TABLEFLIP


A (╯°□°)╯︵TABLEFLIP side project.

js-standard-style


You May Also Like