react-native-list-sort

  

Simple, light-weight and smooth sortable list for react-native apps (compatible for Expo)

Getting started

npm install react-native-list-sort

NOTE:
This package uses react-native-reanimated (version 2) and react-native-gesture-handler.
In case you do not have these pacakges installed please see and follow the Softare-Mansion docs:

react-native-reanimated
react-native-gesture-handler

Usage

import List from 'react-native-list-sort';

     return (
        <List
          items={originalList}
          renderItem={renderItem}
          itemHeight={ITEM_HEIGHT}    // <----- MUST MATCH THE ITEM'S STYLE HEIGHT
          onOrderChange={onOrderChange}
        />
     );

Examples

                          Example 1                                                     Example 2

API

Property	Type	Required	Default
items	Array	yes	-
renderItem	() => JSX.Element	yes	-
itemHeight	Number	yes	-
onOrderChange	(sortedList: Array) => void	yes	-
dragableAreaSize	number	no	itemHeight
style	style	no	-
contentContainerStyle	style	no	-

* dragableAreaSize enables the capability to make only part of the item draggable (default to the left part of item)

Inspiration

William Candillon - Chrome Drag-to-Sort - “Can it be done in React Native?” - season 4

License

This project is licensed under the MIT License