react-native sortable flatlist that works with multiple data arrays and headers - uses react-native-gesture-handler and react-native-reanimated
npm install react-native-sortable-multilistA 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.
!react-native-sortable-multilist
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.
``react-native-gesture-handler
yarn add react-native-reanimated
yarn add `
#### 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
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
``
import { SortableMultilist } from 'react-native-sortable-multilist';
| prop | type | description |
| --- | --- | --- |
| data | [{ dataItem }] \| [[{ dataItem }]] | requiredrenderItem
A flat array or an array of arrays containing the list(s) of data that you want to enable sorting on. |
| | ({ item }) => React.Component \| [({ item }) => React.Component] | requireddata={[list1, list2]}
A render function or an array of render functions.
If you have 2 lists of data, then you can provide 2 render functions in an array so that the 2 lists can be rendered as different components. (You can optionally just used one renderItem function with multiple arrays of data)
i.e. if , then renderItem can be renderItem={[renderFn1, renderFn2]}. { item } is an entry from the data list provided in the data prop, the shape of it is up to you. |keyExtractor
| | (item, index) => string | requiredkey
A keyExtractor function that receives the entry from the data list and the index, this function needs to return a unique string to be used as the for the render function. |renderHeader
| | () => React.Component \| [() => React.Component] | notRequiredHeader
Render function or an array of them for rendering a component between each list.data
The length of the array needs to match the length of the if multiple lists are being used. | updateListOnDragEnd
| | (list: Data) => void | notRequiredupdateListDebounceDuration
A function that will receive the updated list(s) when the dragging/sorting ends |
| | number | notRequired default: 3000updateListOnDragEnd
Duration in milliseconds for debouncing calls to .setState
Debounce is used in order to make the component more performant, as calls to generate re-renders which cause a considerable amount of lag to the interactions of the component. |disableUpdateListDebounce
| | boolean | notRequired default: falseupdateListOnDragEnd
Debouncing can be turned off so that is called immediately after every interaction rather then waiting for the updateListDebounceDuration, as mentioned above this can cause performance issues. |disableAutoUpdate
| | boolean | notRequired default: falsedisableAutoUpdate
Enabling makes the list super performant as no setStates will occur whilst a user is interacting with the list.ref
This is only useful if a is added to the SortableMultilist so that the parent can call getListForSaving() directly from the ref. i.e. sortableMultilistRef.current.getListForSaving() will return the sorted list so that a setState can be performed manually from the parent component.disableLongPress
See Most Performant Usage for an example. |
| | boolean | notRequired default: falseenableRightDragArea
Setting this prop to true disables the default LongPress interaction which starts an item dragging. |
| | boolean | notRequired default: falserightDragAreaOffsets
Setting this prop will enable the right fifth portion of the item to immediately trigger a drag when pressed in, this area can be refined using the prop. |rightDragAreaOffsets
| | { width: number, rightMargin?: number } | notRequired width required, marginRight notRequiredwidth
This prop accepts an object with a prop which defines the active/tappable area. The rightMargin prop is optional, but is used to offset the active area from the right edge of the item - useful if the active area requires a right margin. |
#### Multiple Lists
`JSX
import * as React from 'react';
import { View, Text } from 'react-native';
import { SortableMultilist } from 'react-native-sortable-multilist';
const Header1 = () => (
const Header2 = () => (
const RenderItem1 = ({ item }) => (
const RenderItem2 = ({ item }) => (
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 (
keyExtractor={keyExtractor}
renderItem={renderItem}
renderHeader={renderHeader}
updateListOnDragEnd={updateListOnDragEnd}
/>
);
}
`
#### Single List
`JSX${item.text}-${index}
// ... (see above for imports etc..)
const keyExtractor = (item: Item, index: number) => ;
const renderItem = RenderItem1;
const renderHeader = Header1;
export function MultiListExample() {
const [list1State, updateList1] = React.useState(list1);
const updateListOnDragEnd = (list) => {
updateList1(list);
};
return (
keyExtractor={keyExtractor}
renderItem={renderItem}
renderHeader={renderHeader}
updateListOnDragEnd={updateListOnDragEnd}
/>
);
}
`
#### Most Performant Usage
`JSX${item.text}-${index}
// ... (see above for imports etc..)
const keyExtractor = (item: Item, index: number) => ;
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 (
<>
data={list1State}
keyExtractor={keyExtractor}
renderItem={renderItem}
renderHeader={renderHeader}
disableAutoUpdate
/>
>
);
}
`
We use SemVer for versioning. For the versions available, see the tags on this repository.
* Quang Vong - quizzy
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details
* react-native-gesture-handlerreact-native-reanimated
* react-native-draggable-flatlist`
*