Explore
Search courses
Trending Courses
Learners Favourite
React Native 2026 App Engineering with Expo, TypeScript & AI
Build a real React Native app twice over: first the fundamentals by hand (components, Flexbox, navigation, a CRUD app with Axios), then a full AI-assisted build with Expo Router, Clerk auth, Stream real-time audio/video, and a Python AI voice teacher agent.
Course Overview
This course teaches React Native and Expo in two connected halves. The first half is hands-on and manual: setting up your environment on Windows or Mac, core components (SafeAreaView, Text, Image, ScrollView), Flexbox layout, interactive state with useState, custom components built from Figma assets, and a series of real screens (Contact Us, Home, Payment) built step by step. It covers navigation with React Navigation's Stack Navigator, connecting to a REST API with Axios, and finishes with a capstone CRUD book-manager app -- including a real refactor applying the DRY principle. The second half is a full AI-assisted ("vibe coding") build of a Duolingo-style language-learning app, teaching the workflow as much as the code: structured prompting with an AGENTS.md project file, Agent Skills for tools like Expo, Clerk and Stream, Expo Router's file-based routing (app directory, _layout.tsx, route groups), NativeWind styling, Clerk authentication, a typed local content architecture, custom animated tab navigation, PostHog product analytics, and real-time audio/video with Stream -- culminating in a real-time AI voice teacher built as a separate Python service with Vision Agents. Along the way, the course shows genuine debugging (iOS Simulator microphone limitations, physical-device code signing) and a CodeRabbit code-review pass, not just a polished happy path.
- 26 modules
- 35 lessons
- 26 module quizzes
- Taught in English
- Beginner to Advanced level
- Certificate on completion
Course Content
26 modules35 lessons26 quizzes
- What React Native Is, and What You Need to Know First8:20
- Installing Node, Creating Your First Expo App, and Running It21:17
Module quiz · 30 questions
- Installing Node, Expo and Your First App on Windows13:05
Module quiz · 30 questions
- SafeAreaView, the Text Component, and Styling Text13:09
Module quiz · 30 questions
- Images, Buttons, Pressable and Touchable Opacity9:58
- ScrollView, the Platform API, and Loaders9:33
Module quiz · 30 questions
- Margin, Padding and the Flex Basics14:16
- flexWrap, Positioning, and Responsive Dimensions16:02
Module quiz · 30 questions
- Controlling a Modal with useState, and Using Expo Vector Icons10:13
- ImageBackground and Controlling Text Input9:30
Module quiz · 30 questions
- Creating Reusable React Components19:15
Module quiz · 30 questions
- Finishing the Intro Screen and Working with SVGs31:58
Module quiz · 30 questions
- Structuring the Home Screen: Text, Spacing and Top Tabs16:08
Module quiz · 30 questions
- Rendering Data Efficiently with FlatList9:07
Module quiz · 30 questions
- Building the Payment Screen Header and Layout31:53
Module quiz · 30 questions
- Building an Add-New Button and Introducing Lottie Animations8:05
Module quiz · 30 questions
- Setting Up React Navigation's Stack Navigator26:42
Module quiz · 30 questions
- Setting Up a Mock API and Making Your First Request38:45
Module quiz · 30 questions
- Project Structure, Mock API Setup and Fetching the Book List42:59
- Delete, Create, and the DRY Principle: Refactoring Duplicated Fetch Logic45:27
Module quiz · 30 questions
- The AI-Assisted Development Workflow: AGENTS.md and Practical Vibe Coding23:43
- Project Setup and Expo Router: How File-Based Routing Actually Works5:28
Module quiz · 30 questions
- Installing NativeWind and Choosing Your AI Coding Agent9:01
- Setting Up a Design System with AI-Generated Assets11:25
Module quiz · 30 questions
- Building the Onboarding Screen and Registering Its Route12:24
- Building the Auth UI and Seeing Route Groups in Action4:55
Module quiz · 30 questions
- Wiring Up Authentication with Clerk11:19
Module quiz · 30 questions
- Designing the App's Learning Content Architecture18:12
Module quiz · 30 questions
- Building a Custom Animated Bottom Tab Bar15:07
Module quiz · 30 questions
- Adding Product Analytics with the PostHog AI Wizard14:34
Module quiz · 30 questions
- Building the Lesson Screen from the Content Architecture10:28
Module quiz · 30 questions
- Setting Up Stream for Real-Time Audio/Video Infrastructure22:26
Module quiz · 30 questions
- Vision Agents: Building the AI Teacher as a Separate Python Service20:29
- Debugging Real Device Audio and Live Captions20:38
Module quiz · 30 questions
- Tracking Real User Behavior with Custom PostHog Events11:50
Module quiz · 30 questions
Skills You'll Gain
- Set up a React Native/Expo development environment on Windows or Mac and run an app via Expo Go, a simulator, or a physical device
- Build custom React Native components, master Flexbox layout, and manage interactive state with useState
- Navigate between screens with both React Navigation (Stack Navigator) and Expo Router file-based routing -- and know when each applies
- Understand Expo Router fundamentals: the app directory, _layout.tsx shared layouts, and route groups
- Connect a mobile app to a real or mock REST API with Axios (GET/POST/PUT/DELETE) and build a full CRUD app
- Practice AI-assisted ("vibe coding") development: structured prompting, AGENTS.md project conventions, and Agent Skills for tools like Expo, Clerk and Stream
- Implement authentication with Clerk, including custom-styled auth UI and session handling
- Design a typed local content/data architecture (TypeScript + AsyncStorage + Zustand) before introducing a real backend
- Build custom animated navigation (a bottom tab bar with an animated active-tab indicator) with Expo Router
- Add product analytics with PostHog, including custom event tracking tied to real user behavior
- Integrate real-time audio/video communication with Stream, and build an AI voice agent (Vision Agents) as a separate Python service
- Debug real-device-only issues (iOS Simulator microphone limitations, code signing, developer mode) that only appear outside the simulator
- Review AI-generated code changes critically using a tool like CodeRabbit before committing them
Requirements
- A laptop running Windows 10/11 or macOS with internet access. No prior React Native, Expo or JavaScript experience is required: the course opens with Node.js, VS Code, JavaScript and React basics. A physical iPhone or Android phone is needed for the camera, location and push-notification lessons, because simulators cannot fully reproduce them. A Mac with Xcode is needed only for local iOS builds
- Android builds work on Windows.
Who this course is for
- Developers who want to learn React Native and Expo from true fundamentals (components
- Flexbox
- navigation
- APIs) and then see a full
- realistic AI-assisted mobile build using Expo Router
- Clerk
- Stream and a real-time AI agent. Suits JavaScript/TypeScript developers moving into mobile
- and anyone wanting a practical
- current (2026) look at AI-agent-driven app development alongside manual React Native skills.
Sources
HeroDev
HeroDev
JavaScript Mastery
JavaScript Mastery
Free
0 enrolled
26Modules
35Lessons
10h 8mDuration
Beginner to AdvancedSkill level
EnglishLanguage
YesCertificate
You might also like
Related courses
Ready to start
learning for free?
No cost, no catch — just real courses.
Latest News
Free, structured courses that build practical skills you can translate directly into a tech career.