Creating New Tasks

In this tutorial, we’ll implement functionality to add new tasks to our task list. We’ll update our UI to include a scrollable task list and a floating action button that opens a dialog for adding new tasks.

Step 1: Add the Plus Icon to your project

Firstly, we need to add the Plus icon to our project icons.

Create a new file at lib/icons/Plus.tsx and add the following code:

lib/icons/Plus.tsx

import { Plus } from 'lucide-react-native';
import { iconWithClassName } from './iconWithClassName';
iconWithClassName(Plus);
export { Plus };

Step 2: Create an AddTask Button Component

Create a new file at components/AddTask.tsx and add the following code:

Info

The code below will produce a red line under the onSave prop we are passing to the TaskDialogue component. We will fix this later.

For the time being, go ahead and add the code below to your new components/AddTask.tsx file:

components/AddTask.tsx

import * as React from 'react';
import { TouchableOpacity, View } from 'react-native';
import { Plus } from '@/lib/icons/Plus';
import { TaskDialogue } from './TaskDialogue';
import { Dialog, DialogTrigger } from '@/components/ui/dialog';
import { ITask } from '@/app';

interface AddTaskProps {
  onAdd: (title: string, category: string) => void;
}

export default function AddTask({ onAdd }: AddTaskProps) {
  const [showDialog, setShowDialog] = React.useState(false);
  const [task, setTask] = React.useState<{ title: string; category: string }>({
    title: '',
    category: '',
  });

  const handleSave = (updatedTask: ITask) => {
    if (updatedTask.title.trim()) {
      onAdd(updatedTask.title, updatedTask.category);
      setTask({ title: '', category: '' });
      setShowDialog(false);
    }
  };

  return (
    <View className="absolute bottom-0 z-10">
      <Dialog open={showDialog} onOpenChange={setShowDialog}>
        <DialogTrigger asChild>
          <TouchableOpacity className="bg-brand-primary flex h-24 w-24 items-center justify-center rounded-full p-1">
            <View className="bg-brand-primary border-background flex h-20 w-20 items-center justify-center rounded-full border-4 p-3">
              <Plus size={48} color="white" />
            </View>
          </TouchableOpacity>
        </DialogTrigger>

        <TaskDialogue
          task={{ id: 0, title: task.title, category: task.category, isChecked: false }}
          setTask={(newTask) => {
            setTask({ title: newTask.title, category: newTask.category });
          }}
          showDialog={showDialog}
          setShowDialog={setShowDialog}
          onSave={handleSave}
        />
      </Dialog>
    </View>
  );
}

export { AddTask };

Note

Understanding the AddTask Component

1. The component accepts an onAdd prop, which is a function that will be called when a new task is added
2. We’re using state variables to track the title and category of the new task
3. The handleSave function validates that the title isn’t empty, then calls the onAdd function with the title and category
4. We’re using the Dialog and DialogTrigger components from the @/components/ui/dialog module to create a dialog that will be triggered when the user taps the FAB (floating action button)
5. This is the same TaskDialogue component that we use for editing tasks, but with different props
6. The floating action button (FAB) is positioned at the bottom of the screen with absolute positioning

Step 3: Update the TaskDialogue Component

We need to update our TaskDialogue component to handle both editing existing tasks and creating new ones.

We will do this by adding onSave as a new optional prop to the TaskDialogue component. This prop will be called when the user saves a new task. If the task is new, we will call the onSave prop and the return early from the function. If it’s an existing task, we will update it and close the dialog.

1. Let’s start by updating the TaskDialogueProps interface to include the new onSave prop, then pass it as a prop to the TaskDialogue component:

   components/TaskDialogue.tsx

   interface TaskDialogProps {
     onSave?: (task: ITask) => void;
     task: ITask;
     setTask: (task: ITask) => void;
     setShowDialog: (showDialog: boolean) => void;
     showDialog: boolean;
   }
   function TaskDialogue({ onSave, task, setTask, setShowDialog, showDialog }: TaskDialogProps) {
     // Rest of the component...
   }

2. Next, let’s call onSave prop conditionally in thehandleSave TaskDialog component:

   components/TaskDialogue.tsx

   const handleSave = () => {
     const nextTask = {
       ...task,
       title: editedTitle,
       category: editedCategory,
     };
   
     setTask(nextTask);
     // If onSave is defined, call it and return early
     if (onSave) {
       onSave(nextTask);
       return;
     }
     setEditedTitle('');
     setEditedCategory('');
     setShowDialog(false);
   };

Step 4: Update the HomeScreen Component

Finally, let’s update our HomeScreen component inside app/index.tsx to manage tasks with React state and add the ability to create new tasks:

app/index.tsx

import * as React from 'react';
import { ScrollView, View } from 'react-native';
import { Text } from '@/components/ui/text';
import { Task } from '@/components/Task';
import { AddTask } from '@/components/AddTask';

interface ITask {
  id: number;
  title: string;
  category: string;
  isChecked: boolean;
}

export default function HomeScreen() {
  const initialTasks: ITask[] = [
    {
      id: 1,
      title: 'Task 1',
      category: 'Category 1',
      isChecked: false,
    },
    {
      id: 2,
      title: 'Task 2',
      category: 'Category 2',
      isChecked: true,
    },
    {
      id: 3,
      title: 'Task 3',
      category: 'Category 3',
      isChecked: false,
    },
  ];
  const [tasks, setTasks] = React.useState<ITask[]>(initialTasks);

  const handleAddTask = (title: string, category: string) => {
    const nextId = tasks.length > 0 ? Math.max(...tasks.map((t) => t.id)) + 1 : 1;
    setTasks([...tasks, { id: nextId, title, category, isChecked: false }]);
  };

  return (
    <View className="bg-background flex-1 items-center justify-center gap-5 p-6">
      {initialTasks.map((task) => (
        <Task key={task.id} task={task} />
      ))}
    </View>
    <View className="flex-1 flex justify-between bg-background">
      <View className="flex flex-row justify-center">
        <Text className="pt-20 text-foreground font-bold text-6xl">
          HallPass
        </Text>
      </View>
      <ScrollView
        contentContainerStyle={{
          paddingHorizontal: 24,
          paddingVertical: 16,
        }}
      >
        {tasks.map((task) => (
          <Task key={task.id} task={task} />
        ))}
      </ScrollView>
      <View className="relative flex items-center">
        <AddTask onAdd={handleAddTask} />
      </View>
    </View>
  );
}

How it all works together

1. The HomeScreen component manages the list of tasks with state
2. It passes the handleAddTask function to the AddTask component
3. The AddTask component opens a dialog when the user taps the FAB
4. The TaskDialog component handles the creation of new tasks
5. When the user saves a new task, the handleAddTask function is called, which adds the new task to the list

Testing your changes

After implementing these changes:

1. You should see a floating ”+” button at the bottom of your screen
2. Tap the FAB to open the dialog
3. Enter a title and category for the new task
4. Tap “Save changes” to add the task to the list
5. You can still edit existing tasks by long-pressing on them
6. As you add more tasks, you can scroll through the list to see all of them

Next Steps

In the next tutorial, we’ll look at how to save our tasks to local storage so they persist between app sessions.