React Native Reorderable List

A reorderable list for React Native applications, powered by Reanimated 🚀

Index

• Install
• Components
  • ReorderableList
  • ReorderableListItem
• Hooks
  • useReorderableDrag
  • useReorderableDragStart
  • useReorderableDragEnd
• Utils
• Example
• License

Install

Npm:

npm install --save react-native-reorderable-list

Yarn:

yarn add react-native-reorderable-list

Then you need to install these two peer dependencies:

• React Native Reanimated >=3.6.0
• React Native Gesture Handler >=2.0.0

Components

ReorderableList

This component uses a FlatList and it extends its props:

The following props from FlatList are not supported:

• horizontal
• scrollEventThrottle
• removeClippedSubviews
• CellRendererComponent
• numColumns

ReorderableListItem

This component allows you to animate the item when it's dragged. It currently supports two animations: scale and opacity. Using this component is optional.

Hooks

useReorderableDrag

This hook creates a function that triggers the drag of a list item. It's usually called on a long press event. This hook can only be used inside of a list item component.

Returns

• () => void

useReorderableDragStart

This hook allows handling the drag start event of a list item. It receives a worklet callback that is called when the drag starts. It's recommended to wrap the handler function in a useCallback as follows: useReorderableDragStart(useCallback(...)). This hook can only be used inside of a list item component.

Parameters

• onStart: (index: number) => void

useReorderableDragEnd**

This hook allows handling the drag end event of a list item. It receives a worklet callback that is called when the drag ends. It's recommended to wrap the handler function in a useCallback as follows: useReorderableDragEnd(useCallback(...)). This hook can only be used inside of a list item component.

Parameters

• onEnd: (from: number, to: number) => void

Utils

• reorderItems: <T>(data: T[], from: number, to: number) => T[]

  This function receives an array of items, the index of the item to be moved, and the index of the new position and it returns a new array with the items reordered.

Example

Here is an example of how to use this component. More examples can be found in the example directory of the repository.

import React, {useState} from 'react';
import {ListRenderItemInfo, Pressable, StyleSheet, Text} from 'react-native';
import ReorderableList, {
  ReorderableListItem,
  ReorderableListReorderEvent,
  reorderItems,
  useReorderableDrag,
} from 'react-native-reorderable-list';

interface CardProps {
  id: string;
  color: string;
  height: number;
}

const list: CardProps[] = [
  {id: '0', color: 'red', height: 100},
  {id: '1', color: 'blue', height: 150},
  {id: '2', color: 'green', height: 80},
  {id: '3', color: 'violet', height: 100},
  {id: '4', color: 'orange', height: 120},
  {id: '5', color: 'coral', height: 100},
  {id: '6', color: 'purple', height: 110},
  {id: '7', color: 'chocolate', height: 80},
  {id: '8', color: 'crimson', height: 90},
  {id: '9', color: 'seagreen', height: 90},
];

const Card: React.FC<CardProps> = React.memo(({id, color, height}) => {
  const drag = useReorderableDrag();

  return (
    <ReorderableListItem>
      <Pressable style={[styles.card, {height}]} onLongPress={drag}>
        <Text style={[styles.text, {color}]}>Card {id}</Text>
      </Pressable>
    </ReorderableListItem>
  );
});

const App = () => {
  const [data, setData] = useState(list);

  const renderItem = ({item}: ListRenderItemInfo<CardProps>) => (
    <Card {...item} />
  );

  const handleReorder = ({from, to}: ReorderableListReorderEvent) => {
    const newData = reorderItems(data, from, to);
    setData(newData);
  };

  return (
    <ReorderableList
      data={data}
      onReorder={handleReorder}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
};

const styles = StyleSheet.create({
  card: {
    justifyContent: 'center',
    alignItems: 'center',
    margin: 6,
    borderRadius: 5,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#ddd',
  },
  text: {
    fontSize: 20,
  },
});

export default App;

License

MIT

Made with create-react-native-library