{"id":15036480,"url":"https://github.com/computerjazz/react-native-draggable-flatlist","last_synced_at":"2025-04-08T22:18:57.753Z","repository":{"id":37628262,"uuid":"138436755","full_name":"computerjazz/react-native-draggable-flatlist","owner":"computerjazz","description":"A drag-and-drop-enabled FlatList for React Native","archived":false,"fork":false,"pushed_at":"2024-09-21T20:23:08.000Z","size":1819,"stargazers_count":1937,"open_issues_count":179,"forks_count":406,"subscribers_count":10,"default_branch":"main","last_synced_at":"2024-10-29T11:30:31.518Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/computerjazz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["computerjazz"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2018-06-23T22:07:51.000Z","updated_at":"2024-10-29T06:18:57.000Z","dependencies_parsed_at":"2023-02-09T06:46:31.719Z","dependency_job_id":"1d6068d1-4d93-43b2-9a9b-b85323897049","html_url":"https://github.com/computerjazz/react-native-draggable-flatlist","commit_stats":{"total_commits":348,"total_committers":34,"mean_commits":"10.235294117647058","dds":0.3390804597701149,"last_synced_commit":"3061e3055cbe0a9c7665b9c4b90912c30f668a3d"},"previous_names":[],"tags_count":84,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computerjazz%2Freact-native-draggable-flatlist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computerjazz%2Freact-native-draggable-flatlist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computerjazz%2Freact-native-draggable-flatlist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computerjazz%2Freact-native-draggable-flatlist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/computerjazz","download_url":"https://codeload.github.com/computerjazz/react-native-draggable-flatlist/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247359230,"owners_count":20926387,"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":[],"created_at":"2024-09-24T20:31:18.010Z","updated_at":"2025-04-08T22:18:57.737Z","avatar_url":"https://github.com/computerjazz.png","language":"TypeScript","funding_links":["https://github.com/sponsors/computerjazz"],"categories":["TypeScript"],"sub_categories":[],"readme":"\n⚠️ You are viewing the README for v4 (view\n[v3](https://github.com/computerjazz/react-native-draggable-flatlist/blob/17897b3b5d771e854c9ccbd952332f5deabbd85d/README.md),\n[v2](https://github.com/computerjazz/react-native-draggable-flatlist/blob/b60c23035fc0371a735cde1d000e9ad7f8e0f049/README.md)\n)\n\n# React Native Draggable FlatList\n\nA drag-and-drop-enabled FlatList component for React Native.\u003cbr /\u003e\nFully native interactions powered by [Reanimated](https://github.com/kmagiera/react-native-reanimated) and [React Native Gesture Handler](https://github.com/kmagiera/react-native-gesture-handler).\u003cbr /\u003e\u003cbr /\u003e\nTo use swipeable list items in a DraggableFlatList see [React Native Swipeable Item](https://github.com/computerjazz/react-native-swipeable-item).\n\n![Draggable FlatList demo](https://i.imgur.com/xHCylq1.gif)\n\n## Install\n\n1. Follow installation instructions for [reanimated](https://github.com/kmagiera/react-native-reanimated) and [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler). RNGH may require you to make changes to `MainActivity.java`. Be sure to [follow all Android instructions!](https://docs.swmansion.com/react-native-gesture-handler/docs/#android)\n2. Install this package using `npm` or `yarn`\n\nwith `npm`:\n\n```\nnpm install --save react-native-draggable-flatlist\n```\n\nwith `yarn`:\n\n```\nyarn add react-native-draggable-flatlist\n```\n\n3. `import DraggableFlatList from 'react-native-draggable-flatlist'`\n\n## Api\n\n### Props\n\nAll props are spread onto underlying [FlatList](https://facebook.github.io/react-native/docs/flatlist)\n\n| Name                       | Type                                                                                      | Description                             \n| :------------------------- | :---------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------\n| `data`                     | `T[]`                                                                                     | Items to be rendered.                                                                                                                                                                                              |\n| `ref`                     | `React.RefObject\u003cFlatList\u003cT\u003e\u003e`                                                                                     | FlatList ref to be forwarded to the underlying FlatList.                                                                                                                                                                                      |\n| `renderItem`               | `(params: { item: T, getIndex: () =\u003e number \\| undefined, drag: () =\u003e void, isActive: boolean}) =\u003e JSX.Element` | Call `drag` when the row should become active (i.e. in an `onLongPress` or `onPressIn`).                                                                                                                           |\n| `renderPlaceholder`        | `(params: { item: T, index: number }) =\u003e React.ReactNode`                                 | Component to be rendered underneath the hovering component                                                                                                                                                         |\n| `keyExtractor`             | `(item: T, index: number) =\u003e string`                                                      | Unique key for each item (required)                                                                                                                                                                                          |\n| `onDragBegin`              | `(index: number) =\u003e void`                                                                 | Called when row becomes active.                                                                                                                                                                                    |\n| `onRelease`                | `(index: number) =\u003e void`                                                                 | Called when active row touch ends.                                                                                                                                                                                 |\n| `onDragEnd`                | `(params: { data: T[], from: number, to: number }) =\u003e void`                               | Called after animation has completed. Returns updated ordering of `data`                                                                                                                                           |\n| `autoscrollThreshold`      | `number`                                                                                  | Distance from edge of container where list begins to autoscroll when dragging.                                                                                                                                     |\n| `autoscrollSpeed`          | `number`                                                                                  | Determines how fast the list autoscrolls.                                                                                                                                                                          |\n| `animationConfig`          | `Partial\u003cWithSpringConfig\u003e`                                                          | Configure list animations. See [reanimated spring config](https://docs.swmansion.com/react-native-reanimated/docs/api/animations/withSpring/#options-object)                                          |\n| `activationDistance`       | `number`                                                                                  | Distance a finger must travel before the gesture handler activates. Useful when using a draggable list within a TabNavigator so that the list does not capture navigator gestures.                                 |\n| `onScrollOffsetChange`     | `(offset: number) =\u003e void`                                                                | Called with scroll offset. Stand-in for `onScroll`.                                                                                                                                                                |\n| `onPlaceholderIndexChange` | `(index: number) =\u003e void`                                                                 | Called when the index of the placeholder changes                                                                                                                                                                   |\n| `dragItemOverflow`         | `boolean`                                                                                 | If true, dragged item follows finger beyond list boundary.                                                                                                                                                         |\n| `dragHitSlop`              | `object: {top: number, left: number, bottom: number, right: number}`                      | Enables control over what part of the connected view area can be used to begin recognizing the gesture. Numbers need to be non-positive (only possible to reduce responsive area).                                 |\n| `debug`                    | `boolean`                                                                                 | Enables debug logging and animation debugger.                                                                                                                                                                      |\n| `containerStyle`           | `StyleProp\u003cViewStyle\u003e`                                                                    | Style of the main component.                                                                                                                                                                                       |\n| `simultaneousHandlers`     | `React.Ref\u003cany\u003e` or `React.Ref\u003cany\u003e[]`                                                    | References to other gesture handlers, mainly useful when using this component within a `ScrollView`. See [Cross handler interactions](https://docs.swmansion.com/react-native-gesture-handler/docs/interactions/). |\n|`itemEnteringAnimation`| Reanimated `AnimationBuilder` ([docs](https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/entryAnimations)) | Animation when item is added to list.|\n|`itemExitingAnimation`| Reanimated `AnimationBuilder` ([docs](https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/exitAnimations))| Animation when item is removed from list.|\n|`itemLayoutAnimation`| Reanimated `AnimationBuilder` ([docs](https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/layoutTransitions))| Animation when list items change position (`enableLayoutAnimationExperimental` prop must be `true`).|\n|`enableLayoutAnimationExperimental`| `boolean`| Flag to turn on experimental support for `itemLayoutAnimation`.|\n\n\n\n## Cell Decorators\n\nCell Decorators are an easy way to add common hover animations. For example, wrapping `renderItem` in the `\u003cScaleDecorator\u003e` component will automatically scale up the active item while hovering (see example below).\n\n`ScaleDecorator`, `ShadowDecorator`, and `OpacityDecorator` are currently exported. Developers may create their own custom decorators using the animated values provided by the `useOnCellActiveAnimation` hook.\n\n## Nesting DraggableFlatLists\n\nIt's possible to render multiple `DraggableFlatList` components within a single scrollable parent by wrapping one or more `NestableDraggableFlatList` components within an outer `NestableScrollContainer` component. \n\n`NestableScrollContainer` extends the `ScrollView` from `react-native-gesture-handler`, and `NestableDraggableFlatList` extends `DraggableFlatList`, so all available props may be passed into both of them.\n\n\u003e Note: When using NestableDraggableFlatLists, all React Native warnings about nested list performance will be disabled. \n\n```tsx\nimport { NestableScrollContainer, NestableDraggableFlatList } from \"react-native-draggable-flatlist\"\n\n...\n\n  const [data1, setData1] = useState(initialData1);\n  const [data2, setData2] = useState(initialData2);\n  const [data3, setData3] = useState(initialData3);\n\n  return (\n    \u003cNestableScrollContainer\u003e\n      \u003cHeader text='List 1' /\u003e\n      \u003cNestableDraggableFlatList\n        data={data1}\n        renderItem={renderItem}\n        keyExtractor={keyExtractor}\n        onDragEnd={({ data }) =\u003e setData1(data)}\n      /\u003e\n      \u003cHeader text='List 2' /\u003e\n      \u003cNestableDraggableFlatList\n        data={data2}\n        renderItem={renderItem}\n        keyExtractor={keyExtractor}\n        onDragEnd={({ data }) =\u003e setData2(data)}\n      /\u003e\n      \u003cHeader text='List 3' /\u003e\n      \u003cNestableDraggableFlatList\n        data={data3}\n        renderItem={renderItem}\n        keyExtractor={keyExtractor}\n        onDragEnd={({ data }) =\u003e setData3(data)}\n      /\u003e\n    \u003c/NestableScrollContainer\u003e\n  )\n```\n\n![Nested DraggableFlatList demo](https://i.imgur.com/Kv0aj4l.gif)\n\n## Example\n\nExample snack: https://snack.expo.dev/@computerjazz/draggable-flatlist-examples \u003cbr /\u003e\n\n```typescript\nimport React, { useState } from \"react\";\nimport { Text, View, StyleSheet, TouchableOpacity } from \"react-native\";\nimport DraggableFlatList, {\n  ScaleDecorator,\n} from \"react-native-draggable-flatlist\";\n\nconst NUM_ITEMS = 10;\nfunction getColor(i: number) {\n  const multiplier = 255 / (NUM_ITEMS - 1);\n  const colorVal = i * multiplier;\n  return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;\n}\n\ntype Item = {\n  key: string;\n  label: string;\n  height: number;\n  width: number;\n  backgroundColor: string;\n};\n\nconst initialData: Item[] = [...Array(NUM_ITEMS)].map((d, index) =\u003e {\n  const backgroundColor = getColor(index);\n  return {\n    key: `item-${index}`,\n    label: String(index) + \"\",\n    height: 100,\n    width: 60 + Math.random() * 40,\n    backgroundColor,\n  };\n});\n\nexport default function App() {\n  const [data, setData] = useState(initialData);\n\n  const renderItem = ({ item, drag, isActive }: RenderItemParams\u003cItem\u003e) =\u003e {\n    return (\n      \u003cScaleDecorator\u003e\n        \u003cTouchableOpacity\n          onLongPress={drag}\n          disabled={isActive}\n          style={[\n            styles.rowItem,\n            { backgroundColor: isActive ? \"red\" : item.backgroundColor },\n          ]}\n        \u003e\n          \u003cText style={styles.text}\u003e{item.label}\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/ScaleDecorator\u003e\n    );\n  };\n\n  return (\n    \u003cDraggableFlatList\n      data={data}\n      onDragEnd={({ data }) =\u003e setData(data)}\n      keyExtractor={(item) =\u003e item.key}\n      renderItem={renderItem}\n    /\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  rowItem: {\n    height: 100,\n    width: 100,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  text: {\n    color: \"white\",\n    fontSize: 24,\n    fontWeight: \"bold\",\n    textAlign: \"center\",\n  },\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomputerjazz%2Freact-native-draggable-flatlist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomputerjazz%2Freact-native-draggable-flatlist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomputerjazz%2Freact-native-draggable-flatlist/lists"}