Thuta Learning
Search
ProjectsMobile Developmentintermediate

Mini Project Part 3: Todo App — Polish & Navigation

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

  • Get a no-fear understanding of Mini Project Part 3: Todo App — Polish & Navigation
  • Write the code yourself and run it on Expo Go
  • Apply this concept immediately in a real app project

Let's think about it this way for a moment

The empty state — showing 'No todos yet!' when the todo list is empty — is an important piece of UX polish, and you can implement it with FlatList's ListEmptyComponent prop. Pressing a todo item navigates to a Detail screen (using React Navigation from earlier chapters), where you can show the todo's full details or an edit screen.

Let's connect it to a real scenario

Add FlatList's ListEmptyComponent={<Text>No todos yet! Add one above.</Text>} and it'll only show up when the todos array is empty. Wire up each todo item's onPress with navigation.navigate('TodoDetail', { todoId: item.id }), then in the TodoDetail screen look up the todo using route.params.todoId (React Navigation's route params pattern).

Code Example

javascript
<FlatList
  data={todos}
  keyExtractor={(item) => item.id}
  ListEmptyComponent={
    <Text style={styles.emptyText}>No todos yet! Add one above 👆</Text>
  }
  renderItem={({ item }) => (
    <TouchableOpacity
      style={styles.todoItem}
      onPress={() => navigation.navigate('TodoDetail', { todoId: item.id })}
    >
      <Text>{item.done ? '☑️' : '☐'} {item.text}</Text>
      <TouchableOpacity onPress={() => deleteTodo(item.id)}>
        <Text>🗑️</Text>
      </TouchableOpacity>
    </TouchableOpacity>
  )}
/>
You should see
When the todo list is empty, an empty state message shows up, and pressing a todo item navigates to the Detail screen.

5-Minute Try-It

Keep building out the Todo App with ListEmptyComponent + navigation (the Detail screen) until it's complete — this is the capstone project for the whole tutorial.

A Quick Word of Caution

With nested TouchableOpacity (item press + delete button press), React Native's event bubbling behavior can differ slightly by platform (iOS/Android) — be sure to test on both.

Easy traps

  • Nesting the delete button inside the outer TouchableOpacity (the item press), so tapping the delete icon also triggers the item's detail navigation right away (an event propagation issue — you may need stopPropagation logic)
  • Leaving the empty state unimplemented so users just see a blank screen — this can be confusing

Now Try It Yourself

Keep building out the Todo App with ListEmptyComponent + navigation (the Detail screen) until it's complete — this is the capstone project for the whole tutorial.

You'll know it worked when: When the todo list is empty, an empty state message shows up, and pressing a todo item navigates to the Detail screen.

Mini Project Part 3: Todo App — Polish & Navigation | Thuta Learning