React-Native-Sortable-Multilist

A react-native component for rendering and sorting multiple lists. The component uses react-native-gesture-handler and react-native-reanimated for a performant result. Items can be reordered by long pressing on the item and then dragging around and dropping in order to reorder a list or lists.

Getting Started

Prerequisites

The component is built up around components from react-native-gesture-handler and react-native-reanimated and therefore will have to be installed in your project in order to use react-native-sortable-multilist.

They were declared as peer dependencies, because react-native linking is involved in order to get both libraries running properly in your project. In particular react-native-gesture-handler can require some additional set up if your project uses react-native-navigation or react-navigation.

yarn add `react-native-gesture-handler`
yarn add `react-native-reanimated`

Linking

The readme pages for both packages will tell you that you can run react-native link in order to link the underlying native libraries to your project, but I found this didn't work properly, instead I think manually linking for both iOS and android work best.

iOS manual linking

For instructions on how to manually link both libraries on iOS follow the instructions given this thread

android manual linking

For instructions on how to manually link both libraries on android follow the instructions given in this thread

Installing

Once you have installed and linked both of the above libraries, you can install this package using yarn or npm.

yarn add react-native-sortable-multilist

Or

npm install react-native-sortable-multilist

Usage / API

import { SortableMultilist } from 'react-native-sortable-multilist';

Examples

Multiple Lists

import * as React from 'react';
import { View, Text } from 'react-native';
import { SortableMultilist } from 'react-native-sortable-multilist';

const Header1 = () => (<View><Text>Header 1</Text></View>);
const Header2 = () => (<View><Text>Header 2</Text></View>);
const RenderItem1 = ({ item }) => (<View><Text>{item.text}</Text></View>);
const RenderItem2 = ({ item }) => (<View><Text>{item.text}</Text></View>);

const list1 = [...Array(10)].map((item, index) => ({
  text: `Foo-${index}`
}));

const list2 = [...Array(10)].map((item, index) => ({
  text: `Bar-${index}`
}));

const keyExtractor = (item: Item, index: number) => `${item.text}-${index}`;
const renderItem = [RenderItem1, RenderItem2];
const renderHeader = [Header1, Header2];

export function MultiListExample() {
  const [list1State, updateList1] = React.useState(list1);
  const [list2State, updateList1] = React.useState(list2);

  const data = [list1State, list2State];

  const updateListOnDragEnd = (list) => {
    const [updatedList1, updatedList2] = list;
    updateList1(updatedList1);
    updateList2(updatedList2);
};

  return (
    <SortableMultilist
      data={data}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      renderHeader={renderHeader}
      updateListOnDragEnd={updateListOnDragEnd}
      />
  );
} 

Single List

// ... (see above for imports etc..)
const keyExtractor = (item: Item, index: number) => `${item.text}-${index}`;
const renderItem = RenderItem1;
const renderHeader = Header1;

export function MultiListExample() {
  const [list1State, updateList1] = React.useState(list1);

  const updateListOnDragEnd = (list) => {
    updateList1(list);
  };

  return (
    <SortableMultilist
      data={list1State}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      renderHeader={renderHeader}
      updateListOnDragEnd={updateListOnDragEnd}      
    />
  );
} 

Most Performant Usage

// ... (see above for imports etc..)
const keyExtractor = (item: Item, index: number) => `${item.text}-${index}`;
const renderItem = RenderItem1;
const renderHeader = Header1;

export function MultiListExample() {
  const sortableListRef = React.createRef();
  const [list1State, updateList1] = React.useState(list1);
  const updateListOnDragEnd = (list) => {
    updateList1(list);
  };
	
  const manuallyUpdateListState = () => {
    const updatedList = sortableListRef.current.getListForSaving();
    updateListOnDragEnd(updatedList);
  }
  
  return (
    <>
      <SortableMultilist
        ref={sortableListRef}
	data={list1State}
	keyExtractor={keyExtractor}
	renderItem={renderItem}
	renderHeader={renderHeader}
	disableAutoUpdate
      />
      <TouchableOpacity onPress={manuallyUpdateListState}>
	<Text>Update List Now</Text>
      </TouchableOpacity>
    </>
  );
}  

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Quang Vong - quizzy

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• react-native-gesture-handler
• react-native-reanimated
• react-native-draggable-flatlist