Building a Draggable To-Do List App with React Native

Setting Up the Project

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

expo init todo-app

Next, we’ll install the required libraries:

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:

import { GestureHandlerRootView } from 'eact-native-gesture-handler';

const App = () => {
  return (
    <GestureHandlerRootView>
      // app content here
    </GestureHandlerRootView>
  );
};

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:

import { ThemeProvider } from 'eact-native-design-system';

const App = () => {
  return (
    <ThemeProvider>
      // app content here
    </ThemeProvider>
  );
};

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

import React, { useState } from 'eact';
import { Input } from 'eact-native-design-system';

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

  return (
    <>
      <Input 
        value={inputValue} 
        onChangeText={(text) => setInputValue(text)} 
        placeholder="Enter task" 
      />
    </>
  );
};

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:

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

Next, we’ll render the DraggableFlatList component:

import { DraggableFlatList } from 'eact-native-draggable-flatlist';

const TodoList = () => {
  return (
    <DraggableFlatList
      data={data}
      renderItem={({ item }) => (
        <>
          {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.

import { ListItem } from 'eact-native-design-system';

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

  return (
    <DraggableFlatList
      data={data}
      renderItem={({ item }) => (
        <ListItem
          onLongPress={() => handleDelete(item)}
          disabled={item.completed}
        >
          {item.task}
        </ListItem>
      )}
      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.