{"id":23338243,"url":"https://github.com/yoeven/react-native-multiselect-sortable-flatlist","last_synced_at":"2026-05-10T02:50:32.651Z","repository":{"id":36462670,"uuid":"225030502","full_name":"yoeven/react-native-multiselect-sortable-flatlist","owner":"yoeven","description":"A React Native FlatList that is sortable with the ability to select multiple components","archived":false,"fork":false,"pushed_at":"2022-12-06T15:32:28.000Z","size":553,"stargazers_count":0,"open_issues_count":21,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-18T14:24:53.603Z","etag":null,"topics":["android","component","dynamic","flatlist","ios","list","multiselect","react-native","react-native-flatlist","selectable","sortable"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yoeven.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-30T15:17:45.000Z","updated_at":"2020-02-11T03:13:41.000Z","dependencies_parsed_at":"2023-01-17T01:45:34.451Z","dependency_job_id":null,"html_url":"https://github.com/yoeven/react-native-multiselect-sortable-flatlist","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoeven%2Freact-native-multiselect-sortable-flatlist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoeven%2Freact-native-multiselect-sortable-flatlist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoeven%2Freact-native-multiselect-sortable-flatlist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoeven%2Freact-native-multiselect-sortable-flatlist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yoeven","download_url":"https://codeload.github.com/yoeven/react-native-multiselect-sortable-flatlist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247665962,"owners_count":20975784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","component","dynamic","flatlist","ios","list","multiselect","react-native","react-native-flatlist","selectable","sortable"],"created_at":"2024-12-21T03:12:53.014Z","updated_at":"2026-05-10T02:50:32.621Z","avatar_url":"https://github.com/yoeven.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Multiselect Sortable FlatList\n\n\u003e A React Native FlatList that is sortable with the ability to select multiple list items.\n\n\u003cimg src=\"https://i.imgur.com/4DvHoXY.gif\" width=\"350\" /\u003e\n\n## Getting started\n\n### Install\n    npm install react-native-multiselect-sortable-flatlist --save\nor\n\n    yarn add react-native-multiselect-sortable-flatlist\n    \n### Usage\n\n    import MultiSelectSortableFlatlist from 'react-native-multiselect-sortable-flatlist';\n\n\n## Examples\n\n### Simple Example (Minimum needed for component to work)\n```js\n\u003cMultiSelectSortableFlatlist\n  data={this.state.ListData}\n  keyExtractor={(item, index) =\u003e item}\n  onSort={data =\u003e this.onSort(data)}\n  renderItem={({ item, index, selected }) =\u003e (\n    //Note: To view selection changes, your component should take a prop that will render changes based on \"selected\" bool\n    \u003cView style={selected ? styles.selectedWrapper : styles.wrapper}\u003e\n      \u003cView\n        style={[\n          styles.containerStyle,\n          {\n            borderColor: selected ? 'blue' : 'white',\n            borderWidth: selected ? 1.5 : 0,\n          },\n        ]}\u003e\n        \u003cText style={styles.CardText}\u003e{item}\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  )}\n/\u003e\n```\n### Advance Example\n ```js\nimport React from 'react';\nimport { Alert, Text, StyleSheet, StatusBar } from 'react-native';\nimport { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';\nimport SelectableCard from './compoenents/SelectableCard';\nimport Header from './compoenents/Header';\nimport MultiSelectSortableFlatlist from 'react-native-multiselect-sortable-flatlist';\n\nexport default class App extends React.PureComponent {\n  constructor(props) {\n    super(props);\n    this.state = {\n      ListData: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],\n      ItemsSelected: [],\n    };\n  }\n\n  onItemPress(item) {\n    Alert.alert('Alert', item + ' Pressed', [{ text: 'OK', onPress: () =\u003e console.log('OK Pressed') }], {\n      cancelable: true,\n    });\n  }\n\n  onSelectionChanged(selectedItems) {\n    this.setState({ ItemsSelected: selectedItems });\n  }\n\n  onSort(newListDataArray) {\n    this.setState({ ListData: newListDataArray });\n  }\n\n  render() {\n    return (\n      \u003cMultiSelectSortableFlatlist\n        ref={MultiSelectSortableFlatlist =\u003e (this.MultiSelectSortableFlatlist = MultiSelectSortableFlatlist)}\n        contentContainerStyle={styles.ListContainer}\n        ListHeaderComponentStyle={styles.HeaderStyle}\n        ListHeaderComponent={\n          \u003cHeader\n            SelectAll={() =\u003e this.MultiSelectSortableFlatlist.SelectAll()}\n            DeselectAll={() =\u003e this.MultiSelectSortableFlatlist.DeselectAll()}\n          /\u003e\n        }\n        data={this.state.ListData}\n        keyExtractor={(item, index) =\u003e item}\n        onItemTap={({ item, index }) =\u003e this.onItemPress(item)}\n        onItemSelected={({ selectedItems, item, index }) =\u003e this.onSelectionChanged(selectedItems)}\n        onItemDeselected={({ selectedItems, item, index }) =\u003e this.onSelectionChanged(selectedItems)}\n        onSort={data =\u003e this.onSort(data)}\n        renderItem={({ item, index, selected }) =\u003e (\n          //Note: To view selection changes, your component should take a prop that will render changes based on \"selected\" bool\n          \u003cSelectableCard Selected={selected}\u003e\n            \u003cText style={styles.CardText}\u003e{item}\u003c/Text\u003e\n          \u003c/SelectableCard\u003e\n        )}\n      /\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  ListContainer: {\n    paddingTop: StatusBar.currentHeight + hp(2),\n  },\n  CardText: {\n    textAlign: 'center',\n  },\n  HeaderStyle: {\n    paddingHorizontal: wp(4),\n  },\n});\n```\n\n### Manual Mode Example\n```js\nimport React from 'react';\nimport { Alert, View, Text, StyleSheet, StatusBar, TouchableWithoutFeedback } from 'react-native';\nimport { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';\nimport SelectableCard from './compoenents/SelectableCard';\nimport Header from './compoenents/Header';\nimport MultiSelectSortableFlatlist from 'react-native-multiselect-sortable-flatlist';\n\nexport default class App extends React.PureComponent {\n  constructor(props) {\n    super(props);\n    this.state = {\n      ListData: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],\n      ItemsSelected: [],\n    };\n  }\n\n  onItemPress(item) {\n    Alert.alert('Alert', item + ' Pressed', [{ text: 'OK' }], {\n      cancelable: true,\n    });\n  }\n\n  onSelectionChanged(selectedItems) {\n    this.setState({ ItemsSelected: selectedItems });\n  }\n\n  onSort(newListDataArray) {\n    this.setState({ ListData: newListDataArray });\n  }\n\n  render() {\n    return (\n      \u003cMultiSelectSortableFlatlist\n        ref={MultiSelectSortableFlatlist =\u003e (this.MultiSelectSortableFlatlist = MultiSelectSortableFlatlist)}\n        contentContainerStyle={styles.ListContainer}\n        ListHeaderComponentStyle={styles.HeaderStyle}\n        ListHeaderComponent={\n          \u003cHeader\n            SelectAll={() =\u003e this.MultiSelectSortableFlatlist.SelectAll()}\n            DeselectAll={() =\u003e this.MultiSelectSortableFlatlist.DeselectAll()}\n          /\u003e\n        }\n        mode=\"manual\"\n        data={this.state.ListData}\n        keyExtractor={(item, index) =\u003e item}\n        onItemSelected={({ selectedItems, item, index }) =\u003e this.onSelectionChanged(selectedItems)}\n        onItemDeselected={({ selectedItems, item, index }) =\u003e this.onSelectionChanged(selectedItems)}\n        onSort={data =\u003e this.onSort(data)}\n        renderItem={({ item, index, selected, drag, dragEnd, reverseSelection }) =\u003e (\n          //Create your Touchable component and control both selectability and sortability through exposed functions.\n          \u003cTouchableWithoutFeedback\n            onPress={() =\u003e reverseSelection()}\n            onLongPress={() =\u003e drag()}\n            onPressOut={() =\u003e dragEnd()}\u003e\n            \u003cView\u003e\n              \u003cSelectableCard Selected={selected}\u003e\n                \u003cText style={styles.CardText}\u003e{item}\u003c/Text\u003e\n              \u003c/SelectableCard\u003e\n            \u003c/View\u003e\n          \u003c/TouchableWithoutFeedback\u003e\n        )}\n      /\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  ListContainer: {\n    paddingTop: StatusBar.currentHeight + hp(2),\n  },\n  CardText: {\n    textAlign: 'center',\n  },\n  HeaderStyle: {\n    paddingHorizontal: wp(4),\n  },\n});\n```\n\n## Mobile Usage \n\n### Auto Mode\n - Tap on your item to get onItemTap called.\n - Press and hold on an item to start selecting phase.\n\t - After activating selecting phase, tap on any other item to select.\n\t - Tapping on a selected item will deselect that item.\n\t - Deselecting all items will stop selecting phase\n - Press and hold on an item and drag to move it.\n\t - Drop the item anywhere to sort.\n\n### Manual Mode\n- All controls are managed by calling exposed functions for each item in the `renderItem` prop.\n\t- Changing `mode` prop to `\"manual\"` will stop all Auto mode controls. \n\n## API\n\n### Props\n| Name | Description | Default | Type |\n|--|--|--|--|\n| data | Exaxtly like react-native [FlatList data prop](https://facebook.github.io/react-native/docs/flatlist#data). An array of data to pass your rendered components. | None **(Required)** | Array |\n| renderItem | `renderItem={({ item: object, index: number, selected: bool }) =\u003e \u003cYourComponent selected={selected} /\u003e}`. Similar to react-native [FlatList renderItem](https://facebook.github.io/react-native/docs/flatlist#renderitem), it provides both the item and index varables along with a new varable called `selected`, which allows you to provide [conditional rendering](https://reactjs.org/docs/conditional-rendering.html) as you see fit. | None **(Required)** | Func |\n| keyExtractor | Exaxtly like react-native [FlatList keyExtractor prop](https://facebook.github.io/react-native/docs/flatlist#keyextractor). Used to extract a unique key for a given item at the specified index. Also import to give unique key for selection to differentiate each item.| None **(Required)** | Func |\n| initialSelectedItems | An array of items that will be selected when component mounts. | None | Array |\n| onItemTap | `({ item: object, index: number })  =\u003e  void` Called when the touch is released. | None | Func |\n| onItemSelected | `({ selectedItems: array, item: object, index: number })  =\u003e  void` Called when items are selected. | None | Func |\n| onItemDeselected | `({ selectedItems: array, item: object, index: number })  =\u003e  void` Called when items are deselected. | None | Func |\n| onSort | `(data  =\u003e  void)` Called when list is resorted with same data in new array data. | None | Func |\n| comparingFactor | If data prop is an array of JSON Objects, you can pass a JSON key that would use the value for uniquely differentiating each item instead of using the item index number. | None | String |\n| selectable | Enable or Disable all list items from being selected. | true | Bool |\n| sortable | Enable or Disable list sorting ability. | true | Bool |\n| scrollPercent | Sets where scrolling begins. A value of `5` will scroll up if the finger is in the top 5% of the FlatList container and scroll down in the bottom 5%. | 5 | Number |\n| mode | Setting the mode to `\"manual\"` gives you full control on both sortability and selectability by exposing methods per item though the `renderItem` prop. When set to manual, the renderItem prop will look like this: `renderItem={({ item: object, index: number, selected: bool, drag: function, dragEnd: function, reverseSelection: function })`. Manual mode will ignore `selectable`, `sortable` and `onItemTap` props. | \"auto\" | String |\n\nAll [FlatList props](https://facebook.github.io/react-native/docs/flatlist#props) are available too as the underlying component is a FlatList\n\n#### renderItem Prop Variables\n| Name | Description | Type |\n|--|--|--|\n| item | The item from `data` being rendered. | Object |\n| index | The index corresponding to this item in the `data` array. | Number |\n| selected | If selection is active on the item. | Bool |\n| drag | Call this to start dragging the process on the current item. The item will follow the finger till `dragEnd` is called. | Func |\n| dragEnd | Call this to end dragging and sort the list. | Func |\n| reverseSelection | Call this to reverse the current selection of the item. If selected, item will become unselected and if unselected, item will become selected. | Func |\n\n### Functions\nUse refs to call the functions on an instance of the component.\n\n| Name | Params |Description | Returns |\n|--|--|--|--|\n| SelectAll() | None |Selects all of the items in the list and returns an array. | Array |\n| DeselectAll() | None |Deselects all of the items in the list and returns an array. | Array |\n| SelectionOverwrite() | SelectedItems: array |Manually overwrite the current selection array with your own selection array with items passed to `data`. | Null |\n\n## Running the example expo app\n\n 1. `git clone https://github.com/yoeven/react-native-multiselect-sortable-flatlist.git`\n 2. `cd react-native-multiselect-sortable-flatlist/examples`\n 3. `npm install or yarn`\n 4. `npm start or yarn start`\n\n## How to contribute\nCheck out this [simple tutorial](https://github.com/firstcontributions/first-contributions)\n- Use prettier to format all code by running `yarn run format`.\n- Test code locally by using examples project with expo or your project before requesting for a pull request.\n\n## How to test locally\n\n 1. After making changes to the project code, `cd` into the root of the project\n 2. Run `npm pack` which will build a package file with an extension `.tgz`\n 3. Now `cd` into your react-native project folder or the *examples* expo project folder and run `yarn add \u003cfilename\u003e.tgz` or `npm install \u003cfilename\u003e.tgz`\n 4. Run your project and test it works\n 5. If you are installing the package with the same version number, yarn and npm install the cached version instead, use `yarn cache clean` before adding the package into your project\n\n## TODO\n\n - [x] Expose functions for manual select and sort \n - [ ] Create version 2.0.0 with [react-native-draggable-flatlist](https://github.com/computerjazz/react-native-draggable-flatlist) ^2.0.0 as sorting base for better perfomance.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoeven%2Freact-native-multiselect-sortable-flatlist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoeven%2Freact-native-multiselect-sortable-flatlist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoeven%2Freact-native-multiselect-sortable-flatlist/lists"}