Mobile Apps · MBC-28

Advanced React Native with Expo

Advanced React Native with Expo is an advanced course in building production mobile apps, covering scalable architecture, state with Zustand, Redux Toolkit and TanStack Query, offline-first data, secure authentication, Reanimated animations, push notifications, testing with Jest and Maestro, and releases through EAS. It suits mobile developers, software engineers and tech leads who already know React Native.

Updated 9 Oct 2026

From 7,650 THB / person 8,500 −10% excl. VAT 7% · group rates available

Corporate training quote Join the waiting list

PDFDownload the course outline

Duration18 hours · 3 days
FormatOnsite / live online
Next roundOn request
CertificateIncluded

Course overview

React Native apps used in real businesses have to handle much more than screens: API data that must be cached and work offline, secure authentication, smooth animations, notifications, testing and new releases that ship without disruption. When an app grows without a sound structure, the code becomes hard to maintain, the app slows down and the team keeps fixing the same bugs.

This new edition is the advanced course after Basic React Native with Expo and Intermediate React Native, using Expo SDK 57 and React Native 0.86 on the New Architecture. Learners design the app architecture, separate global state from server state with Zustand, Redux Toolkit and TanStack Query, and build offline-first features, GraphQL, authentication, Reanimated animations, push notifications and tests before releasing to the stores with EAS, all through the AuraMarket shop project. (3 days, 6 hours per day, 18 hours in total, Advanced level.)

What you’ll gain

Structure a large React Native project with TypeScript so it is easy to extend and maintain
Separate and manage global state and server state with Zustand, Redux Toolkit and TanStack Query
Measure and improve performance with the profiler, React Compiler and fast-rendering lists
Connect GraphQL and real-time data, and design apps offline-first
Build secure authentication with OAuth, JWT, secure storage and biometrics
Create smooth animations and gestures with Reanimated and Gesture Handler
Send push notifications and write unit and end-to-end tests
Build, submit and update apps with EAS and track errors after release

Who this course is for

Developers who have completed basic and intermediate React Native, or have equivalent experience
Mobile developers and software engineers building enterprise apps
Tech leads and senior developers who set the team's architecture and practices
Tech entrepreneurs who maintain more complex business apps themselves

Prerequisites

Completion of basic and intermediate React Native, or experience building apps with React Native and Expo
Understanding of TypeScript, async/await, React Hooks and the Context API
Experience with REST APIs, authentication and basic databases
Comfortable with Git, npm and the command line, with an Android phone or iPhone for testing

Curriculum

Course Details

This course is a 2026 edition that replaces the previous Advanced React Native with Expo course and sits above Basic React Native with Expo and Intermediate React Native. It has been rewritten for Expo SDK 57 and React Native 0.86. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures alternating with labs and workshops throughout. Advanced level. It suits developers who already build React Native apps and want to move up to enterprise-grade work. Learners build the AuraMarket shop project from architecture, state management, offline-first data, authentication, animation, push notifications and testing through to releases with EAS, and take home a lab guide and source code.

Day 1 Architecture, State and Performance

Section 1: Lab: Architecture for a Large Project

Feature-based folder structure alongside Expo Router
Separate UI, hooks, services and repositories following Clean Architecture
Strict TypeScript, path aliases, ESLint and Prettier
Configure app.config.ts and environment variables for development, preview and production
Lab: set up the AuraMarket shop project

Section 2: Lab: Global State with Zustand and Redux Toolkit

Put local, global and server state in the right places
Zustand: stores, selectors and persist middleware
Redux Toolkit: store, slices and Redux DevTools for larger teams
When to choose each, and moving away from an overgrown Context
Lab: a cart and settings that survive closing the app

Section 3: Lab: Server State with TanStack Query

Query keys, caching, staleTime and automatic refetching
Mutations with optimistic updates and rollback on error
Infinite queries for page-by-page lists
Interceptors for tokens, retries and central error handling
Lab: a product list with search and filters

Section 4: Lab: Measuring and Improving Performance

Use React Native DevTools and the profiler to find unnecessary renders
React Compiler and doing less manual memo, useMemo and useCallback
Long lists with a well-tuned FlatList and FlashList
Images with expo-image, caching and the right sizes
Check bundle size with Expo Atlas and lazy loading

Section 5: Workshop: Starting the AuraMarket Project

Connect the sample API and build the repository layer
A catalogue screen using TanStack Query and Zustand together
Measure performance before and after tuning
Workshop: review the code structure together

Day 2 Advanced Data, Security and Animation

Section 6: Lab: GraphQL and Real-Time Data

GraphQL with Apollo Client: queries, mutations and the normalised cache
Generate types from the schema with GraphQL Code Generator
Subscriptions over WebSocket for real-time data
Choosing between REST and GraphQL
Lab: order status that updates instantly

Section 7: Lab: Offline-First Apps with SQLite

Store data on the device with expo-sqlite and migrations
Persist the TanStack Query cache so the app opens instantly
Check network status and queue pending changes
Resolve conflicts and show sync status
Lab: a cart and favourites that work offline

Section 8: Lab: Authentication and Security

Sign in with OAuth and social login through expo-auth-session
Handle JWT access and refresh tokens safely
Store tokens with expo-secure-store and combine them with protected routes
Fingerprint or face authentication with expo-local-authentication
Security checklist: secrets in the bundle, HTTPS and deep links

Section 9: Lab: Animation and Gestures with Reanimated

Shared values, animated styles and work on the UI thread
Layout animations for items being added or removed
Gesture Handler: drag, swipe and pinch
Themes, dark mode and animations that respect reduced-motion settings
Lab: swipe-to-save product cards with a bottom sheet

Section 10: Workshop: AuraMarket Core Features

Membership with biometric sign-in
A catalogue with advanced filters that works offline
A cart that keeps its state and syncs with the server
Workshop: test on real phones with a development build

Day 3 Production: Notifications, Testing and Release

Section 11: Lab: Push Notifications with expo-notifications

Set up FCM for Android and APNs for iOS through EAS
Request permission, get a push token and send through the Expo push service or FCM directly
Local notifications and scheduling
Open the right screen on tap with Expo Router
Lab: notify customers when their order status changes

Section 12: Lab: Background Tasks and Native Modules

App state with AppState and background work with expo-background-task
Background work limits on Android and iOS
Config plugins to adjust native projects without manual edits
Build a simple native module with the Expo Modules API
Lab: periodic background data sync

Section 13: Lab: Testing and Quality

Unit tests with Jest and jest-expo
Test components and hooks with React Native Testing Library
Mock APIs and native modules in tests
End-to-end tests with Maestro, with Detox as an alternative
Lab: a test suite for the checkout flow

Section 14: Release and Monitoring with EAS

EAS Build profiles and environment variables on EAS
Submit to the stores with EAS Submit and prepare the store listing
Over-the-air updates with EAS Update, channels and rollouts
CI/CD with EAS Workflows
Track crashes and performance with Sentry

Section 15: Workshop: A Production-Ready AuraMarket Capstone

Add real-time chat with the shop and notifications
Run the test suite and fix the performance issues found
Build a preview release and ship an update through EAS Update
Present your work, review the code and plan next steps

Schedule & training options

For individuals — public rounds

No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770

Join the waiting list Ask about rounds

For organisations — in-house / private

Tailor the content to your team’s tools and projects
Your dates, at your office or live online
Quotation with tax ID for procurement

Corporate training quote

Instructors

Samit KoyomFounder & CEO, IT Genius Engineering

Frequently asked questions

What is the difference between Redux Toolkit and Zustand, and when should you use each?

Redux Toolkit gives a clear structure with a store, slices and actions and strong debugging tools, so it suits large apps built by several developers. Zustand is more concise, creating a store with a single function and no Provider wrapper, which suits medium-sized apps or simpler state. Use either one for global state only: let TanStack Query handle API data, caching and refetching, and keep screen-only state inside components.

How does TanStack Query help in a React Native app?

TanStack Query manages server data for you, handling caching, refetching stale data, retries on failure and loading or error states without writing useEffect and state by hand on every screen. It supports mutations with optimistic updates that show results immediately and roll back on failure, infinite queries for long lists, and a persisted cache so the app shows data as soon as it opens, even offline.

How do you make an app work offline-first?

Store the data users need on the device with expo-sqlite or a persisted cache, and always show the local copy first before refreshing it from the server. When users make changes while offline, queue them and send them once a connection is back. Decide how to resolve conflicting edits, and show the sync status so users know where things stand.

What is EAS Update, and how does it differ from submitting to the stores?

EAS Update sends changes to JavaScript and assets to installed apps over the air without waiting for store review, which suits bug fixes and small content changes, and you can choose the channel and roll updates out gradually. Native changes, such as adding a library with native code or changing app permissions, still need a new build with EAS Build and a store submission through EAS Submit.

Who is the Advanced React Native with Expo course for, and what should I know beforehand?

It suits developers who have completed basic and intermediate React Native or have equivalent experience, mobile developers and software engineers building enterprise apps, and tech leads who set the team's architecture. You should know TypeScript, async/await, React Hooks and the Context API, have worked with REST APIs and authentication, and be comfortable with Git, npm and the command line.

What will I be able to do after the Advanced React Native with Expo course?

You will be able to structure a scalable app, manage state with Zustand, Redux Toolkit and TanStack Query, use GraphQL, build offline-first features, implement OAuth, JWT and biometric authentication, create animations with Reanimated, send push notifications, write tests with Jest and Maestro, and release with EAS Build, Submit and Update while tracking errors in Sentry. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.