react-native-swappable-grid 1.0.0

package/lib/typescript/SwappableGrid.d.ts

@@ -0,0 +1,85 @@
+import React, { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+/**
+ * Props for the SwappableGrid component
+ */
+type SwappableGridProps = {
+    /** The child components to render in the grid. Each child should have a unique key. */
+    children: ReactNode;
+    /** Width of each grid item in pixels */
+    itemWidth: number;
+    /** Height of each grid item in pixels */
+    itemHeight: number;
+    /** Gap between grid items in pixels. Defaults to 8. */
+    gap?: number;
+    /** Padding around the container in pixels. Defaults to 8. */
+    containerPadding?: number;
+    /** Duration in milliseconds to hold before drag starts. Defaults to 300. */
+    longPressMs?: number;
+    /** Number of columns in the grid. If not provided, will be calculated automatically based on container width. */
+    numColumns?: number;
+    /** Wiggle animation configuration when items are in drag mode or delete mode */
+    wiggle?: {
+        /** Duration of one wiggle cycle in milliseconds */
+        duration: number;
+        /** Rotation degrees for the wiggle animation */
+        degrees: number;
+    };
+    /** Callback fired when drag ends, providing the ordered array of child nodes */
+    onDragEnd?: (ordered: ChildNode[]) => void;
+    /** Callback fired when the order changes, providing an array of keys in the new order */
+    onOrderChange?: (keys: string[]) => void;
+    /** Callback fired when an item is deleted, providing the key of the deleted item */
+    onDelete?: (key: string) => void;
+    /** Factor by which the dragged item scales up. Defaults to 1.06. */
+    dragSizeIncreaseFactor?: number;
+    /** Speed of auto-scrolling when dragging near edges. Defaults to 10. */
+    scrollSpeed?: number;
+    /** Distance from edge in pixels that triggers auto-scroll. Defaults to 100. */
+    scrollThreshold?: number;
+    /** Custom style for the ScrollView container */
+    style?: StyleProp<ViewStyle>;
+    /** Component to render after all grid items (e.g., an "Add" button) */
+    trailingComponent?: ReactNode;
+    /** Component to render as a delete target (shown when dragging). If provided, disables hold-to-delete feature. */
+    deleteComponent?: ReactNode;
+    /** Custom style for the delete component. If provided, allows custom positioning. */
+    deleteComponentStyle?: StyleProp<ViewStyle>;
+    /** If true, reverses the order of items (right-to-left, bottom-to-top). Defaults to false. */
+    reverse?: boolean;
+};
+/**
+ * Ref methods for SwappableGrid component
+ */
+export interface SwappableGridRef {
+    /** Cancels the delete mode if any item is currently in delete mode */
+    cancelDeleteMode: () => void;
+}
+/**
+ * SwappableGrid - A React Native component for creating a draggable, swappable grid layout.
+ *
+ * Features:
+ * - Drag and drop to reorder items
+ * - Long press to enter drag mode
+ * - Auto-scroll when dragging near edges
+ * - Optional wiggle animation during drag mode
+ * - Optional delete functionality with hold-to-delete or delete component
+ * - Support for trailing components (e.g., "Add" button)
+ * - Automatic column calculation based on container width
+ *
+ * @example
+ * ```tsx
+ * <SwappableGrid
+ *   itemWidth={100}
+ *   itemHeight={100}
+ *   numColumns={3}
+ *   onOrderChange={(keys) => console.log('New order:', keys)}
+ * >
+ *   {items.map(item => (
+ *     <View key={item.id}>{item.content}</View>
+ *   ))}
+ * </SwappableGrid>
+ * ```
+ */
+declare const SwappableGrid: React.ForwardRefExoticComponent<SwappableGridProps & React.RefAttributes<SwappableGridRef>>;
+export default SwappableGrid;

package/lib/typescript/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SwappableGrid } from "./SwappableGrid";
+export type { SwappableGridRef } from "./SwappableGrid";

package/lib/typescript/utils/helpers/computerMinHeight.d.ts

@@ -0,0 +1 @@
+export default function computeMinHeight(count: number, numColumns: number, tileH: number, pad: number): number;

package/lib/typescript/utils/helpers/gestures/PanWithLongPress.d.ts

@@ -0,0 +1,40 @@
+import { SharedValue, AnimatedRef } from "react-native-reanimated";
+interface PanProps {
+    order: SharedValue<string[]>;
+    dynamicNumColumns: SharedValue<number>;
+    activeKey: SharedValue<string | null>;
+    offsetX: SharedValue<number>;
+    offsetY: SharedValue<number>;
+    startX: SharedValue<number>;
+    startY: SharedValue<number>;
+    dragMode: SharedValue<boolean>;
+    positions: any;
+    itemsByKey: any;
+    itemWidth: number;
+    itemHeight: number;
+    containerPadding: number;
+    gap: number;
+    setOrderState: React.Dispatch<React.SetStateAction<string[]>>;
+    onDragEnd?: (ordered: ChildNode[]) => void;
+    onOrderChange?: (keys: string[]) => void;
+    scrollSpeed: number;
+    scrollThreshold: number;
+    scrollViewRef: AnimatedRef<any>;
+    scrollOffset: SharedValue<number>;
+    viewportH: SharedValue<number>;
+    longPressMs: number;
+    contentH: SharedValue<number>;
+    reverse?: boolean;
+    deleteComponentPosition?: SharedValue<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null>;
+    deleteItem?: (key: string) => void;
+    contentPaddingBottom?: number;
+}
+export declare const PanWithLongPress: (props: PanProps & {
+    longPressMs: number;
+}) => import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+export {};

package/lib/typescript/utils/helpers/indexCalculations.d.ts

@@ -0,0 +1,28 @@
+import { SharedValue } from "react-native-reanimated";
+interface IndexToXYProps {
+    index: number;
+    itemHeight: number;
+    itemWidth: number;
+    dynamicNumColumns: SharedValue<number>;
+    containerPadding: number;
+    gap: number;
+}
+export declare const indexToXY: ({ index, itemHeight, itemWidth, dynamicNumColumns, containerPadding, gap, }: IndexToXYProps) => {
+    x: number;
+    y: number;
+};
+interface XYToIndexProps {
+    order: SharedValue<string[]>;
+    x: number;
+    y: number;
+    itemHeight: number;
+    itemWidth: number;
+    dynamicNumColumns: SharedValue<number>;
+    containerPadding: number;
+    gap: number;
+}
+export declare const xyToIndex: ({ order, x, y, itemHeight, itemWidth, dynamicNumColumns, gap, containerPadding, }: XYToIndexProps) => number;
+export declare const toIndex1ColFromLiveMidlines: (order: SharedValue<string[]>, positions: Record<string, {
+    y: SharedValue<number>;
+}>, activeKey: SharedValue<string | null>, itemHeight: number, centerY: number, reverse: boolean) => number;
+export {};

package/lib/typescript/utils/useGridLayout.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from "react";
+import { LayoutChangeEvent } from "react-native";
+import { AnimatedRef, SharedValue } from "react-native-reanimated";
+interface useGridLayoutProps {
+    reverse?: boolean;
+    children: ReactNode;
+    itemWidth: number;
+    itemHeight: number;
+    gap: number;
+    containerPadding: number;
+    longPressMs: number;
+    numColumns?: number;
+    onDragEnd?: (ordered: ChildNode[]) => void;
+    onOrderChange?: (keys: string[]) => void;
+    onDelete?: (key: string) => void;
+    scrollViewRef: AnimatedRef<any>;
+    scrollSpeed: number;
+    scrollThreshold: number;
+    contentPaddingBottom?: number;
+}
+export declare function useGridLayout({ reverse, children, itemWidth, itemHeight, gap, containerPadding, longPressMs, numColumns, onDragEnd, onOrderChange, onDelete, scrollViewRef, scrollSpeed, scrollThreshold, contentPaddingBottom, }: useGridLayoutProps): {
+    itemsByKey: Record<string, ReactNode>;
+    orderState: string[];
+    dragMode: SharedValue<boolean>;
+    anyItemInDeleteMode: SharedValue<boolean>;
+    composed: import("react-native-gesture-handler/lib/typescript/handlers/gestures/gestureComposition").SimultaneousGesture;
+    dynamicNumColumns: SharedValue<number>;
+    onLayoutContent: (e: LayoutChangeEvent) => void;
+    onLayoutScrollView: (e: LayoutChangeEvent) => void;
+    positions: Record<string, {
+        x: SharedValue<number>;
+        y: SharedValue<number>;
+        active: SharedValue<number>;
+    }>;
+    onScroll: import("react-native-reanimated").ScrollHandlerProcessed<Record<string, unknown>>;
+    childArray: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[];
+    order: SharedValue<string[]>;
+    deleteItem: (key: string) => void;
+    deleteComponentPosition: SharedValue<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+};
+export {};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "prepare": "bob build",
+     "format": "prettier --write \"./**/*.{js,css,md,tsx,ts}\""
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-reanimated": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-native": "^0.73.0",
+    "react-native-builder-bob": "^0.18.3",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "^4.2.1",
+    "typescript": "^5.9.3"
+  },
+  "name": "react-native-swappable-grid",
+  "version": "1.0.0",
+  "description": "A React Native component for creating draggable, swappable grid layouts with reordering, delete functionality, and smooth animations",
+  "keywords": [
+    "react-native",
+    "grid",
+    "draggable",
+    "swappable",
+    "reorder",
+    "drag-and-drop",
+    "gesture",
+    "layout"
+  ],
+  "author": "William Danielsson",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/WilliamDanielsson/react-native-swappable-grid"
+  },
+  "type": "commonjs",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "dependencies": {
+    "prettier": "^3.7.4"
+  }
+}

package/src/ChildWrapper.tsx

@@ -0,0 +1,376 @@
+import React, { useEffect, useState } from "react";
+import { Text, View, Pressable } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useAnimatedReaction,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+  SharedValue,
+  useDerivedValue,
+  cancelAnimation,
+  runOnJS,
+} from "react-native-reanimated";
+
+type Props = {
+  position: {
+    x: SharedValue<number>;
+    y: SharedValue<number>;
+    active: SharedValue<number>;
+  };
+  itemWidth: number;
+  itemHeight: number;
+  dragMode: SharedValue<boolean>;
+  anyItemInDeleteMode: SharedValue<boolean>;
+  children: React.ReactNode;
+  wiggle?: { duration: number; degrees: number };
+  dragSizeIncreaseFactor: number;
+  onDelete?: () => void;
+  disableHoldToDelete?: boolean; // If true, disable the hold-to-delete feature
+};
+
+export default function ChildWrapper({
+  position,
+  itemWidth,
+  itemHeight,
+  dragMode,
+  anyItemInDeleteMode,
+  children,
+  wiggle,
+  dragSizeIncreaseFactor,
+  onDelete,
+  disableHoldToDelete = false,
+}: Props) {
+  const rotation = useSharedValue(0);
+  const currentWiggleMode = useSharedValue<"none" | "normal" | "delete">(
+    "none"
+  );
+  const previousDragMode = useSharedValue(false);
+
+  const showDelete = useSharedValue(false);
+  const deleteModeActive = useSharedValue(false); // Persistent delete mode state
+  const stillTimer = useSharedValue(0);
+  const lastX = useSharedValue(position.x.value);
+  const lastY = useSharedValue(position.y.value);
+  const frameCounter = useSharedValue(0);
+  const wasReleasedAfterDeleteMode = useSharedValue(false); // Track if item was released after entering delete mode
+
+  // Timer logic that runs every frame via useDerivedValue
+  useDerivedValue(() => {
+    "worklet";
+    frameCounter.value = frameCounter.value + 1;
+
+    // If hold-to-delete is disabled, skip all delete mode logic
+    if (disableHoldToDelete) {
+      deleteModeActive.value = false;
+      showDelete.value = false;
+      stillTimer.value = 0;
+      anyItemInDeleteMode.value = false;
+      return;
+    }
+
+    const isDragging = dragMode.value;
+    const isActive = position.active.value > 0.5;
+    const x = position.x.value;
+    const y = position.y.value;
+
+    // Track dragMode changes for detecting touches outside
+    const dragModeJustEnded = previousDragMode.value && !isDragging;
+    previousDragMode.value = isDragging;
+
+    // If delete mode is active, keep it active unless:
+    // 1. Another item becomes active (dragMode true but this item not active)
+    // 2. This item becomes active again AFTER it was released (user starts dragging it again)
+    // 3. User touches outside (dragMode becomes false and no item is active)
+    if (deleteModeActive.value) {
+      // Check if item was released (became inactive)
+      if (!isActive && !wasReleasedAfterDeleteMode.value) {
+        wasReleasedAfterDeleteMode.value = true;
+      }
+
+      if (isDragging && !isActive) {
+        // Another item is being dragged, exit delete mode
+        deleteModeActive.value = false;
+        anyItemInDeleteMode.value = false; // Clear global delete mode
+        showDelete.value = false;
+        stillTimer.value = 0;
+        wasReleasedAfterDeleteMode.value = false;
+      } else if (isActive && wasReleasedAfterDeleteMode.value) {
+        // This item became active again AFTER it was released, exit delete mode
+        deleteModeActive.value = false;
+        anyItemInDeleteMode.value = false; // Clear global delete mode
+        showDelete.value = false;
+        stillTimer.value = 0;
+        wasReleasedAfterDeleteMode.value = false;
+      } else if (!isDragging && !isActive) {
+        // Keep delete mode active (waiting for user interaction)
+        // The tap gesture handler in SwappableGrid will cancel it when user taps outside
+        showDelete.value = true;
+      } else {
+        // Keep delete mode active (item can still be held or released)
+        showDelete.value = true;
+      }
+      return;
+    }
+
+    // Reset release tracking when not in delete mode
+    wasReleasedAfterDeleteMode.value = false;
+
+    // If not in drag mode or not active, reset timer
+    if (!isDragging || !isActive) {
+      stillTimer.value = 0;
+      return;
+    }
+
+    // Item is active (being held down) - check if it's still
+    // Check if position has changed significantly (more than 10px threshold)
+    const moved =
+      Math.abs(x - lastX.value) > 10 || Math.abs(y - lastY.value) > 10;
+
+    if (moved) {
+      // Reset timer if item moved while being held
+      stillTimer.value = 0;
+      lastX.value = x;
+      lastY.value = y;
+      return;
+    }
+
+    // Initialize last position on first frame when active
+    if (stillTimer.value === 0) {
+      lastX.value = x;
+      lastY.value = y;
+    }
+
+    // If the tile hasn't moved significantly while being held → increment timer
+    // Increment by ~16ms per frame (assuming 60fps)
+    stillTimer.value += 16;
+
+    // Enter delete mode after 1 second (1000ms) of being held still
+    if (stillTimer.value >= 1000) {
+      deleteModeActive.value = true;
+      anyItemInDeleteMode.value = true; // Set global delete mode
+      showDelete.value = true;
+      wasReleasedAfterDeleteMode.value = false; // Reset on entry
+    }
+  });
+
+  const deleteButtonStyle = useAnimatedStyle(() => {
+    // Show delete button when delete mode is active (persists after release)
+    const shouldShow = showDelete.value;
+    return {
+      opacity: shouldShow ? 1 : 0,
+      pointerEvents: shouldShow ? "auto" : "none",
+      transform: [
+        { scale: withTiming(shouldShow ? 1 : 0.6, { duration: 120 }) },
+      ],
+    };
+  });
+
+  // Watch for when global delete mode is cancelled (user tapped outside)
+  useAnimatedReaction(
+    () => anyItemInDeleteMode.value,
+    (current, previous) => {
+      "worklet";
+      // If delete mode was cancelled globally (user tapped outside)
+      if (previous && !current && deleteModeActive.value) {
+        deleteModeActive.value = false;
+        showDelete.value = false;
+        stillTimer.value = 0;
+        wasReleasedAfterDeleteMode.value = false;
+      }
+    }
+  );
+
+  // Wiggle animation — triggers on editMode/active changes and delete mode
+  useAnimatedReaction(
+    () => ({
+      isEditMode: dragMode.value,
+      isActive: position.active.value > 0.5,
+      inDeleteMode: deleteModeActive.value,
+      anyInDeleteMode: anyItemInDeleteMode.value,
+    }),
+    ({ isEditMode, isActive, inDeleteMode, anyInDeleteMode }) => {
+      if (!wiggle) {
+        if (currentWiggleMode.value !== "none") {
+          cancelAnimation(rotation);
+          currentWiggleMode.value = "none";
+        }
+        rotation.value = withTiming(0, { duration: 150 });
+        return;
+      }
+
+      // Determine the target wiggle mode
+      let targetMode: "none" | "normal" | "delete" = "none";
+      if (inDeleteMode) {
+        targetMode = "delete";
+      } else if (anyInDeleteMode && !isActive) {
+        targetMode = "normal";
+      } else if (isEditMode && !isActive) {
+        targetMode = "normal";
+      }
+
+      // Only restart animation if mode changed
+      if (currentWiggleMode.value === targetMode) {
+        return; // Already in the correct mode, don't restart
+      }
+
+      const previousMode = currentWiggleMode.value;
+      currentWiggleMode.value = targetMode;
+
+      // Cancel current animation
+      cancelAnimation(rotation);
+
+      // If this item is in delete mode, wiggle more (2x degrees, faster)
+      if (targetMode === "delete") {
+        const deleteWiggleDegrees = wiggle.degrees * 2;
+        const deleteWiggleDuration = wiggle.duration * 0.7; // Faster wiggle
+
+        // If transitioning from normal wiggle, preserve the phase by scaling
+        if (previousMode === "normal") {
+          const currentRot = rotation.value;
+          const scaleFactor = deleteWiggleDegrees / wiggle.degrees;
+          rotation.value = currentRot * scaleFactor;
+        }
+
+        rotation.value = withRepeat(
+          withSequence(
+            withTiming(deleteWiggleDegrees, {
+              duration: deleteWiggleDuration,
+              easing: Easing.linear,
+            }),
+            withTiming(-deleteWiggleDegrees, {
+              duration: deleteWiggleDuration,
+              easing: Easing.linear,
+            })
+          ),
+          -1, // infinite
+          true
+        );
+      }
+      // Normal wiggle (when dragging but not this item, or any item in delete mode)
+      else if (targetMode === "normal") {
+        // If transitioning from delete wiggle, preserve the phase by scaling
+        if (previousMode === "delete") {
+          const currentRot = rotation.value;
+          const scaleFactor = wiggle.degrees / (wiggle.degrees * 2);
+          rotation.value = currentRot * scaleFactor;
+        }
+
+        rotation.value = withRepeat(
+          withSequence(
+            withTiming(wiggle.degrees, {
+              duration: wiggle.duration,
+              easing: Easing.linear,
+            }),
+            withTiming(-wiggle.degrees, {
+              duration: wiggle.duration,
+              easing: Easing.linear,
+            })
+          ),
+          -1, // infinite
+          true
+        );
+      }
+      // Stop wiggling
+      else {
+        rotation.value = withTiming(0, { duration: 150 });
+      }
+    },
+    [dragMode, position.active, deleteModeActive, anyItemInDeleteMode]
+  );
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const scale = position.active.value
+      ? withTiming(dragSizeIncreaseFactor, { duration: 120 })
+      : withTiming(1, { duration: 120 });
+
+    return {
+      position: "absolute",
+      width: itemWidth,
+      height: itemHeight,
+      transform: [
+        { translateX: position.x.value as any },
+        { translateY: position.y.value as any },
+        { scale: scale as any },
+        { rotate: `${rotation.value}deg` as any },
+      ],
+      zIndex: position.active.value ? 2 : 0,
+    } as any;
+  });
+
+  // Track delete mode on JS thread for conditional rendering
+  const [isInDeleteMode, setIsInDeleteMode] = useState(false);
+
+  useAnimatedReaction(
+    () => deleteModeActive.value,
+    (current) => {
+      runOnJS(setIsInDeleteMode)(current);
+    }
+  );
+
+  const handleDelete = () => {
+    // Exit delete mode when delete button is pressed
+    deleteModeActive.value = false;
+    anyItemInDeleteMode.value = false; // Clear global delete mode
+    showDelete.value = false;
+    stillTimer.value = 0;
+    wasReleasedAfterDeleteMode.value = false;
+    if (onDelete) {
+      onDelete();
+    }
+  };
+
+  return (
+    <Animated.View style={animatedStyle} pointerEvents="box-none">
+      {/* Full-item Pressable for delete - only active when in delete mode */}
+      {isInDeleteMode && (
+        <Pressable
+          onPress={handleDelete}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: itemWidth,
+            height: itemHeight,
+            zIndex: 2,
+          }}
+        />
+      )}
+
+      {/* Delete button (×) - visual indicator only */}
+      <Animated.View
+        style={[
+          {
+            position: "absolute",
+            top: itemHeight * 0.01,
+            right: itemWidth * 0.04,
+            width: itemWidth * 0.2,
+            height: itemHeight * 0.2,
+            borderRadius: 12,
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 3,
+          },
+          deleteButtonStyle,
+        ]}
+        pointerEvents="none"
+      >
+        <Text
+          style={{
+            fontSize: itemWidth * 0.2,
+            color: "black",
+            fontWeight: 500,
+          }}
+        >
+          ×
+        </Text>
+      </Animated.View>
+
+      {children}
+    </Animated.View>
+  );
+}