Add onCellMoved callback

src/components/CellRendererComponent.tsx

@@ -27,10 +27,11 @@ type Props<T> = {
   children: React.ReactNode;
   onLayout?: (e: LayoutChangeEvent) => void;
   style?: StyleProp<ViewStyle>;
+  onCellMoved?: () => void;
 };
 
 function CellRendererComponent<T>(props: Props<T>) {
-  const { item, index, onLayout, children, ...rest } = props;
+  const { item, index, onLayout, children, onCellMoved, ...rest } = props;
 
   const viewRef = useRef<Animated.View>(null);
   const { cellDataRef, propsRef, containerRef } = useRefs<T>();
@@ -52,6 +53,7 @@ function CellRendererComponent<T>(props: Props<T>) {
     cellOffset: offset,
     cellSize: size,
     cellIndex: index,
+    onCellMoved: onCellMoved,
   });
 
   const isActive = activeKey === key;

src/components/DraggableFlatList.tsx

@@ -357,6 +357,13 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
     props.onViewableItemsChanged?.(info);
   });
 
+  const memoCellRendererComponent = useCallback(
+    (cellProps) => (
+      <CellRendererComponent {...cellProps} onCellMoved={props.onCellMoved} />
+    ),
+    []
+  );
+
   return (
     <DraggableFlatListProvider
       activeKey={activeKey}
@@ -377,7 +384,7 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
             {...props}
             data={props.data}
             onViewableItemsChanged={onViewableItemsChanged}
-            CellRendererComponent={CellRendererComponent}
+            CellRendererComponent={memoCellRendererComponent}
             ref={flatlistRef}
             onContentSizeChange={onListContentSizeChange}
             scrollEnabled={!activeKey && scrollEnabled}

src/hooks/useCellTranslate.tsx

@@ -1,4 +1,8 @@
-import Animated, { useDerivedValue, withSpring } from "react-native-reanimated";
+import Animated, {
+  runOnJS,
+  useDerivedValue,
+  withSpring,
+} from "react-native-reanimated";
 import { useAnimatedValues } from "../context/animatedValueContext";
 import { useDraggableFlatListContext } from "../context/draggableFlatListContext";
 import { useRefs } from "../context/refContext";
@@ -7,9 +11,15 @@ type Params = {
   cellIndex: number;
   cellSize: Animated.SharedValue<number>;
   cellOffset: Animated.SharedValue<number>;
+  onCellMoved?: () => void;
 };
 
-export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
+export function useCellTranslate({
+  cellIndex,
+  cellSize,
+  cellOffset,
+  onCellMoved,
+}: Params) {
   const {
     activeIndexAnim,
     activeCellSize,
@@ -76,6 +86,9 @@ export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
 
     if (result !== -1 && result !== spacerIndexAnim.value) {
       spacerIndexAnim.value = result;
+      if (onCellMoved) {
+        runOnJS(onCellMoved)();
+      }
     }
 
     if (spacerIndexAnim.value === cellIndex) {

src/types.ts

@@ -52,6 +52,7 @@ export type DraggableFlatListProps<T> = Modify<
       layout: LayoutChangeEvent["nativeEvent"]["layout"];
       containerRef: React.RefObject<Animated.View>;
     }) => void;
+    onCellMoved?: () => void;
   } & Partial<DefaultProps>
 >;