Create a Draggable To-Do List App with React Native in 10 Steps

Building a Draggable To-Do List App with React Native

In this tutorial, we’ll create a draggable to-do list app using React Native and the react-native-draggable-flatlist library. Our app will allow users to add, delete, and mark to-do items as complete, as well as drag and reorder them.

Setting Up the Project

To start, we’ll create a new React Native project using Expo. Run the following command to create the project:

bash
expo init todo-app


Next, we’ll install the required libraries:

bash
npm install react-native-draggable-flatlist react-native-gesture-handler react-native-reanimated


We’ll also need to update the App.js file to support the gesture handler:

“`jsx
import { GestureHandlerRootView } from ‘react-native-gesture-handler’;

const App = () => {
return (

// app content here

);
};
“`

Adding Input for To-Do Items

Before we can add to-do items, we need to create an input field for users to enter their tasks. We’ll use the Input component from react-native-design-system.

First, we’ll wrap our app with the ThemeProvider from react-native-design-system:

“`jsx
import { ThemeProvider } from ‘react-native-design-system’;

const App = () => {
return (

// app content here

);
};
“`

Next, we’ll create a new component for the to-do list:

“`jsx
import React, { useState } from ‘react’;
import { Input } from ‘react-native-design-system’;

const TodoList = () => {
const [inputValue, setInputValue] = useState(”);

return (

);
};
“`

Adding To-Do Items

Now that we have an input field, we can add to-do items to our list. We’ll use the DraggableFlatList component from react-native-draggable-flatlist.

First, we’ll create a data array to store our to-do items:

jsx
const data = [
{
id: 1,
task: 'Buy milk',
completed: false,
},
{
id: 2,
task: 'Walk the dog',
completed: false,
},
];


Next, we’ll render the DraggableFlatList component:

“`jsx
import { DraggableFlatList } from ‘react-native-draggable-flatlist’;

const TodoList = () => {
return (

{item.task}

)}
keyExtractor={(item) => item.id.toString()}
/>
);
};
“`

Allowing To-Do Items to be Deleted and Marked as Complete

Finally, we’ll add the ability to delete and mark to-do items as complete. We’ll use the onLongPress event to trigger the deletion of an item, and the disabled prop to prevent accidental taps.

“`jsx
import { ListItem } from ‘react-native-design-system’;

const TodoList = () => {
const handleDelete = (item) => {
// delete item logic here
};

return (
{item.task}

)}
keyExtractor={(item) => item.id.toString()}
/>
);
};
“`

That’s it! We’ve now created a draggable to-do list app with React Native and react-native-draggable-flatlist.