/React Native/Phase 1

Phase 1Days 1-5

Mobile Foundations & Modern Expo

React Native 0.86, Expo SDK 57, TypeScript, native rendering, and development workflow

Phase Goal

Understand what React Native actually renders and ship a typed app to a physical device without cargo-cult setup.

Progress

Notes

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

Projects

Pocket Plant Care Board

Day 1: React Native Mental Model & Expo SDK 57 Setup

Build the mental model for Native views versus DOM and the React-to-native render pathImplement Native views versus DOM and the React-to-native render path in a small typed exampleApply Native views versus DOM and the React-to-native render path to a realistic mobile product flowDebug the platform-specific failure modes of Native views versus DOM and the React-to-native render path

Build the mental model for Node 22, npm, create-expo-app, Expo Go, and device setupImplement Node 22, npm, create-expo-app, Expo Go, and device setup in a small typed exampleApply Node 22, npm, create-expo-app, Expo Go, and device setup to a realistic mobile product flowDebug the platform-specific failure modes of Node 22, npm, create-expo-app, Expo Go, and device setup

Build the mental model for Project anatomy, Metro, Hermes V1, Fast Refresh, and DevToolsImplement Project anatomy, Metro, Hermes V1, Fast Refresh, and DevTools in a small typed exampleApply Project anatomy, Metro, Hermes V1, Fast Refresh, and DevTools to a realistic mobile product flowDebug the platform-specific failure modes of Project anatomy, Metro, Hermes V1, Fast Refresh, and DevTools

Build the mental model for First typed screen on Android, iOS, and webImplement First typed screen on Android, iOS, and web in a small typed exampleApply First typed screen on Android, iOS, and web to a realistic mobile product flowDebug the platform-specific failure modes of First typed screen on Android, iOS, and web

Day 2: Core Components, Props & Typed Composition

Build the mental model for View, Text, Image, ScrollView, and Pressable mental modelsImplement View, Text, Image, ScrollView, and Pressable mental models in a small typed exampleApply View, Text, Image, ScrollView, and Pressable mental models to a realistic mobile product flowDebug the platform-specific failure modes of View, Text, Image, ScrollView, and Pressable mental models

Build the mental model for Props, children, component boundaries, and TypeScript typesImplement Props, children, component boundaries, and TypeScript types in a small typed exampleApply Props, children, component boundaries, and TypeScript types to a realistic mobile product flowDebug the platform-specific failure modes of Props, children, component boundaries, and TypeScript types

Build the mental model for Native text nesting and image sizing rulesImplement Native text nesting and image sizing rules in a small typed exampleApply Native text nesting and image sizing rules to a realistic mobile product flowDebug the platform-specific failure modes of Native text nesting and image sizing rules

Build the mental model for Reusable content card and empty-state compositionImplement Reusable content card and empty-state composition in a small typed exampleApply Reusable content card and empty-state composition to a realistic mobile product flowDebug the platform-specific failure modes of Reusable content card and empty-state composition

Day 3: State, Events & Mobile Interaction

Build the mental model for useState and render snapshotsImplement useState and render snapshots in a small typed exampleApply useState and render snapshots to a realistic mobile product flowDebug the platform-specific failure modes of useState and render snapshots

Build the mental model for Press events, controlled inputs, and keyboard behaviorImplement Press events, controlled inputs, and keyboard behavior in a small typed exampleApply Press events, controlled inputs, and keyboard behavior to a realistic mobile product flowDebug the platform-specific failure modes of Press events, controlled inputs, and keyboard behavior

Build the mental model for Touch targets, feedback states, and disabled semanticsImplement Touch targets, feedback states, and disabled semantics in a small typed exampleApply Touch targets, feedback states, and disabled semantics to a realistic mobile product flowDebug the platform-specific failure modes of Touch targets, feedback states, and disabled semantics

Build the mental model for State ownership and derived-value rulesImplement State ownership and derived-value rules in a small typed exampleApply State ownership and derived-value rules to a realistic mobile product flowDebug the platform-specific failure modes of State ownership and derived-value rules

Day 4: Platform Reality, Safe Areas & Debugging

Build the mental model for iOS, Android, and web differencesImplement iOS, Android, and web differences in a small typed exampleApply iOS, Android, and web differences to a realistic mobile product flowDebug the platform-specific failure modes of iOS, Android, and web differences

Build the mental model for Edge-to-edge layouts, safe-area insets, status and navigation barsImplement Edge-to-edge layouts, safe-area insets, status and navigation bars in a small typed exampleApply Edge-to-edge layouts, safe-area insets, status and navigation bars to a realistic mobile product flowDebug the platform-specific failure modes of Edge-to-edge layouts, safe-area insets, status and navigation bars

Build the mental model for Platform selection and platform-specific filesImplement Platform selection and platform-specific files in a small typed exampleApply Platform selection and platform-specific files to a realistic mobile product flowDebug the platform-specific failure modes of Platform selection and platform-specific files

Build the mental model for React Native DevTools, logs, inspector, and mismatch diagnosisImplement React Native DevTools, logs, inspector, and mismatch diagnosis in a small typed exampleApply React Native DevTools, logs, inspector, and mismatch diagnosis to a realistic mobile product flowDebug the platform-specific failure modes of React Native DevTools, logs, inspector, and mismatch diagnosis

Day 5: Mini Project — Pocket Plant Care Board

Build the mental model for Typed plant, room, and care-status stateImplement Typed plant, room, and care-status state in a small typed exampleApply Typed plant, room, and care-status state to a realistic mobile product flowDebug the platform-specific failure modes of Typed plant, room, and care-status state

Build the mental model for Accessible water, skip, and undo interactionsImplement Accessible water, skip, and undo interactions in a small typed exampleApply Accessible water, skip, and undo interactions to a realistic mobile product flowDebug the platform-specific failure modes of Accessible water, skip, and undo interactions

Build the mental model for Safe-area-aware plant cards and empty statesImplement Safe-area-aware plant cards and empty states in a small typed exampleApply Safe-area-aware plant cards and empty states to a realistic mobile product flowDebug the platform-specific failure modes of Safe-area-aware plant cards and empty states

Build the mental model for Project constraints, device proof, transfer change, and READMEImplement Project constraints, device proof, transfer change, and README in a small typed exampleApply Project constraints, device proof, transfer change, and README to a realistic mobile product flowDebug the platform-specific failure modes of Project constraints, device proof, transfer change, and README

Capstone

Pocket Plant Care Board

Build an offline board for a housemate deciding which plants need attention today. It must distinguish due, completed, skipped, and undone care without timers, accounts, notifications, or a backend.

Reusable typed plant and care-status components
Accessible water, skip, undo, empty, and disabled states
Android and iOS safe-area screenshots plus a recorded state-transition checklist
Transfer: add a second care action without duplicating state

Phase Complete!

After this phase, you'll be able to:

Native views versus DOM and the React-to-native render path
Node 22, npm, create-expo-app, Expo Go, and device setup
Project anatomy, Metro, Hermes V1, Fast Refresh, and DevTools
First typed screen on Android, iOS, and web
View, Text, Image, ScrollView, and Pressable mental models
Props, children, component boundaries, and TypeScript types
Native text nesting and image sizing rules
Reusable content card and empty-state composition

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

Back to all phases

Phase Goal

Day 1: React Native Mental Model & Expo SDK 57 Setup

Native views versus DOM and the React-to-native render path

Node 22, npm, create-expo-app, Expo Go, and device setup

Project anatomy, Metro, Hermes V1, Fast Refresh, and DevTools

First typed screen on Android, iOS, and web

Day 2: Core Components, Props & Typed Composition

View, Text, Image, ScrollView, and Pressable mental models

Props, children, component boundaries, and TypeScript types

Native text nesting and image sizing rules

Reusable content card and empty-state composition

Day 3: State, Events & Mobile Interaction

useState and render snapshots

Press events, controlled inputs, and keyboard behavior

Touch targets, feedback states, and disabled semantics

State ownership and derived-value rules

Day 4: Platform Reality, Safe Areas & Debugging

iOS, Android, and web differences

Edge-to-edge layouts, safe-area insets, status and navigation bars

Platform selection and platform-specific files

React Native DevTools, logs, inspector, and mismatch diagnosis

Day 5: Mini Project — Pocket Plant Care Board

Typed plant, room, and care-status state

Accessible water, skip, and undo interactions

Safe-area-aware plant cards and empty states

Project requirements, constraints & review

Pocket Plant Care Board

Phase Complete!