react-native-selectable-flist

react-native-selectabble-flist

Partial refresh selection list for React native. Reduce global list refresh and improve performance

Installation:

yarn add react-native-selectable-flist

Example:

import SelectableFlatList from 'react-native-selectable-flist'
 
 <SelectableFlatList
   data={cities}
   uniqueKey={'code'}
   isMultipleSelect={true}
   // singleSelectedValue={'130300'}
   // singleSelectedIndex={1}
   renderSeparatorLine={() => <View style={{ height: 1, backgroundColor: '#CCCCCC' }} />}
   defaultSelectKeyList={['110100', '120100', '130100', '130200', '130400']}
   defaultSelectIndexList={[1, 3, 4, 6, 7, 8, , 3, 6, 8, 50, 51, 52]}
   // renderItem={this.renderItem}
   renderItemNoTouchable={this.renderItemNoTouchable}
   selectedCallback={(item, selected) => {
     console.log(selected + 'stringify:' + JSON.stringify(item))
   }}
 />
 
 renderItem(itemData, selected, index) {
    let avtarColor = '#5CACEE'
    if (selected) {
      avtarColor = 'red'
    }
    return (
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <View style={{ width: 40, height: 40, margin: 20, backgroundColor: avtarColor }} />
        <Text style={{ color: avtarColor, fontSize: 20 }}>{itemData.name}</Text>
      </View>
    )
  }
 
 renderItemNoTouchable(itemData, selected, index, toggleSelected) {
    let avtarColor = '#5CACEE'
    if (selected) {
      avtarColor = 'red'
    }
    return (
      <TouchableOpacity activeOpacity={0.8} onPress={() => { toggleSelected() }}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <View style={{ width: 40, height: 40, margin: 20, backgroundColor: avtarColor }} />
          <Text style={{ color: avtarColor, fontSize: 20 }}>{itemData.name}</Text>
        </View>
      </TouchableOpacity>
    )
  }
 

Props:

name	required	default	Type	description
isMultipleSelect	no	true	Boolean	single/multi select, true refers to multi select.
renderItem	yes		Function	renderItem(itemData, selected, index). Takes an item from data and renders it into the list.
renderItemNoTouchable	no		Function	like renderItem(), but it's need to implement touch events.
data	yes	[]	Array[Object]	data list.
selectedCallback	yes		Function	Callback function when an item checked/unchecked which returns.
renderSeparatorLine	no		Function	FlatList ItemSeparatorComponent.
keyExtractor	no	item.toString() + index	Func	FlatList keyExtractor.
uniqueKey	no		tring	data field name, It determines which field value used to selected. If uniqueKey is valid, the 'singleSelectedValue' and 'defaultSelectValueList' are work, if not set, the 'singleSelectedIndex' and 'defaultSelectIndexList' are work
singleSelectedValue	no		string	single default selected value. the uniqueKey must valid. eg: data:[{key:'A],[{key:'B'} , uniqueKey={'key} is valid, singleSelectedValue='A' default select A
singleSelectedIndex	no		number	single default selected index.
defaultSelectIndexList	no		Array[number]	multiple default selected value list.
defaultSelectValueList	no		Array[string]	multiple default selected value list. the uniqueKey must valid.