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

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

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)

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

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