/React Native/Phase 3

Phase 3Days 12-16

Expo Router & Application Architecture

File-based routing, stacks, tabs, deep links, auth gates, and scalable feature boundaries

Phase Goal

Design navigation that survives growth and makes every screen deep-linkable and testable.

Progress

Notes

Open the written lectures for this course before checking off the phase topics.

Projects

Local League Matchday

Day 12: Expo Router Mental Model

Build the mental model for src/app routes, URLs, index, and root layoutImplement src/app routes, URLs, index, and root layout in a small typed exampleApply src/app routes, URLs, index, and root layout to a realistic mobile product flowDebug the platform-specific failure modes of src/app routes, URLs, index, and root layout

Build the mental model for Stack navigation, Link, router actions, and headersImplement Stack navigation, Link, router actions, and headers in a small typed exampleApply Stack navigation, Link, router actions, and headers to a realistic mobile product flowDebug the platform-specific failure modes of Stack navigation, Link, router actions, and headers

Build the mental model for Route groups versus URL segmentsImplement Route groups versus URL segments in a small typed exampleApply Route groups versus URL segments to a realistic mobile product flowDebug the platform-specific failure modes of Route groups versus URL segments

Build the mental model for Typed routes and route ownershipImplement Typed routes and route ownership in a small typed exampleApply Typed routes and route ownership to a realistic mobile product flowDebug the platform-specific failure modes of Typed routes and route ownership

Day 13: Dynamic Routes, Parameters & Deep Links

Build the mental model for Dynamic segments and local/global search paramsImplement Dynamic segments and local/global search params in a small typed exampleApply Dynamic segments and local/global search params to a realistic mobile product flowDebug the platform-specific failure modes of Dynamic segments and local/global search params

Build the mental model for Serializing route identity rather than whole objectsImplement Serializing route identity rather than whole objects in a small typed exampleApply Serializing route identity rather than whole objects to a realistic mobile product flowDebug the platform-specific failure modes of Serializing route identity rather than whole objects

Build the mental model for Universal links, app schemes, and cold-start routingImplement Universal links, app schemes, and cold-start routing in a small typed exampleApply Universal links, app schemes, and cold-start routing to a realistic mobile product flowDebug the platform-specific failure modes of Universal links, app schemes, and cold-start routing

Build the mental model for Not-found, invalid IDs, and recovery pathsImplement Not-found, invalid IDs, and recovery paths in a small typed exampleApply Not-found, invalid IDs, and recovery paths to a realistic mobile product flowDebug the platform-specific failure modes of Not-found, invalid IDs, and recovery paths

Day 14: Tabs, Nested Layouts & Modal Flows

Build the mental model for Native tabs, stacks, and layout nestingImplement Native tabs, stacks, and layout nesting in a small typed exampleApply Native tabs, stacks, and layout nesting to a realistic mobile product flowDebug the platform-specific failure modes of Native tabs, stacks, and layout nesting

Build the mental model for Modal presentation, dismissal, and result flowImplement Modal presentation, dismissal, and result flow in a small typed exampleApply Modal presentation, dismissal, and result flow to a realistic mobile product flowDebug the platform-specific failure modes of Modal presentation, dismissal, and result flow

Build the mental model for Preserving state and controlling back behaviorImplement Preserving state and controlling back behavior in a small typed exampleApply Preserving state and controlling back behavior to a realistic mobile product flowDebug the platform-specific failure modes of Preserving state and controlling back behavior

Build the mental model for Platform navigation conventions and gesturesImplement Platform navigation conventions and gestures in a small typed exampleApply Platform navigation conventions and gestures to a realistic mobile product flowDebug the platform-specific failure modes of Platform navigation conventions and gestures

Day 15: Authentication Gates & Feature Architecture

Build the mental model for Session hydration and protected-route redirectsImplement Session hydration and protected-route redirects in a small typed exampleApply Session hydration and protected-route redirects to a realistic mobile product flowDebug the platform-specific failure modes of Session hydration and protected-route redirects

Build the mental model for Loading, signed-out, signed-in, and expired statesImplement Loading, signed-out, signed-in, and expired states in a small typed exampleApply Loading, signed-out, signed-in, and expired states to a realistic mobile product flowDebug the platform-specific failure modes of Loading, signed-out, signed-in, and expired states

Build the mental model for Route-only app directory and feature foldersImplement Route-only app directory and feature folders in a small typed exampleApply Route-only app directory and feature folders to a realistic mobile product flowDebug the platform-specific failure modes of Route-only app directory and feature folders

Build the mental model for Provider placement and dependency directionImplement Provider placement and dependency direction in a small typed exampleApply Provider placement and dependency direction to a realistic mobile product flowDebug the platform-specific failure modes of Provider placement and dependency direction

Day 16: Mini Project — Local League Matchday

Build the mental model for Deep-linkable club, fixture, and venue routesImplement Deep-linkable club, fixture, and venue routes in a small typed exampleApply Deep-linkable club, fixture, and venue routes to a realistic mobile product flowDebug the platform-specific failure modes of Deep-linkable club, fixture, and venue routes

Build the mental model for Native tabs, nested stacks, result modal, and invalid-link recoveryImplement Native tabs, nested stacks, result modal, and invalid-link recovery in a small typed exampleApply Native tabs, nested stacks, result modal, and invalid-link recovery to a realistic mobile product flowDebug the platform-specific failure modes of Native tabs, nested stacks, result modal, and invalid-link recovery

Build the mental model for Mock member gate, followed clubs, and restored destinationsImplement Mock member gate, followed clubs, and restored destinations in a small typed exampleApply Mock member gate, followed clubs, and restored destinations to a realistic mobile product flowDebug the platform-specific failure modes of Mock member gate, followed clubs, and restored destinations

Build the mental model for Project constraints, navigation map, transfer route, and link matrixImplement Project constraints, navigation map, transfer route, and link matrix in a small typed exampleApply Project constraints, navigation map, transfer route, and link matrix to a realistic mobile product flowDebug the platform-specific failure modes of Project constraints, navigation map, transfer route, and link matrix

Capstone

Local League Matchday

Build a universal matchday guide for supporters choosing a fixture, venue, and followed club. A shared fixture URL must open correctly from a cold start, survive signed-out and expired-session states, and recover from an unknown fixture.

Typed fixture, club, and venue routes with identifier-only parameters
Nested tabs and stacks plus a result-report modal with correct back behavior
Cold/warm deep-link, browser-back, Android-back, invalid-ID, and auth-restore evidence
Transfer: add a postponed-fixture route reached from both a notification-shaped URL and the schedule

Phase Complete!

After this phase, you'll be able to:

src/app routes, URLs, index, and root layout
Stack navigation, Link, router actions, and headers
Route groups versus URL segments
Typed routes and route ownership
Dynamic segments and local/global search params
Serializing route identity rather than whole objects
Universal links, app schemes, and cold-start routing
Not-found, invalid IDs, and recovery paths

You can apply Phase 3 skills in a tested mobile project on Android and iOS.

Back to all phases

Phase Goal

Day 12: Expo Router Mental Model

src/app routes, URLs, index, and root layout

Stack navigation, Link, router actions, and headers

Route groups versus URL segments

Typed routes and route ownership

Day 13: Dynamic Routes, Parameters & Deep Links

Dynamic segments and local/global search params

Serializing route identity rather than whole objects

Universal links, app schemes, and cold-start routing

Not-found, invalid IDs, and recovery paths

Day 14: Tabs, Nested Layouts & Modal Flows

Native tabs, stacks, and layout nesting

Modal presentation, dismissal, and result flow

Preserving state and controlling back behavior

Platform navigation conventions and gestures

Day 15: Authentication Gates & Feature Architecture

Session hydration and protected-route redirects

Loading, signed-out, signed-in, and expired states

Route-only app directory and feature folders

Provider placement and dependency direction

Day 16: Mini Project — Local League Matchday

Deep-linkable club, fixture, and venue routes

Native tabs, nested stacks, result modal, and invalid-link recovery

Mock member gate, followed clubs, and restored destinations

Project requirements, constraints & review

Local League Matchday

Phase Complete!