https://github.com/ashrithks/react-native-selectable-flatlist

Single/Multi Select Flatlist
https://github.com/ashrithks/react-native-selectable-flatlist

flatlist multi-selection multiselect react-native selectable single-select single-selection

Last synced: 9 days ago
JSON representation

Single/Multi Select Flatlist

• Host: GitHub
• URL: https://github.com/ashrithks/react-native-selectable-flatlist
• Owner: ashrithks
• Created: 2019-05-24T07:17:48.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-24T09:49:30.000Z (over 6 years ago)
• Last Synced: 2025-10-01T15:43:26.191Z (4 months ago)
• Topics: flatlist, multi-selection, multiselect, react-native, selectable, single-select, single-selection
• Language: JavaScript
• Size: 9.77 KB
• Stars: 8
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

# react-native-selectable-flatlist

 Single/Multi Select Flatlist

## Getting started

`$ npm install react-native-selectable-flatlist --save`

## DEMO



  



## Usage

```javascript

import React, { Component } from 'react';

import { View, Text,StyleSheet } from 'react-native';

import SelectableFlatlist, { STATE } from 'react-native-selectable-flatlist';

class Example extends Component {

  itemsSelected = (selectedItem) => {

    console.log(selectedItem);

  }

  rowItem = (item) => (

    

      {item.test}

    

  )

render(){

  return(

    

         { this.itemsSelected(selectedItem); }}

          initialSelectedIndex={[0]}

          cellItemComponent={(item, otherProps) => this.rowItem(item)}

        />

    

  )

}

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    paddingTop: 40

  }

});

export default Example;

```

## Props

| name                      | required |    default     | description |

| ------------------------- | -------- | -------------- | ------------|

| data                      |   yes    |       []       | data is just a plain array. |

| state                     |   yes    |   STATE.EDIT   | STATE.DEFAULT, without selection. STATE.EDIT with selection. |

| cellItemComponent         |   yes    |                | Child row component to render next check/uncheck componenet. |

| touchStyles               |   no     |                | Styles for touch wrapper. |

| renderCheck               |   no     |                | Custom Component to render when a row is checked. |

| checkUncheckContainerStyle|   no     |                | Container style of check/uncheck default component. |

| checkColor                |   no     |     #00FF00    | Default Color of check icon. |

| checkUncheckSize          |   no     |       30       | Size(Number) of check/uncheck icon. |

| checkIcon                 |   no     |                | Custom check icon. |

| renderUncheck             |   no     |                | Custom Component to render when a row is unchecked. |

| uncheckColor              |   no     |     #dfdfdf    | Default Color of uncheck icon. |

| uncheckIcon               |   no     |                | Custom uncheck icon. |

| initialSelectedIndex      |   yes    |                | Array of initially selected item index(Eg:- [0] or [] or [0,1,6]). |

| itemsSelected             |   yes    |                | Callback function when an item checked/unchecked which returns selected items array. |

| multiSelect               |   yes    |      false     | Boolean, single/multi select, true refers to multiselect. |