feat(DraggableStack): add resetSortOrder on DraggableStack handle

Author: mgcrea

example/src/App.tsx

@@ -5,6 +5,7 @@ import {DraggableStackExample as DraggableExample} from './pages/DraggableStackE
 import {DraggableBasicExample} from './pages/DraggableBasicExample';
 import {SafeAreaView, StyleSheet} from 'react-native';
 import {configureReanimatedLogger} from 'react-native-reanimated';
+import HomeScreen from './pages/OtherExample';
 
 // This is the default configuration
 configureReanimatedLogger({
@@ -18,7 +19,7 @@ export const App: FunctionComponent = () => {
       <GestureHandlerRootView>
         {/* <DraggableBasicExample /> */}
         {/* <DraggableGridExample /> */}
-        <DraggableExample />
+        <HomeScreen />
       </GestureHandlerRootView>
     </SafeAreaView>
   );

package.json

@@ -60,5 +60,6 @@
     "tsc-alias": "^1.8.10",
     "tsup": "^8.3.5",
     "typescript": "^5.6.3"
-  }
+  },
+  "packageManager": "[email protected]+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
 }

src/features/sort/components/DraggableStack.tsx

@@ -41,7 +41,7 @@ export const DraggableStack = forwardRef<DraggableStackHandle, PropsWithChildren
 
     const horizontal = ["row", "row-reverse"].includes(style.flexDirection);
 
-    const { refreshOffsets } = useDraggableStack({
+    const { refreshOffsets, resetSortOrder } = useDraggableStack({
       gap: style.gap,
       horizontal,
       childrenIds,
@@ -53,8 +53,9 @@ export const DraggableStack = forwardRef<DraggableStackHandle, PropsWithChildren
     useImperativeHandle(ref, () => {
       return {
         refreshOffsets,
+        resetSortOrder,
       };
-    }, [refreshOffsets]);
+    }, [refreshOffsets, resetSortOrder]);
 
     useEffect(() => {
       // Refresh offsets when children change

src/features/sort/hooks/useDraggableStack.ts

@@ -113,6 +113,13 @@ export const useDraggableStack = ({
     horizontal,
   ]);
 
+  const resetSortOrder = useCallback(() => {
+    // Reset the expected sort order
+    draggableSortOrder.value = childrenIds.slice();
+    // Refresh all offsets
+    refreshOffsets();
+  }, [childrenIds, draggableSortOrder, refreshOffsets]);
+
   // Track items being added or removed from the stack
   useAnimatedReaction(
     () => childrenIds,
@@ -125,7 +132,7 @@ export const useDraggableStack = ({
         return;
       }
       // Reset the expected sort order
-      draggableSortOrder.value = next;
+      // draggableSortOrder.value = next;
       // Refresh all offsets
       refreshOffsets();
     },
@@ -189,5 +196,5 @@ export const useDraggableStack = ({
     [horizontal],
   );
 
-  return { draggablePlaceholderIndex, draggableSortOrder, refreshOffsets };
+  return { draggablePlaceholderIndex, draggableSortOrder, resetSortOrder, refreshOffsets };
 };