feat(DraggableStack): expose refreshOffsets method

Author: mgcrea

example/src/App.tsx

@@ -4,6 +4,13 @@ import {DraggableGridExample} from './pages/DraggableGridExample';
 import {DraggableStackExample} from './pages/DraggableStackExample';
 import {DraggableBasicExample} from './pages/DraggableBasicExample';
 import {SafeAreaView, StyleSheet} from 'react-native';
+import {configureReanimatedLogger} from 'react-native-reanimated';
+
+// This is the default configuration
+configureReanimatedLogger({
+  // level: ReanimatedLogLevel.warn,
+  strict: false, // Reanimated runs in strict mode by default
+});
 
 export const App: FunctionComponent = () => {
   return (

example/src/pages/DraggableStackExample.tsx

@@ -2,19 +2,14 @@ import {
   DndProvider,
   Draggable,
   DraggableStack,
-  UniqueIdentifier,
+  type DraggableStackHandle,
+  type UniqueIdentifier,
   type DraggableStackProps,
   type ObjectWithId,
 } from '@mgcrea/react-native-dnd/src';
 import React, {useCallback, useState, type FunctionComponent} from 'react';
 import {Button, StyleSheet, Text, View} from 'react-native';
-import {configureReanimatedLogger} from 'react-native-reanimated';
-
-// This is the default configuration
-configureReanimatedLogger({
-  // level: ReanimatedLogLevel.warn,
-  strict: false, // Reanimated runs in strict mode by default
-});
+import {runOnUI} from 'react-native-reanimated';
 
 const items = ['🤓', '🤖🤖', '👻👻👻', '👾👾👾👾'];
 const data = items.map((letter, index) => ({
@@ -25,13 +20,13 @@ const data = items.map((letter, index) => ({
 export const DraggableStackExample: FunctionComponent = () => {
   const [items, setItems] = useState(data);
   const [fontSize, setFontSize] = useState(32);
+  const ref = React.useRef<DraggableStackHandle>(null);
 
   const onStackOrderChange: DraggableStackProps['onOrderChange'] = useCallback(
     (order: UniqueIdentifier[]) => {
       console.log('onStackOrderChange', order);
       setTimeout(() => {
         // setItems(items => order.map(id => items.find(item => item.id === id)!));
-        // setFontSize(fontSize => fontSize + 1);
       }, 1000);
     },
     [],
@@ -49,7 +44,8 @@ export const DraggableStackExample: FunctionComponent = () => {
           gap={10}
           style={styles.stack}
           onOrderChange={onStackOrderChange}
-          onOrderUpdate={onStackOrderUpdate}>
+          onOrderUpdate={onStackOrderUpdate}
+          ref={ref}>
           {items.map(letter => (
             <Draggable
               key={letter.id}
@@ -85,16 +81,24 @@ export const DraggableStackExample: FunctionComponent = () => {
         />
 
         <Button
-          title="Plus"
+          title="Increase size"
           onPress={() => {
             setFontSize(prevFontSize => prevFontSize + 1);
+            if (ref.current) {
+              const {refreshOffsets} = ref.current;
+              runOnUI(refreshOffsets)();
+            }
           }}
         />
 
         <Button
-          title="Minus"
+          title="Decrease size"
           onPress={() => {
             setFontSize(prevFontSize => prevFontSize - 1);
+            if (ref.current) {
+              const {refreshOffsets} = ref.current;
+              runOnUI(refreshOffsets)();
+            }
           }}
         />
       </View>

src/features/sort/components/DraggableStack.tsx

@@ -1,4 +1,11 @@
-import React, { useEffect, useMemo, type FunctionComponent, type PropsWithChildren } from "react";
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  type FunctionComponent,
+  type PropsWithChildren,
+} from "react";
 import { type FlexStyle, type ViewProps } from "react-native";
 import Animated, { runOnUI } from "react-native-reanimated";
 import { useChildrenIds } from "../../../hooks";
@@ -10,44 +17,57 @@ export type DraggableStackProps = Pick<ViewProps, "style"> &
     gap?: number;
   };
 
-export const DraggableStack: FunctionComponent<PropsWithChildren<DraggableStackProps>> = ({
-  children,
-  direction = "row",
-  gap = 0,
-  onOrderChange,
-  onOrderUpdate,
-  shouldSwapWorklet,
-  style: styleProp,
-}) => {
-  const initialOrder = useChildrenIds(children);
-
-  const style = useMemo(
-    () =>
-      Object.assign(
-        {
-          flexDirection: direction,
-          gap,
-        },
-        styleProp,
-      ),
-    [gap, direction, styleProp],
-  );
-
-  const horizontal = ["row", "row-reverse"].includes(style.flexDirection);
-
-  const { refreshOffsets } = useDraggableStack({
-    gap: style.gap,
-    horizontal,
-    initialOrder,
-    onOrderChange,
-    onOrderUpdate,
-    shouldSwapWorklet,
-  });
-
-  useEffect(() => {
-    // Refresh offsets when children change
-    runOnUI(refreshOffsets)();
-  }, [initialOrder, refreshOffsets]);
-
-  return <Animated.View style={style}>{children}</Animated.View>;
-};
+export type DraggableStackHandle = Pick<ReturnType<typeof useDraggableStack>, "refreshOffsets">;
+
+export const DraggableStack = forwardRef<DraggableStackHandle, PropsWithChildren<DraggableStackProps>>(
+  function DraggableStack(
+    {
+      children,
+      direction = "row",
+      gap = 0,
+      onOrderChange,
+      onOrderUpdate,
+      shouldSwapWorklet,
+      style: styleProp,
+    },
+    ref,
+  ) {
+    const initialOrder = useChildrenIds(children);
+
+    const style = useMemo(
+      () =>
+        Object.assign(
+          {
+            flexDirection: direction,
+            gap,
+          },
+          styleProp,
+        ),
+      [gap, direction, styleProp],
+    );
+
+    const horizontal = ["row", "row-reverse"].includes(style.flexDirection);
+
+    const { refreshOffsets } = useDraggableStack({
+      gap: style.gap,
+      horizontal,
+      initialOrder,
+      onOrderChange,
+      onOrderUpdate,
+      shouldSwapWorklet,
+    });
+
+    useImperativeHandle(ref, () => {
+      return {
+        refreshOffsets,
+      };
+    }, [refreshOffsets]);
+
+    useEffect(() => {
+      // Refresh offsets when children change
+      runOnUI(refreshOffsets)();
+    }, [initialOrder, refreshOffsets]);
+
+    return <Animated.View style={style}>{children}</Animated.View>;
+  },
+);