fix: Buggy grid swapping in some edge cases (#414)

## Description

This PR fixes some buggy swapping behavior for both `insert` and `swap`
sortable grid ordering strategies.

## Example recordings

### `insert`

| Before | After |
|-|-|
| <video
src="https://github.com/user-attachments/assets/1e4aa54a-2ea0-4171-bf5d-7e5adaa241a1"
/>| <video
src="https://github.com/user-attachments/assets/38143114-00de-4f87-a3b4-71998829d251"
/> |

### `swap`

| Before | After |
|-|-|
| <video
src="https://github.com/user-attachments/assets/bc60f215-1b8d-4ff7-8f05-79a70dfa62cd"
/> | <video
src="https://github.com/user-attachments/assets/e1396043-30ca-4f8b-b340-efa84f740fd6"
/> |

Author: MatiPl01

example/app/src/examples/SortableGrid/PlaygroundExample.tsx

@@ -6,13 +6,19 @@ import Sortable from 'react-native-sortables';
 import { ScrollScreen } from '@/components';
 import { colors, radius, sizes, spacing, text } from '@/theme';
 
-const DATA = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);
+const DATA = [
+  { height: 50, id: 1 },
+  { height: 50, id: 2 },
+  { height: 50, id: 3 },
+  { height: 300, id: 4 },
+  { height: 50, id: 5 }
+];
 
 export default function PlaygroundExample() {
-  const renderItem = useCallback<SortableGridRenderItem<string>>(
+  const renderItem = useCallback<SortableGridRenderItem<(typeof DATA)[number]>>(
     ({ item }) => (
-      <View style={styles.card}>
-        <Text style={styles.text}>{item}</Text>
+      <View style={[styles.card, { height: item.height }]}>
+        <Text style={styles.text}>{item.id}</Text>
       </View>
     ),
     []
@@ -26,6 +32,8 @@ export default function PlaygroundExample() {
         data={DATA}
         renderItem={renderItem}
         rowGap={10}
+        strategy='swap'
+        debug
       />
     </ScrollScreen>
   );

packages/react-native-sortables/src/providers/layout/grid/updates/common.ts

@@ -73,7 +73,7 @@ export const createGridStrategy =
           ? crossAxisOffsets[index + 1]! -
             crossAxisOffsets[index] -
             crossGap.value
-          : 0;
+          : null;
 
       // CROSS AXIS BOUNDS
       // Before bound
@@ -118,20 +118,14 @@ export const createGridStrategy =
         if (!nextCrossAxisOffset) {
           break;
         }
-        crossAfterOffset = nextCrossAxisOffset - crossGap.value;
+        crossAfterOffset =
+          (crossAxisOffsets[crossIndex] ?? 0) + crossCurrentSize;
         const crossAfterSize = getItemCrossSize(crossIndex + 1);
+        const swapOffset = (crossAfterOffset + nextCrossAxisOffset) / 2;
+        const additionalAfterOffset = getAdditionalSwapOffset(crossAfterSize);
+        crossAfterBound = swapOffset + additionalAfterOffset;
         if (crossAfterSize) {
-          const swapOffset =
-            ((crossAxisOffsets[crossIndex] ?? 0) +
-              nextCrossAxisOffset +
-              crossCurrentSize) /
-            2;
-          const additionalAfterOffset = getAdditionalSwapOffset(crossAfterSize);
-          crossAfterBound = swapOffset + additionalAfterOffset;
           crossCurrentSize = crossAfterSize;
-        } else {
-          crossAfterBound =
-            (crossAxisOffsets[crossIndex] ?? 0) + crossCurrentSize;
         }
       } while (
         crossAfterBound < crossContainerSize.value &&
@@ -231,10 +225,8 @@ export const createGridStrategy =
         0,
         Math.min(crossIndex, Math.floor((itemsCount - 1) / numGroups))
       );
-      const newIndex = Math.max(
-        0,
-        Math.min(limitedCrossIndex * numGroups + mainIndex, itemsCount - 1)
-      );
+      const newIndex = Math.max(0, limitedCrossIndex * numGroups + mainIndex);
+
       if (
         newIndex === activeIndex ||
         fixedItemKeys?.value[idxToKey[newIndex]!]

packages/react-native-sortables/src/providers/layout/grid/updates/swap.ts

@@ -5,7 +5,6 @@ import { useMutableValue } from '../../../../integrations/reanimated';
 import { areArraysDifferent, reorderSwap } from '../../../../utils';
 import { useCommonValuesContext } from '../../../shared';
 import { useGridLayoutContext } from '../GridLayoutProvider';
-import { getMainIndex } from '../utils';
 import { createGridStrategy } from './common';
 
 /**
@@ -19,7 +18,7 @@ import { createGridStrategy } from './common';
  * |12 |13 |14 |15 |     |12 |14 |15 | <-- in the last row we can have anything
  *
  * It removes the active item and shifts items in the same column
- * to the top. Items in the last row are shifted to the left to fill
+ * to the top. Remaining items are shifted to the left to fill
  * the blank space.
  *
  * The same applies to the horizontal grid but with direction changes.
@@ -43,22 +42,12 @@ function useInactiveIndexToKey() {
       }
 
       const othersArray = [...idxToKey];
+      let i = excludedIndex;
 
-      for (
-        let i = excludedIndex;
-        i + numGroups < othersArray.length;
-        i += numGroups
-      ) {
+      for (; i + numGroups < othersArray.length; i += numGroups) {
         othersArray[i] = othersArray[i + numGroups]!;
       }
-
-      const activeColumnIndex = getMainIndex(excludedIndex, numGroups);
-      const lastRowIndex = Math.floor((othersArray.length - 1) / numGroups);
-      for (
-        let i = lastRowIndex * numGroups + activeColumnIndex;
-        i < othersArray.length;
-        i++
-      ) {
+      for (; i < othersArray.length; i++) {
         othersArray[i] = othersArray[i + 1]!;
       }
       othersArray.pop();

packages/react-native-sortables/src/providers/shared/utils.ts

@@ -1,6 +1,7 @@
 import { EXTRA_SWAP_OFFSET } from '../../constants';
+import type { Maybe } from '../../helperTypes';
 
-export const getAdditionalSwapOffset = (size: number) => {
+export const getAdditionalSwapOffset = (size: Maybe<number>) => {
   'worklet';
-  return Math.min(EXTRA_SWAP_OFFSET, size / 2);
+  return size ? Math.min(EXTRA_SWAP_OFFSET, size / 2) : EXTRA_SWAP_OFFSET;
 };

packages/react-native-sortables/src/utils/layout.ts

@@ -27,6 +27,7 @@ export const reorderInsert = (
   fixedItemKeys: Record<string, boolean> | undefined
 ) => {
   'worklet';
+  toIndex = Math.min(toIndex, indexToKey.length - 1);
   const direction = toIndex > fromIndex ? -1 : 1;
   const fromKey = indexToKey[fromIndex]!;
   const op = direction < 0 ? lt : gt;
@@ -58,6 +59,9 @@ export const reorderSwap = (
   toIndex: number
 ) => {
   'worklet';
+  if (toIndex > indexToKey.length - 1) {
+    return indexToKey;
+  }
   const result = [...indexToKey];
   [result[fromIndex], result[toIndex]] = [result[toIndex]!, result[fromIndex]!];
   return result;