Mobile Fundamentals: Layouts and Navigation
Build a small multi-screen app from a blank Expo project — flexbox layouts, safe areas, and file-based navigation with tabs and stacks.
Prerequisites: Node.js installed, basic React (components, props, hooks), a phone with Expo Go or a simulator/emulator.
Version note: verified against current Expo documentation as of July 2026: Expo SDK 57 (React Native 0.86, React 19.2), created with create-expo-app and Expo Router's default tabs template. Expo Router now ships routing built directly on react-native-screens; file-based routing and the app/ directory convention have been stable since Router v3, so this pattern is unlikely to change under you. React Native's own
Every mobile app is fundamentally two things: how content is arranged on a screen, and how a user moves between screens. React Native uses flexbox for the first and, in the modern Expo stack, file-based routing for the second — meaning the files in your app/ folder define your navigation graph directly, without a separate configuration object to keep in sync. This project builds a three-screen app (a tab-based home/profile split, plus a detail screen pushed on top) so you leave with both muscles trained at once.
Test what you just learned
Self-testing is one of the best ways to retain new skills. Unlock project quizzes to check your understanding.
Log in to unlock0 / 6 complete