fix: imports

src/DraggableList/index.native.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import DraggableFlatList from 'react-native-draggable-flatlist';
+import type { DefaultItemProps, DraggableListProps } from './types';
+
+export const DraggableList = <T extends DefaultItemProps>({
+  items,
+  ...props
+}: DraggableListProps<T>) => {
+  return (
+    <DraggableFlatList
+      data={items}
+      keyExtractor={(item) => item.id}
+      {...props}
+    />
+  );
+};

src/DraggableList/index.tsx

@@ -1,16 +1,101 @@
-import React from 'react';
-import DraggableFlatList from 'react-native-draggable-flatlist';
-import type { DefaultItemProps, DraggableListProps } from './types';
+import React, { useCallback } from 'react';
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  type OnDragEndResponder,
+  type OnDragUpdateResponder,
+} from 'react-beautiful-dnd';
+import { View } from 'react-native';
+import type { DraggableListProps, DefaultItemProps } from './types';
+
+type ReoderParams<T> = {
+  list: T[];
+  startIndex: number;
+  endIndex: number;
+};
+
+// Function to help us with reordering the result
+const reorder = <T,>({ list, startIndex, endIndex }: ReoderParams<T>): T[] => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+
+  if (removed !== undefined) {
+    result.splice(endIndex, 0, removed);
+  }
+
+  return result;
+};
 
 export const DraggableList = <T extends DefaultItemProps>({
   items,
-  ...props
+  renderItem,
+  onDragEnd: onDragEndCallback,
+  onDragBegin: onDragBegin,
+  onPlaceholderIndexChange,
 }: DraggableListProps<T>) => {
+  const onDragEnd: OnDragEndResponder = useCallback(
+    (result) => {
+      if (!result.destination) {
+        return;
+      }
+
+      const reorderedItems = reorder({
+        list: items,
+        startIndex: result.source.index,
+        endIndex: result.destination.index,
+      });
+
+      onDragEndCallback && onDragEndCallback({ data: reorderedItems });
+    },
+    [items, onDragEndCallback]
+  );
+
+  const onDragUpdate: OnDragUpdateResponder = useCallback(
+    (result) => {
+      if (!result.destination) {
+        return;
+      }
+      onPlaceholderIndexChange &&
+        onPlaceholderIndexChange(result.destination.index);
+    },
+    [onPlaceholderIndexChange]
+  );
+
   return (
-    <DraggableFlatList
-      data={items}
-      keyExtractor={(item) => item.id}
-      {...props}
-    />
+    <DragDropContext
+      onDragEnd={onDragEnd}
+      onDragStart={onDragBegin}
+      onDragUpdate={onDragUpdate}
+    >
+      <Droppable droppableId="droppable">
+        {(droppableProvided) => (
+          <View
+            {...droppableProvided.droppableProps}
+            ref={droppableProvided.innerRef}
+          >
+            {items.map((item, index) => (
+              <Draggable key={item.id} draggableId={item.id} index={index}>
+                {(draggableProvided, snapshot) => (
+                  <div
+                    ref={draggableProvided.innerRef}
+                    {...draggableProvided.draggableProps}
+                    {...draggableProvided.dragHandleProps}
+                  >
+                    {renderItem({
+                      item,
+                      getIndex: () => 1,
+                      isActive: snapshot.isDragging,
+                      drag: () => {},
+                    })}
+                  </div>
+                )}
+              </Draggable>
+            ))}
+            {droppableProvided.placeholder}
+          </View>
+        )}
+      </Droppable>
+    </DragDropContext>
   );
 };

src/index.tsx

@@ -1,8 +1,8 @@
 import { DraggableList } from './DraggableList';
 import 'react-native-gesture-handler';
 
-export { OpacityDecorator } from './decorators/OpacityDecorator/index.native';
-export { ScaleDecorator } from './decorators/ScaleDecorator/index.native';
-export { ShadowDecorator } from './decorators/ShadowDecorator/index.native';
+export { OpacityDecorator } from './decorators/OpacityDecorator';
+export { ScaleDecorator } from './decorators/ScaleDecorator';
+export { ShadowDecorator } from './decorators/ShadowDecorator';
 
 export default DraggableList;