Multiple / Single Choice Flatlist

Advantages :

• Completely customizable
• Supports all FlatList props
• Supports both multiple mode and single mode

Version 1.0.9

• bug fixed

1. Install

npm install --save react-native-multichoice-flatlist

2. Usage

import {MultiChoiceFlatList} from "react-native-multichoice-flatlist";

...

<MultiChoiceFlatList
    ref={"mc"}
    data={[
        {id: 1, title: "First Item" , anotherProp:"the other prop" },
        {id: 2, title: "Second Item" , anotherProp:"the other prop" },
        {id: 3, title: "Third Item" , anotherProp:"the other prop" },
        {id: 4, title: "Fourth Item" , anotherProp:"the other prop" },
        {id: 5, title: "Fifth Item" , anotherProp:"the other prop" },
    ]}
    renderItem={(item, index) => {
        return (
            <View>
                <Text style={{backgroundColor:'green'}}>
                    {item.title}
                </Text>
            </View>
        )
    }}

    renderSelectedItem={(item, index) => {
       return (
           <View>
                <Text>
                    {item.title}
                </Text>
            </View>
        )
    }}

    onSelectedIndexesChange={(item, index, selected) => {
        console.log("item ", item);
        console.log("index ", index);
        console.log("is selected ", selected);
    }}

    singleMode={false}
    selectedIndexes={[2,3]}
    keyExtractor={(item, index) => item.id}

/>

...

Props

|Prop| Type | Default | Description | |--|--|--|--| | data | array | [] | the data to be shown (as orginal flatlist) | | renderItem | function | - | renders non selected item | | renderSelectedItem | function | - | renders selected item | | singleMode | boolean | true | if 'true' just one item can be selected, if 'false' it's multichoice | | selectedIndex | int | 0 | ( ONLY WHEN 'singleMode=true' ) default selected item | | selectedIndexes | array of int | [] | ( ONLY WHEN 'singleMode=false' ) default selected items | | onSelectedIndexesChange | function | - | listener function for item selection which provides touched item , index of touched item, a boolean which shows if the item is selected or not | | keyExtractor | function | - | is required for rerendering the flatlist when data changes. |

Methods

| Method | Return Type | Description | |--|--|--| | getSelectedItems | array | returns an array containing selected items | | getNonSelectedItems | array | returns an array containing non selected items |

Screenshots

|Screenshots| |--| ||