array-move reference removed

App.tsx

@@ -1,7 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
 import DraggableFlatList, {Item} from './DraggableFlatList';
-import {arrayMoveImmutable} from 'array-move';
 
 const ITEM_HEIGHT = 50;
 const ITEM_WIDTH = 300;
@@ -33,9 +32,8 @@ const App = () => {
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number, items: Item[]) => {
       console.log('handleMove ', {fromIndex, toIndex});
-      const newData = arrayMoveImmutable(items, fromIndex, toIndex);
       setSelected(undefined);
-      setData(newData);
+      setData(items);
     },
     [],
   );

DraggableFlatList.tsx

@@ -153,10 +153,12 @@ const CustomDraggableFlatList = ({
         if (fromIndex < toIndex && toIndex > fromIndex + 1) {
           // moving item to down
           toIndex--;
-          onHandleMove(fromIndex, toIndex, dataRef.current);
+          const newData = moveItem(fromIndex, toIndex, dataRef.current);
+          onHandleMove(fromIndex, toIndex, newData);
         } else if (fromIndex > toIndex && fromIndex > toIndex + 1) {
           // moving item to up
-          onHandleMove(fromIndex, toIndex, dataRef.current);
+          const newData = moveItem(fromIndex, toIndex, dataRef.current);
+          onHandleMove(fromIndex, toIndex, newData);
         }
       }
     }
@@ -174,6 +176,13 @@ const CustomDraggableFlatList = ({
     callNextScrollToPoint.current.cancel();
   };
 
+  const moveItem = (fromIndex: number, toIndex: number, items: Item[]) => {
+    const mutable = [...items];
+    const item = mutable.splice(fromIndex, 1)[0];
+    mutable.splice(toIndex, 0, item);
+    return mutable;
+  };
+
   const showWhereToDrop = (moveY: number, items: Item[]) => {
     const item = itemFromTouchPoint(moveY, items);
     setBelow(item);

README.md

@@ -28,9 +28,8 @@ const App = () => {
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number, items: Item[]) => {
       console.log('handleMove ', {fromIndex, toIndex});
-      const newData = arrayMoveImmutable(items, fromIndex, toIndex);
       setSelected(undefined);
-      setData(newData);
+      setData(items);
     },
     [],
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "DraggableFlatList",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": true,
   "author": {
     "name": "Tero Paananen",
@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "@babel/preset-typescript": "^7.16.7",
-    "array-move": "^4.0.0",
     "lodash": "^4.17.21",
     "react": "17.0.2",
     "react-native": "^0.65.0",

yarn.lock

@@ -1703,11 +1703,6 @@ array-map@~0.0.0:
   resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
   integrity sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=
 
-array-move@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/array-move/-/array-move-4.0.0.tgz#2c3730f056cc926f62a59769a5a8cda2fb6d8c55"
-  integrity sha512-+RY54S8OuVvg94THpneQvFRmqWdAHeqtMzgMW6JNurHxe8rsS07cHQdfGkXnTUXiBcyZ0j3SiDIxxj0RPiqCkQ==
-
 array-reduce@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"