React Native with Expo: 10 Real Projects

Learn React Native with Expo and TypeScript by building 10 real apps with full source code, expected output, tests and an EAS publishing guide.

All levels · 15 lessons

Getting Started

  1. React Native with Expo: Setup and Your First App - Learn what React Native and Expo are, install the tools, create a TypeScript project, run it on your phone with Expo Go, and understand the files Expo creates.

Core Skills

  1. JavaScript and TypeScript Essentials for React Native - Learn the JavaScript and TypeScript React Native needs: const and let, arrow functions, array methods, destructuring, spread, types and async await.
  2. Core Components, State and Project 1: Tip Calculator - Learn View, Text, TextInput, Pressable, FlatList, StyleSheet and Flexbox, then useState, and build a complete tip calculator in React Native with a test.

Building Real Apps

  1. Project 2: To-Do List with FlatList and AsyncStorage - Build a to-do app in React Native with FlatList, useEffect and AsyncStorage so tasks stay saved after the app closes, with full code.
  2. Project 3: Quiz App with Expo Router - Build a multi-screen quiz app with Expo Router: file based routes, Stack navigation, route params, router.push and replace, with complete TypeScript code.
  3. Project 4: Weather App with fetch and Error States - Build a weather app that loads live data from a free API with fetch and async await, using a TypeScript union type for idle, loading, error and success states.
  4. Project 5: Expense Tracker with useReducer and Context - Build an expense tracker with useReducer, Context and AsyncStorage, store money as whole cents and group spending by category with useMemo.
  5. Project 6: Notes App with expo-sqlite - Build a notes app with expo-sqlite: create a table, insert, update, delete and search with SQL, with a Modal editor and a floating button.
  6. Project 7: Recipe Browser with Query - Build a recipe browser with TanStack Query: caching, loading and error states, pull to refresh and a dynamic Expo Router detail screen.

Advanced Apps and Release

  1. Project 8: Photo Journal with Camera and File System - Build a photo journal with expo-image-picker and expo-file-system: ask for camera and library permissions, copy photos into app storage and save captions.
  2. Project 9: Habit Tracker with Streaks and Notifications - Build a habit tracker with streaks calculated from dates, saved data and a daily reminder using expo-notifications and permission handling.
  3. Project 10 Capstone: Shop App with Zustand and Tabs - Build a shop app capstone with a product grid, category filter, a Zustand cart store, tab navigation with a live cart count and a demo checkout.
  4. Forms, Validation, Secure Storage and Authentication - Build React Native forms with validation, store tokens safely with expo-secure-store and design login flows with protected routes in Expo Router.
  5. Testing and Performance for React Native Apps - Set up Jest and React Native Testing Library, test pure functions and components, and learn practical performance habits for FlatList, memoisation and images.
  6. Build and Publish with EAS, and React Native Interviews - Prepare a React Native app for release: app.json, EAS Build for Android and iOS, store submission, over-the-air updates and interview questions.