DraggableStack

DraggableStack enables you to easily create a stack of sortable draggable components.

It is built on top of the useDragableStack hook.

This component does support variable width and height items.

Demo

Usage

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

const items = ["🤓", "🤖🤖", "👻👻👻", "👾👾👾👾"];
const data = items.map((letter, index) => ({
  value: letter,
  id: `${index}-${letter}`,
})) satisfies ObjectWithId[];

export const DraggableStackExample: FunctionComponent = () => {
  const onStackOrderChange: DraggableStackProps["onOrderChange"] = (value) => {
    console.log("onStackOrderChange", value);
  };
  const onStackOrderUpdate: DraggableStackProps["onOrderUpdate"] = (value) => {
    console.log("onStackOrderUpdate", value);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>DraggableStack Example</Text>
      <DndProvider>
        <DraggableStack
          direction="row"
          gap={10}
          style={styles.stack}
          onOrderChange={onStackOrderChange}
          onOrderUpdate={onStackOrderUpdate}
        >
          {data.map((letter) => (
            <Draggable key={letter.id} id={letter.id} style={[styles.draggable]}>
              <Text style={styles.text}>{letter.value}</Text>
            </Draggable>
          ))}
        </DraggableStack>
      </DndProvider>
    </View>
  );
};

Props

The DraggableStack component accepts the following props: