react-native-selectable-flist v0.0.2

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: