{"_id":"@bwjohns4/react-native-draggable-flatlist","name":"@bwjohns4/react-native-draggable-flatlist","dist-tags":{"latest":"4.0.1-patch"},"versions":{"4.0.1-patch":{"name":"@bwjohns4/react-native-draggable-flatlist","version":"4.0.1-patch","description":"A drag-and-drop-enabled FlatList component for React Native","main":"lib/commonjs/index","module":"lib/module/index","react-native":"src/index.tsx","types":"lib/typescript/index.d.ts","scripts":{"test":"jest","typecheck":"tsc --skipLibCheck --noEmit","build":"bob build"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"repository":{"type":"git","url":"git+https://github.com/computerjazz/react-native-draggable-flatlist.git"},"keywords":["react-native","sortable","draggable","flatlist","drag","drop","sort","list"],"author":{"name":"Daniel Merrill"},"license":"MIT","bugs":{"url":"https://github.com/computerjazz/react-native-draggable-flatlist/issues"},"jest":{"preset":"react-native","setupFiles":["./node_modules/react-native-gesture-handler/jestSetup.js","./jest-setup.js"],"transform":{"^.+\\.[t|j]sx?$":"babel-jest"},"transformIgnorePatterns":[]},"homepage":"https://github.com/computerjazz/react-native-draggable-flatlist#readme","peerDependencies":{"react-native":">=0.64.0","react-native-gesture-handler":">=2.0.0","react-native-reanimated":">=2.8.0"},"devDependencies":{"@testing-library/react-native":"^7.2.0","@types/react":"^17.0.5","@types/react-native":"^0.64.5","babel-jest":"^26.6.3","husky":"^4.2.0","jest":"^26.6.3","metro-react-native-babel-preset":"^0.71.0","prettier":"^2.2.1","pretty-quick":"^2.0.1","react":"^17.0.2","react-native":"^0.64.0","react-native-builder-bob":"^0.18.2","react-native-gesture-handler":"^2.1.0","react-native-reanimated":"^2.8.0","react-test-renderer":"^17.0.2","typescript":"^4.2.4"},"react-native-builder-bob":{"source":"src","output":"lib","targets":[["commonjs",{"configFile":"./babel.config.js"}],"module","typescript"]},"dependencies":{"@babel/preset-typescript":"^7.17.12"},"_id":"@bwjohns4/react-native-draggable-flatlist@4.0.1-patch","gitHead":"28736f74d7293cf9673fcd0445a0f99abca1b6b2","_nodeVersion":"20.15.1","_npmVersion":"10.7.0","dist":{"integrity":"sha512-ZqRx7Q+89YrIq4iHzymmGiv1hcQabF6kqawFqYqI999BwDzII70ReVw5KnE4Y2YQdkXiIBTj3YIZXGfK6sxNUQ==","shasum":"7a218a96cabaf1d5a48e52705ac318c18062bc2b","tarball":"https://registry.npmjs.org/@bwjohns4/react-native-draggable-flatlist/-/react-native-draggable-flatlist-4.0.1-patch.tgz","fileCount":149,"unpackedSize":522370,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcfWRSRBGLK8GExTi8aBFstL7BLBvrlH3nzykt4N2v/AIhANJBGVSinZXnNpmEhjf3EaNrYqX5dn3Hw35D6S5swZjl"}]},"_npmUser":{"name":"bwjohns4","email":"bwjohns4@gmail.com"},"directories":{},"maintainers":[{"name":"bwjohns4","email":"bwjohns4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-draggable-flatlist_4.0.1-patch_1726136443625_0.20636368633611957"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-12T10:20:43.490Z","4.0.1-patch":"2024-09-12T10:20:43.753Z","modified":"2024-09-12T10:20:43.986Z"},"maintainers":[{"name":"bwjohns4","email":"bwjohns4@gmail.com"}],"description":"A drag-and-drop-enabled FlatList component for React Native","homepage":"https://github.com/computerjazz/react-native-draggable-flatlist#readme","keywords":["react-native","sortable","draggable","flatlist","drag","drop","sort","list"],"repository":{"type":"git","url":"git+https://github.com/computerjazz/react-native-draggable-flatlist.git"},"author":{"name":"Daniel Merrill"},"bugs":{"url":"https://github.com/computerjazz/react-native-draggable-flatlist/issues"},"license":"MIT","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.<br />\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).<br /><br />\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<FlatList<T>>`                                                                                     | FlatList ref to be forwarded to the underlying FlatList.                                                                                                                                                                                      |\n| `renderItem`               | `(params: { item: T, getIndex: () => number \\| undefined, drag: () => void, isActive: boolean}) => JSX.Element` | Call `drag` when the row should become active (i.e. in an `onLongPress` or `onPressIn`).                                                                                                                           |\n| `renderPlaceholder`        | `(params: { item: T, index: number }) => React.ReactNode`                                 | Component to be rendered underneath the hovering component                                                                                                                                                         |\n| `keyExtractor`             | `(item: T, index: number) => string`                                                      | Unique key for each item (required)                                                                                                                                                                                          |\n| `onDragBegin`              | `(index: number) => void`                                                                 | Called when row becomes active.                                                                                                                                                                                    |\n| `onRelease`                | `(index: number) => void`                                                                 | Called when active row touch ends.                                                                                                                                                                                 |\n| `onDragEnd`                | `(params: { data: T[], from: number, to: number }) => 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<WithSpringConfig>`                                                          | 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) => void`                                                                | Called with scroll offset. Stand-in for `onScroll`.                                                                                                                                                                |\n| `onPlaceholderIndexChange` | `(index: number) => 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<ViewStyle>`                                                                    | Style of the main component.                                                                                                                                                                                       |\n| `simultaneousHandlers`     | `React.Ref<any>` or `React.Ref<any>[]`                                                    | 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 `<ScaleDecorator>` 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> 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    <NestableScrollContainer>\n      <Header text='List 1' />\n      <NestableDraggableFlatList\n        data={data1}\n        renderItem={renderItem}\n        keyExtractor={keyExtractor}\n        onDragEnd={({ data }) => setData1(data)}\n      />\n      <Header text='List 2' />\n      <NestableDraggableFlatList\n        data={data2}\n        renderItem={renderItem}\n        keyExtractor={keyExtractor}\n        onDragEnd={({ data }) => setData2(data)}\n      />\n      <Header text='List 3' />\n      <NestableDraggableFlatList\n        data={data3}\n        renderItem={renderItem}\n        keyExtractor={keyExtractor}\n        onDragEnd={({ data }) => setData3(data)}\n      />\n    </NestableScrollContainer>\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 <br />\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) => {\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<Item>) => {\n    return (\n      <ScaleDecorator>\n        <TouchableOpacity\n          onLongPress={drag}\n          disabled={isActive}\n          style={[\n            styles.rowItem,\n            { backgroundColor: isActive ? \"red\" : item.backgroundColor },\n          ]}\n        >\n          <Text style={styles.text}>{item.label}</Text>\n        </TouchableOpacity>\n      </ScaleDecorator>\n    );\n  };\n\n  return (\n    <DraggableFlatList\n      data={data}\n      onDragEnd={({ data }) => setData(data)}\n      keyExtractor={(item) => item.key}\n      renderItem={renderItem}\n    />\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","readmeFilename":"README.md"}