Introducing react-native-draggable-list — A Smooth, Animated Drag & Drop List for React Native

Building smooth drag-and-drop interactions in React Native can be tricky — especially if you're aiming for great performance, gesture accuracy, and a clean UI. Today, I’m excited to share something I built to simplify that process:

🚀 react-native-draggable-list

A lightweight and customizable drag-and-drop list component for React Native using Expo, React Native Reanimated, and Gesture Handler.
It’s designed to be simple, performant, and developer-friendly.

🌟 Why I Built This

While working on a mobile project, I needed a draggable list with:

• Smooth animations

• Easy sorting

• Customizable list items

• A reusable component API

• Expo compatibility

Most existing solutions were heavy or outdated — so I built my own.

🎥 Demo

Here’s the drag-and-drop interaction in action:\

📦 GitHub Repository

The full source code, installation steps, and usage example are available here:

👉 GitHub: https://github.com/hamidukarimi/react-native-draggable-list

📁 Project Structure

Here’s how the project is organized:

react-native-draggable-list/
├── app/
│   ├── (pages)/
│   │   ├── index.jsx
│   │   └── _layout.jsx
│   ├── assets/
│   │   └── demo.gif
│   └── _globals.css
├── README.md
├── package.json
├── tailwind.config.js
└── app.json

🛠️ Features

✅ Drag & Drop

Smooth sorting using react-native-gesture-handler + react-native-reanimated.

✅ Customizable Items

Pass your own component to render each list row.

✅ Expo-Friendly

Works perfectly with Expo SDK 52+.

✅ Lightweight

Only a few internal hooks, simple structure — no unnecessary overhead.

📚 Tech Stack

• React Native

• Expo

• React Native Reanimated

• Gesture Handler

• React Native FlatList

🚀 Future Improvements

I’m actively iterating on this project, and upcoming updates include:

• Add more drag handle icon sets

• Add dark mode

• Convert to TypeScript version

• Release a standalone NPM package

• Better documentation

• Add more examples

⭐ Contributions Welcome

If you want to contribute, improve animations, or add new features:

👉 Fork the repo
👉 Open a pull request
👉 Or start a discussion

Any contribution is appreciated!

💬 Final Thoughts

Open-source is a big part of how we all learn and grow as developers.
I hope react-native-draggable-list saves someone time and helps push their UI quality to the next level.

If you like it, feel free to star the repo ⭐ on GitHub — it really helps!

🔖 Suggested Tags for Hashnode

Add these when publishing:

• React Native

• Expo

• Mobile Development

• Open Source

• JavaScript

• UI Components

• Drag and Drop

• Reanimated