ReorderableList
ReorderableList accepts an ordered
data array and calls onReorder({ data, from, to }) after a move. Update your state with the returned array. On native, long press the handle to drag; on web, drag a row or focus its handle and press Up or Down. Native drag gestures need GestureHandlerRootView at the application root.Use
scrollEnabled={false} for short native lists embedded in a parent ScrollView. Set w="100%" when placing the list in a column that aligns children to the start.Source
LLM docs
Package
Examples
1
Properties
35
Playground
Reorder tasks
Drag a row to change its position. On web, focus the reorder handle and use the Up and Down arrows; on native, long press the handle or use screen reader move actions. The list is controlled, so
onReorder updates the items state.Loading demo…
import { useState } from 'react';
import { Block, Column, ReorderableList, Text } from '@plocks/ui';
const initialTasks = [
{ id: 'plan', title: 'Plan the release' },
{ id: 'build', title: 'Build the package' },
{ id: 'share', title: 'Share with developers' },
];
export function Demo() {
const [tasks, setTasks] = useState(initialTasks);
return (
<Column gap="sm" fullWidth>
<ReorderableList
w="100%"
scrollEnabled={false}
data={tasks}
keyExtractor={(task) => task.id}
getItemLabel={(task) => task.title}
onReorder={({ data }) => setTasks(data)}
renderItem={({ item }) => <Block p="sm" fullWidth><Text>{item.title}</Text></Block>}
/>
</Column>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources