Sign in Get started

Free course · 15 lessons · Beginner

Mobile Apps with React Native and Expo

Build real iOS and Android apps with React Native, Expo and TypeScript: screens and styling, fast lists, navigation with Expo Router, state and forms, data fetching, offline storage, sign-in with secure tokens, push notifications, device features, performance, testing and publishing to the app stores. The app's logic in every lesson runs in your browser, and the course ends with mobile interview questions and a capstone app.

Start the course

1. Foundations: Screens, Styles, Lists and Navigation

Create an Expo app, build screens from React Native components, style them with Flexbox, show long lists efficiently, and move between screens with Expo Router.

  1. Your First App with React Native and Expo — What React Native is (real native views driven by JavaScript), why Expo is the recommended way to start, and how to create, run and change an app on your own phone in minutes.
  2. Layout and Styling with Flexbox — Every React Native screen is laid out with Flexbox, but with mobile defaults: columns, not rows. Build a profile card, learn flex, alignment and spacing, and handle the notch and dark mode.
  3. Showing Long Lists with FlatList — Render thousands of items smoothly with FlatList: it only draws what's on screen. Add stable keys, pull-to-refresh and infinite scrolling, and avoid the mistakes that make lists stutter.
  4. Navigation with Expo Router — Expo Router turns files into screens: app/index.tsx is the home screen, app/(tabs) holds tab screens, and app/contact/[id].tsx is a details screen with a parameter. Deep links work automatically.

2. State, Data, Offline and Sign-In

Forms with validation, loading data from an API with retries and caching, keeping the app useful offline, and signing users in with tokens stored securely on the device.

  1. State and Forms That Feel Native — Build a sign-up form with TextInput: controlled inputs, a reducer for form state, validation that shows errors at the right moment, the right keyboard for each field, and a keyboard that doesn't cover the button.
  2. Fetching Data: Loading, Errors, Retries and Caching — Load data from your API the way good apps do: show loading and error states, retry flaky mobile requests with backoff, cache results so screens open instantly, and refresh when the app comes back to the foreground.
  3. Working Offline: Local Storage and a Sync Queue — Keep the app useful without a connection: store data on the device, save the user's changes locally first, queue them, and send them when the network returns, without duplicating anything.
  4. Sign-In and Secure Token Storage — Sign users in against your API, keep tokens in the device's secure keychain (not AsyncStorage), refresh expired access tokens once even when many requests fail together, and protect screens that need a signed-in user.

3. Device Features, Performance, Testing and Shipping

Push notifications, camera and location with proper permission handling, keeping the app fast, testing it, and publishing to the App Store and Play Store with over-the-air updates.

  1. Push Notifications — Ask for permission at the right moment, get the device's push token, send it to your server, and handle a tapped notification by opening the right screen, including when the app was closed.
  2. Camera, Location and Permissions Done Right — Use device features through Expo modules, and handle every permission state: not asked yet, granted, denied, and denied forever. Explain why before asking, and degrade gracefully when the answer is no.
  3. Performance: Keeping the App Fast and Smooth — Find and fix the usual causes of slow screens: unnecessary re-renders, heavy work on the JavaScript thread, oversized images, and long lists. Measure first, then use memo, useCallback and list tuning where they help.
  4. Testing React Native Apps — Test the logic with fast unit tests, components with React Native Testing Library (render, press, assert what the user sees), and the critical flows end to end. Know what each layer catches.
  5. Building, Publishing and Updating Your App — Turn your project into store-ready builds with EAS Build, submit them to the App Store and Play Store, ship JavaScript fixes instantly with EAS Update, and force an upgrade when an old version must stop working.

4. Mobile Interviews and Capstone

How React Native works under the hood (the questions interviewers love), app lifecycle, then a capstone app that uses everything in the course.

  1. How React Native Works: Threads, the New Architecture and Lifecycle — The concepts behind the most common React Native interview questions: the JavaScript and UI threads, Hermes, the New Architecture (JSI, Fabric, TurboModules), and app states like active, background and inactive.
  2. Capstone: Build an Offline Notes App — Put the whole course together: a notes app with sign-in, a searchable list, a create/edit screen, offline-first sync, push reminders and a store-ready build. Use the checklist and rubric to review your work.

Was this page helpful?