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.|