React-Expo

Lesson 9 of 9

Final Project: Build a Mobile Notes App with Expo

Combine everything from this course into one real, working mobile app: a simple notes app you can run on your own phone with Expo Go.

Requirements

  1. Set up a new Expo project with Expo Router and at least two screens: a notes list screen and a note detail/edit screen, connected with file-based routing (a dynamic [id] route for viewing/editing a single note).
  2. Let the user create a new note (title + body) through a controlled form.
  3. Render the list of notes with FlatList, not .map().
  4. Persist notes to the device with AsyncStorage, so they're still there after fully closing and reopening the app.
  5. Let the user delete a note, with a confirmation step (e.g. a native Alert.alert confirm dialog) before it's removed.
  6. Style the app with StyleSheet, at minimum a card-style note list and a clean editing screen.

Stretch goals

  • Add a search bar that filters the notes list as you type.
  • Add a timestamp to each note (created/last edited) using Date.
  • Request camera permission and let the user attach a photo to a note with expo-image-picker.
  • Build it with eas build and install the real binary on your phone instead of only running it through Expo Go.

Submit a link to your finished project (a repo or gist) below, an instructor will review it before you can mark this lesson complete. Good luck! 🚀

This lesson ends in a project. Build it on your own machine, there's nowhere to submit it here, but the brief above is everything you need.