React native expo module to create a list that you can drag and reorder items(React Native Drag and Order)

Share Your Love

React Native Drag and Order

An easy to use component for quickly adding drag and order scrollable list to your app.

Video Demo


  • Animations powered with Reanimated v2.
  • Compatible with Expo.
  • Written in TypeScript.
  • Customizable Handle component.
  • Utility functions to facilitate reordering of lists.


$ yarn add @markmccoid/react-native-drag-and-order
# Other dependancies
$ yarn add moti
$ expo install react-native-reanimated react-native-gesture-handler


The DragDropEntry component will accept children, which will be the items you would like to drag and order. The children you will be passing should be components that:

  1. Have an id prop. ** This is important
  2. Have a height that MATCHES the itemHeight props value provided to the DragDropEntry components itemHeight prop.

Here is an example of using the component.

The DragDropEntry component is the parent component that wraps the children Items that you want to be able to drag and drop. You can create your own Item component for the children or use the provided DragItem component to wrap the values you want to be able to order.

A helper function, sortArray, is very useful in reordering and resetting any position/index field in your list. This helper function is essential when you want to persist the order of your items to your state.

import DragDropEntry, { DragItem, sortArray, TScrollFunctions } from "react-native-drag-and-order";

export type ItemType = {
  id: number | string;
  name: string;
  pos: number;
const items = itemList: [
    { id: "a", name: "Coconut Milk", pos: 0 },
    { id: "b", name: "Lettuce", pos: 1 },
    { id: "c", name: "Walnuts", pos: 2 },
    { id: "d", name: "Chips", pos: 3 },
    { id: "e", name: "Ice Cream", pos: 4 },
    { id: "f", name: "Carrots", pos: 5 },
    { id: "g", name: "Onions", pos: 6 },
    { id: "h", name: "Cheese", pos: 7 },
    { id: "i", name: "Frozen Dinners", pos: 8 },
    { id: "j", name: "Yogurt", pos: 9 },
    { id: "k", name: "Kombucha", pos: 10 },
    { id: "l", name: "Lemons", pos: 11 },
    { id: "m", name: "Bread", pos: 12 },

  scrollStyles={{ width: "100%", height: "30%", borderWidth: 1, borderColor: "#aaa" }}
  updatePositions={(positions) =>
        updateItemList(sortArray<ItemType>(positions, items, "pos"))
  getScrollFunctions={(functionObj) => setScrollFunctions(functionObj)}
  handle={AltHandle} // This is optional.  leave out if you want the default handle
  {, idx) => {
      return (
          onRemoveItem={() => removeItemById(}
          firstItem={idx === 0 ? true : false}


View Github

Share Your Love
Avatar photo
Lingaraj Senapati

Hey There! I am Lingaraj Senapati, the Founder of My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.

Articles: 411

Newsletter Updates

Enter your email address below to subscribe to our newsletter