Component

Draggable List

A vertical list whose rows can be long-pressed and reordered.

Preview

How to use AI prompt

How to use

Minimal, copy-pasteable code.

Tasks.tsx

import { useState } from "react";
import { View, Text } from "react-native";
import { DraggableList } from "react-native-foonto";

export function Tasks() {
  const [data, setData] = useState([
    { id: "1", label: "Morning run" },
    { id: "2", label: "Write docs" },
    { id: "3", label: "Ship release" },
  ]);

  return (
    <DraggableList
      data={data}
      keyExtractor={(t) => t.id}
      itemHeight={64}
      onReorder={setData}
      renderItem={(t) => (
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            marginVertical: 4,
            paddingHorizontal: 16,
            borderRadius: 16,
            backgroundColor: "#18181b",
          }}
        >
          <Text style={{ color: "#fff", fontWeight: "600" }}>{t.label}</Text>
        </View>
      )}
    />
  );
}

Props

Prop	Type	Default	Description
`data`req	`T[]`	—	Items to render.
`keyExtractor`req	`(item: T) => string`	—	Stable unique key for an item.
`renderItem`req	`(item: T) => ReactNode`	—	Render one row (fills the row height).
`itemHeight`	`number`	64	Fixed row height in px.
`longPressDelay`	`number`	200	Long-press delay (ms) before a drag begins.
`onReorder`	`(data: T[]) => void`	—	Fired with the reordered data after a drag settles.
`style`	`FoontoStyle`	—	Style for the list container.

AI prompt

Install the library, then paste this into your AI coding agent to wire it up.

AI prompt

Add a drag-to-reorder list using the `react-native-foonto` library.

1. Make sure `react-native-foonto`, `react-native-reanimated`, and `react-native-gesture-handler` are installed and the app root is wrapped in `<GestureHandlerRootView>`.
2. Import `DraggableList` from `react-native-foonto`.
3. Keep the items in `useState`; pass `data`, a stable `keyExtractor`, and `renderItem`.
4. Persist the new order in `onReorder` (e.g. `setData`).
5. Use a fixed `itemHeight` matching your row design; long-press a row to start dragging.