Saving Tasks to Local Storage

In this tutorial, we’ll implement functionality to save tasks to the device’s local storage, allowing them to persist between app sessions. We’ll use React Native’s AsyncStorage to achieve this.

Step 1: Import AsyncStorage and Define a Storage Key

In your main file (app/index.tsx):

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';
import AsyncStorage from "@react-native-async-storage/async-storage";

// Key for storing tasks in AsyncStorage
const TASKS_STORAGE_KEY = "hallpass_tasks";

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

What is AsyncStorage?

AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to your app. It’s the React Native equivalent of localStorage in web browsers.

The storage key is a unique identifier for your data, like a label that helps your app find your data later.

Step 2: Load Tasks from Storage on App Start

app/index.tsx

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 [tasks, setTasks] = React.useState<ITask[]>([]);
  const [isLoading, setIsLoading] = React.useState(true);

  // Load tasks from storage when app starts
  React.useEffect(() => {
    const loadTasks = async () => {
      try {
        const storedTasks = await AsyncStorage.getItem(TASKS_STORAGE_KEY);
        if (storedTasks !== null) {
          setTasks(JSON.parse(storedTasks));
        }
      } catch (error) {
        console.error("Failed to load tasks:", error);
      } finally {
        setIsLoading(false);
      }
    };

    loadTasks();
  }, []);

  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 }]);
  };

  // More code here...

Understanding useEffect

The useEffect hook runs code after the component renders. By providing an empty dependency array [], we ensure this code only runs once when the component first mounts.

Inside this effect, we:

1. Define an async function to load tasks from storage
2. Try to get the stored tasks using the storage key
3. If tasks exist, parse the JSON string and update our state
4. Set isLoading to false when done, regardless of success or failure

Step 3: Create a Function to Save Tasks

Add this code to your main app/index.tsx file, inside the HomeScreen component.

It will be used shortly to load tasks from storage when the app starts:

app/index.tsx

export default function HomeScreen() {
  const [tasks, setTasks] = React.useState<ITask[]>([]);
  const [isLoading, setIsLoading] = React.useState(true);

  // Load tasks from storage when app starts
  React.useEffect(() => {
    const loadTasks = async () => {
      try {
        const storedTasks = await AsyncStorage.getItem(TASKS_STORAGE_KEY);
        if (storedTasks !== null) {
          setTasks(JSON.parse(storedTasks));
        }
      } catch (error) {
        console.error('Failed to load tasks:', error);
      } finally {
        setIsLoading(false);
      }
    };

    loadTasks();
  }, []);

  // Save tasks to storage whenever they change
  const saveTasks = async (updatedTasks: ITask[]) => {
    try {
      await AsyncStorage.setItem(TASKS_STORAGE_KEY, JSON.stringify(updatedTasks));
    } catch (error) {
      console.error('Failed to save tasks:', error);
    }
  };

  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 }]);
  };

Why JSON.stringify?

AsyncStorage can only store string values. JSON.stringify() converts our JavaScript object (the tasks array) into a JSON string that can be stored.

Later, when we retrieve this data, we use JSON.parse() to convert it back into a JavaScript object.

Step 4: Update Task Handlers to Save Changes

app/index.tsx

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 }]);
   const updatedTasks = [
     ...tasks,
     { id: nextId, title, category, isChecked: false },
   ];
   setTasks(updatedTasks);
   saveTasks(updatedTasks);
 };

 const handleTaskUpdate = (updatedTask: ITask) => {
   const updatedTasks = tasks.map((task) =>
     task.id === updatedTask.id ? updatedTask : task
   );
   setTasks(updatedTasks);
   saveTasks(updatedTasks);
};

Immutable Updates

Notice how we create new arrays instead of modifying the existing ones:

1. For adding a task, we use the spread operator (...tasks) to create a new array with all existing tasks plus the new one
2. For updating a task, we use map() to create a new array where the matching task is replaced
3. This approach (immutable updates) is a React best practice that helps prevent bugs

Step 5: Update the UI to Handle Loading State

Info

Adding the code below will produce a red line under the Task component’s onUpdate prop. Don’t worry about this for now - we will fix it later.

app/index.tsx

<ScrollView
  contentContainerStyle={{
    paddingHorizontal: 24,
    paddingVertical: 16,
  }}
>
   {tasks.map((task) => (
     <Task key={task.id} task={task} />
   ))}
   {isLoading ? (
     <Text className="text-center text-foreground text-lg">
       Loading tasks...
     </Text>
   ) : tasks.length === 0 ? (
     <Text className="text-center text-foreground text-lg">
       Please add your first task...
     </Text>
   ) : (
     tasks.map((task) => (
       <Task key={task.id} task={task} onUpdate={handleTaskUpdate} />
     ))
   )}
</ScrollView>

Conditional Rendering

We’re using nested conditional (ternary) operators to show different content based on the app’s state:

1. If isLoading is true, show a loading message
2. Otherwise, if there are no tasks, show a message prompting the user to add a task
3. Otherwise, render the list of tasks
4. This pattern is common in React for handling different UI states.

Step 6: Update the Task Component to Propagate Changes

app/components/Task.tsx

export interface TaskProps {
  task: Task;
  onUpdate?: (task: ITask) => void;
}

function Task({ task: initialTask, onUpdate }: TaskProps) {
  const [task, setTask] = React.useState(initialTask);
  const [showDialog, setShowDialog] = React.useState(false);
  const { title, category, isChecked } = task;

  const handleSetChecked = () => {
    const nextChecked = !task.isChecked;
    setTask({ ...task, isChecked: nextChecked });
    const updatedTask = { ...task, isChecked: !task.isChecked };
    setTask(updatedTask);
    if (onUpdate) {
      onUpdate(updatedTask);
    }
  };

Prop Drilling

We’re using a pattern called “prop drilling” to pass the update function down from the parent component. When a task is updated (either by checking/unchecking or editing), we:

1. Update the local state with setTask
2. Call the onUpdate function passed from the parent to propagate the change upward
3. The parent then saves the updated tasks to AsyncStorage
4. This creates a complete data flow: UI → Component State → Parent State → AsyncStorage

Step 7: Improve the TaskDialog Component

Controlled Components

We’re about to switch from using defaultValue to value in our inputs, making them “controlled components.” This means:

• React fully controls the input’s value through state
• The input’s value always reflects the component’s state
• Changes to the input update the state, which then updates the input
• This creates a more predictable data flow and makes it easier to validate inputs or reset forms.

Open components/TaskDialogue.tsx and update the following code on your Input and DialogClose JSX components:

app/components/TaskDialogue.tsx

<View className="gap-4">
  <Input
     defaultValue={task.title}
     value={editedTitle}
    placeholder="Task title"
    onChangeText={handleUpdateTitle}
  />
  <Input
     defaultValue={task.category}
     value={editedCategory}
    placeholder="Category"
    onChangeText={handleUpdateCategory}
  />
</View>

<DialogFooter>
   <DialogClose asChild>
     <Button variant="outline">
       <Text>Cancel</Text>
     </Button>
   </DialogClose>
   <DialogClose asChild>
     <Button onPress={handleSave}>
       <Text>Save changes</Text>
     </Button>
   </DialogClose>
   <Button
     className="border-brand-primary flex-1 rounded-3xl border bg-transparent"
     onPress={() => setShowDialog(false)}>
     <Text className="text-brand-primary">Cancel</Text>
   </Button>
   <Button className="bg-brand-primary flex-1w-1/2 rounded-3xl" onPress={handleSave}>
     <Text>Save changes</Text>
   </Button>
</DialogFooter>

Direct Event Handling

We’ve replaced DialogClose with direct event handlers on the buttons. This gives us more control over when the dialog closes, allowing us to:

1. Validate input before closing
2. Perform additional actions (like saving to storage)
3. Decide whether to close based on conditions

Step 8: Reset Form Fields in AddTask

Cleanup on Dialog Close

app/components/AddTask.tsx

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

  const handleSave = () => {
      onAdd(title, category);
      setTask({ title: '', category: '' });
      setShowDialog(false);
    }
  };

  // Reset dialog by changing key when it closes
  React.useEffect(() => {
    if (!showDialog) {
      setDialogKey((prev) => prev + 1);
    }
  }, [showDialog]);


  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
          key={dialogKey}
          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 };

We are using a trick to ensure that React picks up there is a new instance of the TaskDialogue component when the dialog is closed.

In React, a new render is triggered whenever the value in useState changes in a component. Here, we are using the key prop to force React to re-render the TaskDialogue component with a new key when the dialog is closed.

This ensures that the form fields are reset back to empty fields when the dialog is closed.

How it all works together

1. When the app starts, it loads tasks from AsyncStorage
2. While loading, it shows a “Loading tasks…” message
3. If no tasks exist, it shows a prompt to add the first task
4. When a task is added or updated:
   • The component state is updated
   • The change is propagated to the parent component
   • The parent saves all tasks to AsyncStorage
   • When the app is reopened later, the saved tasks are loaded from storage

Testing Your Implementation

After implementing these changes:

1. Add a few tasks to your app
2. Close the app completely
3. Reopen the app - your tasks should still be there!
4. Edit a task or mark it as complete - these changes should persist after closing and reopening the app

Real-World Considerations

In a production app, you might want to add:

1. Error handling for failed storage operations
2. A way to sync with a remote server
3. Data migration strategies for app updates
4. Performance optimizations for large task lists

That’s it!

Congratulations! Your app now has a complete task management system with persistent storage.

Once you have implemented AsyncStorage successfully, your app now:

• Loads tasks from storage when it starts
• Saves tasks whenever they’re added or updated
• Shows a loading state while tasks are being fetched
• Displays a message when no tasks exist
• All changes are automatically saved to the user’s device!

Users can add, edit, and complete tasks, and all changes are automatically saved to their device.