DraggableGrid

DraggableGrid enables you to easily create a grid of sortable draggable components.

It is built on top of the useDragableGrid hook.

This component does not handle variable sized items for now (all items must have the same size).

Usage

import {
  DndProvider,
  type ObjectWithId,
  Draggable,
  DraggableGrid,
  DraggableGridProps,
} from "@mgcrea/react-native-dnd/src";
import { type FunctionComponent } from "react";
import { StyleSheet, Text, View } from "react-native";

const GRID_SIZE = 3;
const items: string[] = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
const data = items.map((letter, index) => ({
  id: `${index}-${letter}`,
  value: letter,
})) satisfies ObjectWithId[];

export const DraggableGridExample: FunctionComponent = () => {
  const onGridOrderChange: DraggableGridProps["onOrderChange"] = (value) => {
    console.log("onGridOrderChange", value);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>DraggableGrid{"\n"}Example</Text>
      <DndProvider>
        <DraggableGrid direction="row" size={GRID_SIZE} style={styles.grid} onOrderChange={onGridOrderChange}>
          {data.map((item) => (
            <Draggable key={item.id} id={item.id} style={styles.draggable}>
              <Text style={styles.text}>{item.value}</Text>
            </Draggable>
          ))}
        </DraggableGrid>
      </DndProvider>
    </View>
  );
};

Props

The DraggableGrid component accepts the following props: