Take React to iOS & Android
A focused mobile path for developers who already know React — core components and styling, navigation, native device APIs, native modules, testing and app store publishing, ending with a capstone app you actually ship. All 22 weeks are live, start to finish.
Prerequisites & tooling
What you should already know
- React fundamentals — this site's React course covers everything needed
- JSX, hooks (
useState,useEffect) & component composition, comfortably - Comfortable with the command line, npm/yarn, and Git
- Node.js LTS and either Xcode (Mac, for iOS) or Android Studio installed
Stack you'll work with
This course deliberately skips re-teaching React — it goes straight to what's different about mobile.
The full 22-week roadmap
Eight phases, from your first Expo app through native modules and testing, to a published app on the store. All 22 weeks are live below.
Expo vs. Bare Workflow & Your First App
Get a real React Native app running on a physical device or simulator.
- Expo Go vs. a bare React Native workflow — which to choose & why
- Project structure & the Metro bundler
- Running on iOS Simulator, Android Emulator & a real device
Core Components & Flexbox Styling
Learn the primitives every React Native screen is built from.
View,Text,Image,ScrollView&Pressable- Flexbox layout — React Native's only layout system
StyleSheet.create& why there's no CSS
Platform-Specific Code & Responsive Layouts
Handle the real differences between iOS and Android from the same codebase.
Platform.OS,Platform.select()&.ios.js/.android.jsfiles- Safe areas, notches & responsive dimensions
- Tablet & foldable layout considerations
React Navigation Fundamentals
Move between screens the way a real mobile app does.
- Stack, tab & drawer navigators
- Passing params & typed navigation with TypeScript
- Header customization & screen transitions
Nested Navigators & Deep Linking Basics
Compose complex navigation structures the way real apps need.
- Nest a stack navigator inside each tab so the tab bar stays visible while pushing screens
- Switch between an auth stack and a main app stack based on sign-in state
- Configure a
linkingobject so a URL opens the app directly to a screen, with params
State Management in React Native
Apply React state patterns to mobile-specific constraints.
- Choose between Context, Zustand and Redux Toolkit for a given screen or app size
- Set up a Zustand store and read/update it from multiple screens
- Persist store state to disk so it survives an app restart
Camera, Media & the File System
Capture and manage photos, media and files on-device.
- Request camera permission and capture a photo with
expo-camera - Let a user pick an existing photo or video with
expo-image-picker - Read, write and cache files with Expo's
FileSystemmodule
Location, Sensors & Permissions
Read live location and motion data, with permissions done right.
- Read a device's current location, and watch it update over time, with expo-location
- Read accelerometer and gyroscope data with expo-sensors
- Request foreground location permission with a clear rationale, and know when background permission is a separate ask
On-Device Storage: AsyncStorage, SecureStore & SQLite
Three ways to store data on-device, and when to use each.
- Store and retrieve simple key-value data with AsyncStorage, and know its limits
- Store sensitive values like auth tokens with SecureStore instead
- Model structured, queryable local data with expo-sqlite
API Integration & TanStack Query
Connect the app to a real backend and manage server state.
- Call a REST API from a React Native app with proper error handling
- Set up TanStack Query and fetch a list and a detail view with
useQuery - Write data with
useMutationand invalidate the right cached queries afterward
Offline Support & Sync
Keep the app usable when the network isn't there.
- Detect a device's connectivity status and changes with NetInfo
- Queue a mutation locally when offline instead of letting it fail
- Replay a queued mutation automatically once connectivity returns
Writing a Native Module (Swift & Kotlin)
Bridge into real native iOS/Android code when JS alone isn't enough.
- Understand what a native module is, and when writing one is actually the right call
- Write a small native module in Swift for iOS using the Expo Modules API
- Write the same module in Kotlin for Android
The New Architecture — Fabric & TurboModules
How the New Architecture changes native modules and rendering.
- Explain why JSI replaced the old asynchronous bridge, and what problem that solved
- Describe what Fabric changes about how React Native renders views
- Explain what TurboModules and codegen do, and how they relate to Week 12's module
Push Notifications
Bring users back into the app with a real push notification.
- Set up expo-notifications and request notification permission correctly
- Register for and retrieve a push token
- Explain what FCM and APNs each do, and where expo-notifications sits relative to them
Deep Linking & Local Notifications
Real https:// links into the app, plus on-device scheduled alerts.
- Configure Universal Links (iOS) and App Links (Android) on a real domain
- Extend Week 5's linking config to handle both the custom scheme and real https:// links
- Schedule a local, time-based notification without any backend involved
Unit & Component Testing (Jest + RNTL)
Build a real safety net for components, hooks and async code.
- Configure Jest for a React Native / Expo project, including mocking native modules
- Render and query components with React Native Testing Library
- Test a custom hook and async data-fetching logic
End-to-End Testing with Detox
Drive the real, installed app the way a user would.
- Set up Detox for both iOS and Android
- Write an E2E test using matchers to find elements and actions to interact with them
- Handle asynchronous UI correctly without introducing flaky waits
Performance: Lists, Re-renders & Bundle Size
Make the app fast under real, long-list, real-device conditions.
- Tune a FlatList with getItemLayout and windowing props for a long list
- Profile unnecessary re-renders and fix them with memoization
- Explain what Hermes does and how it affects startup performance
EAS Build & CI/CD
Hand building and signing off to a real release pipeline.
- Configure eas.json with development, preview and production build profiles
- Understand how EAS manages iOS and Android signing credentials
- Choose between running a build locally and on EAS's own servers
App Store Connect & Google Play Console
Get a real build in front of real reviewers on both stores.
- Create an app record in App Store Connect with the metadata and screenshots it requires
- Create an app record in Google Play Console and submit to an internal testing track
- Recognize the most common reasons each store rejects a first submission
Capstone — Plan & Build
Plan the capstone, then build its working core.
- Scope a capstone app that genuinely exercises at least five of this course's phases
- Plan its screen structure, navigation shape, and data model before writing code
- Build its core navigation and screens with real (not placeholder) data
Capstone — Test, Polish & Ship
Test, polish, and ship the capstone for real.
- Add unit, component and E2E test coverage for your capstone's core flow
- Run a performance and accessibility pass using Weeks 16–18's tools and techniques
- Produce a signed production EAS build