Skip to content

Level 2 · Navigation, State & Data

A single screen with in-memory state is a demo. A real app has many screens, remembers things between launches, talks to a server, works on a train with no signal, and survives the keyboard. Level 2 turns the habit tracker skills from Level 1 into the architecture of a real, multi-screen, data-driven app.

You'll learn how mobile navigation differs from web routing (a stack of live screens, not a single page), use Expo Router's file-based routes for stacks, tabs and modals, pass parameters and open screens from links, split state into the right buckets (local UI state, shared client state, server state, persisted state), fetch and cache server data with TanStack Query, store data on the device with AsyncStorage, SecureStore and SQLite, build validated forms, manage images and fonts, and stop the keyboard covering your inputs. The project combines everything into an offline-friendly recipe book.

Prerequisites: Level 1, plus comfort with async/await and useEffect. If state management patterns are new, Level 2 of the React Mastery Path covers Context and useReducer in depth; this level focuses on how they apply on mobile.

Modules

  1. Navigation Concepts: Stacks, Tabs & Modals — why mobile navigation is a stack of mounted screens, and the navigators every app combines.
  2. File-Based Routing with Expo Router — layouts, groups, tabs, modals and Link, built from your folder structure.
  3. Route Params, Deep Links & Typed Routes — dynamic segments, search params, URL schemes, universal links and type-safe hrefs.
  4. App State: Context, useReducer & Zustand — choosing where state lives and avoiding re-render storms.
  5. Fetching Data with TanStack Query — caching, refetch on focus and reconnect, mutations and optimistic updates.
  6. Local Persistence: AsyncStorage, SecureStore & SQLite — which store for which data, and schema migrations.
  7. Forms & Validation with React Hook Form and Zod — schema-driven validation that scales past three fields.
  8. Images, Fonts & Assets — expo-image, resolution variants, custom fonts, icons and the splash screen.
  9. The Keyboard, Modals & Bottom Sheets — keeping inputs visible and building overlay UI that feels native.
  10. Project — Offline-Friendly Recipe Book — tabs, detail screens, search, favourites in SQLite and cached API data.