Reorderable list

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/reorderable-list.json

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/reorderable-list.

Usage

import { useState } from "react";
import { Text, View } from "react-native";
import { ReorderableList } from "@/components/goodui-native/reorderable-list/reorderable-list";

type Song = { id: string; title: string; artist: string };

export function Queue({ initial }: { initial: Song[] }) {
  const [songs, setSongs] = useState(initial);
  return (
    <ReorderableList
      data={songs}
      keyExtractor={(s) => s.id}
      getItemLabel={(s) => s.title}
      accessibilityLabel="Up next"
      onReorder={setSongs}
      itemHeight={60}
      style={{ flex: 1 }}
      contentContainerStyle={{ padding: 16 }}
      renderItem={({ item }) => (
        <View style={{ paddingHorizontal: 16 }}>
          <Text>{item.title}</Text>
          <Text>{item.artist}</Text>
        </View>
      )}
    />
  );
}

When to use

Examples

<ReorderableList
  data={tasks}
  keyExtractor={(t) => t.id}
  dragHandle
  disabled={!editing}
  onReorder={setTasks}
  onItemPress={(t) => toggleDone(t.id)}
  renderItem={({ item }) => <TaskRow task={item} />}
/>

<ReorderableList
  data={cards}
  keyExtractor={(c) => c.id}
  onReorder={(next, { from, to }) => {
    setCards(next);
    api.saveOrder(next.map((c) => c.id));
  }}
  renderItem={({ item, active }) => <CardRow card={item} lifted={active} />}
/>

API reference

Motion and haptics

• •Lift: the row scales to 1.03 on the snappy spring and a raised surface with a shadow fades in under it.
• •The lifted row follows the finger 1:1 with a little give past the first and last slot; the others slide to their new slots on the smooth spring as it crosses their midpoints.
• •Auto-scroll: within 64 pt of the top or bottom edge the list scrolls up to 14 pt per frame, faster closer to the edge, and the row keeps tracking the finger.
• •Drop: the row settles into its slot on the smooth spring while the shadow fades.
• •Reduced motion: no lift scale, the other rows jump to their slots, the drop and the shadow use a short fade.

• •Haptic: drag-start when a row lifts, drop when it lands
• •Haptic: select on every swap while dragging and on each accessibility move

• •Dragging, sliding and auto-scroll run on the UI thread with one shared positions map; React state changes only on lift and drop.
• •Rows are absolutely positioned at a fixed height and not virtualized: keep lists to roughly a hundred rows.
• •The auto-scroll frame callback runs only while a row is lifted.

Accessibility

• •Rows are list items in a list, each with Move up and Move down accessibility actions (plus activate when onItemPress is set). Every move is announced as '<label>, position 3 of 8'.
• •On the web every row is focusable: Alt + Arrow Up and Alt + Arrow Down move it (declared with aria-keyshortcuts), Enter presses it.
• •getItemLabel names rows on native and in announcements; on the web the visible text names the row.
• •The grip is hidden from screen readers because the actions do the same; it has a 44 pt target.

Notes for AI

Related