react-native-selectable-flist

0.0.2 • Public • Published

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.

Package Sidebar

Install

npm i react-native-selectable-flist

Weekly Downloads

2

Version

0.0.2

License

MIT

Unpacked Size

12.1 kB

Total Files

5

Last publish

Collaborators

  • lowen