Engineering Roles line, station 8 of 8
Mobile Apps with React Native
Build, test and ship iOS and Android apps with React Native and Expo: navigation, offline data, push and store releases.
- 6lessons
- 3.5 hto read and do
- Intermediatelevel
- 6podcast episodes
- 12checked exercises
Tools you'll use in this course
The lessons open these with a template ready. They work for your own job too, no course needed.
About this course
React Native lets one team build apps for iOS and Android with React and TypeScript. This course teaches what is different about mobile: screens and navigation, devices that go offline, battery and memory limits, native features, and the release process through the app stores.
You build features for the Mangrove Rider app used by about 600 delivery riders, most of them on cheap Android phones: a job list with navigation and deep links, offline proof of delivery that syncs when the signal comes back, push notifications for new jobs, camera and location access done respectfully, smooth lists on a low-end phone, automated tests, and a staged release with over-the-air updates.
Every lesson has diagrams, quick checks, a Build it section with Expo and TypeScript, practice tasks with JavaScript exercises checked in your browser, flashcards and a podcast episode. The course ends with a capstone project and a final exam for a free certificate.
What you will be able to do
- Build screens and navigation with React Native and Expo
- Store data offline and sync it safely when the connection returns
- Use device features: camera, location and push notifications
- Profile and fix performance on low-end phones
- Test, build and release to the app stores with staged rollouts and updates
Syllabus
6 stops, about 3.5 h in total. Each stop fills in when you complete the lesson.
How React Native works
React Native lets you write a phone app in React and TypeScript, and the phone shows real Android and iOS screens. This lesson shows what happens between your component and the pixels, what Expo adds, how React Native compares with Flutter, fully native apps and web apps, and ends with the first screen of the Mangrove Rider app running on your own phone.
React NativeExpoTypeScript
Navigation and app structure
A rider app is a handful of screens, and the way riders move between them decides whether they reach the right job in two taps or get lost at a customer's gate. This lesson shows you how mobile navigation works, how Expo Router turns files into screens, how a link or a push notification opens one exact job, and which state survives when the phone closes your app.
Mobile navigationExpoDeep linksTypeScript
Offline first
A rider hands over the groceries in a basement car park with no signal. The Rider app must still record proof of delivery, keep it safe if the phone kills the app, and send it exactly once when the signal comes back. This lesson shows you how: local storage on the phone, an outbox of queued actions, and a sync loop with clear retry rules.
Offline syncReact NativeExpoTypeScript
Device features
A phone's camera, its location and its notifications are what make a mobile app worth installing, and each one sits behind a permission the user can refuse. This lesson shows you how the Mangrove Rider app asks at the right moment, keeps working when the answer is no, captures a small proof photo and a drop location, and sends a "new job" push that riders want to receive.
Push notificationsExpoMobile permissions
Fast on a cheap phone
Most Mangrove riders carry a 2 to 3 GB Android phone, and an app that feels fine on your laptop's emulator can stutter, show blank rows and get closed by the system on theirs. This lesson shows you how to measure where the time and memory go, then fix lists, images, memory and startup in that order of evidence.
React NativeMobile performanceProfiling
Testing and releasing
A web fix reaches every user the moment you deploy. A mobile fix has to pass store review, and then each phone installs it when it decides to. This lesson shows you how Mangrove ships the Rider app safely anyway: the right tests at each level, signed store builds, a staged rollout with a written halt rule, and over-the-air updates for the fixes that cannot wait.
Mobile testingApp store releaseOver-the-air updatesStaged rollouts
Capstone: Build offline proof of delivery for riders
A realistic project with a rubric and a model answer.
Final exam and certificate
10 questions drawn at random, 70% to pass.
Capstone project
Build offline proof of delivery for riders
Riders lose signal in basements and lifts, and deliveries get marked late or lost. Build the proof-of-delivery feature for the Mangrove Rider app with Expo: a photo, a signature or one-time code, and the location captured offline, stored on the phone before the rider sees success, and synced reliably through an outbox with idempotency keys when the signal returns. Permissions are asked only when needed, the job list stays smooth on a low-end Android phone, and you plan the release with a staged rollout and a rollback. Use a small fake API that sometimes times out. Plan for 8 to 12 hours.
You will hand in
- A working React Native feature in a public repository (Expo)
- Tests for the sync logic and one component test
- A release plan with staged rollout, metrics to watch and rollback
Check what you know
Already know some of this? Answer 6 quick questions, one from each lesson, and we will mark the lessons you can skim. It takes about 3 minutes and nothing is graded.
Questions
How long does the course take?
About four to five hours: six lessons of 35 to 45 minutes each, including the Build it steps and practice, plus an optional podcast episode of about 10 to 13 minutes per lesson. The capstone project takes 8 to 12 hours.
Do I need a Mac or an iPhone?
No. With Expo you can build and test on an Android phone or emulator, and EAS can build iOS apps in the cloud. The release lesson explains what iOS publishing needs, such as an Apple Developer account.
Why React Native and not Flutter or native?
It reuses the React and TypeScript skills from the web, and Mangrove's apps use it. Lesson 1 compares React Native, Flutter, fully native apps and web apps honestly, including when each one is the better choice.
What do I need to know first?
React for the Web, or equivalent React experience: components, state, effects and testing with Testing Library. The practice exercises are plain JavaScript and run in your browser.
Is the certificate free, and how does the exam work?
Yes, the certificate is free, like everything else on Kolom. Each attempt mixes questions from the course's question bank with two practical tasks, some of them code checked in your browser. You need 70% on both parts to pass, and you can try again after 24 hours.
Is it really free?
Yes. Every lesson, podcast episode, exercise, quiz, final exam and certificate is free. The labs and their templates for real work are free too. Plus and Premium add every lab challenge, weekly extras and a mentor on top, and they never lock the tools or the courses.