Intermediate React Native is a follow-on course using Expo that covers layouts for every screen size, reusable components and themes, state with useReducer and Context, validated forms with React Hook Form and Zod, and nested drawer, tab and stack navigation. It suits developers who have built a first React Native app, and you leave able to build a news app connected to a Node.js API.
Once you can build a first React Native app, the next challenge is making it look good on every screen size, splitting it into reusable components, handling state that is getting more complex, building forms that really validate data and setting up layered navigation without confusion. These skills are the gap between a sample app and one that is ready for real users.
This new edition builds on Basic React Native with Expo and uses Expo SDK 57, React Native 0.86 and TypeScript. Learners design advanced layouts, create reusable components and themes, manage state with useReducer and Context, build forms with React Hook Form and Zod, combine drawer, tab and stack navigation with Expo Router, load data from an API, store data on the device and use the camera and location, finishing with a news app workshop connected to a Node.js API. (3 days, 6 hours per day, 18 hours in total, Intermediate level.)
Course Details
This course is a 2026 edition that replaces the previous Intermediate React Native course and sits between Basic React Native with Expo and Advanced React Native with Expo. It has been rewritten for Expo SDK 57, React Native 0.86 and Expo Router. 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. Intermediate level. It suits people who can build a first React Native app and want to tackle more complex apps. Learners practise layouts, components, state, forms and layered navigation before combining them in a news app connected to a Node.js API, and take home a lab guide and source code.
Section 1: Lab: Reviewing Core Components and the Expo Project
Section 2: Lab: Advanced Layout Design
Section 3: Lab: Welcome and Onboarding Screens
Section 4: Lab: Reusable Components and Themes
Section 5: Lab: Managing State with useReducer and Context
Section 6: Lab: Input and Form Components
Section 7: Lab: Validation with React Hook Form and Zod
Section 8: Lab: Navigation with Expo Router
Section 9: Workshop: Combining Drawer, Tabs and Stack
Section 10: Lab: Loading API Data with Custom Hooks
Section 11: Lab: Storing Data on the Device
Section 12: Lab: Camera, Images and Location
Section 13: Workshop: A News App Connected to a Node.js API
Section 14: Testing on Real Phones and Next Steps
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
useState suits values that change simply, such as text in an input or an open or closed flag. useReducer gathers state changes into a reducer function that takes the current state and an action and returns the new state, while the component just calls dispatch with the action type. It suits state with several related values or many ways to change, such as a shopping cart, makes the logic easier to check and test, and combines with Context to share data across the app.
A parent passes data down to a child through props, such as text, images or styles, typed with TypeScript, so one component can be reused with different data. To send data back up, the parent passes a callback function as a prop and the child calls it with the value, for example when a button is pressed or text is typed. The state then lives in one place, the parent, and every child shows the same data.
Expo Router builds navigation from the folder structure, and each folder's _layout file sets which navigator it uses. A common approach is a drawer as the outer layer for the main menu, a tabs folder inside it, and a stack in each tab for detail screens. Pass values between screens as parameters read with useLocalSearchParams, and decide which layer shows the header so headers do not double up.
The React Native documentation recommends starting new apps with a framework such as Expo, because it provides file-based routing, maintained libraries for device features and build tools that cut down native project setup. Learners can spend more time writing the app and can still add native code later when needed. What you learn about components, state and layout applies to React Native in any setup.
It suits anyone who wants to build Android and iOS apps with JavaScript or TypeScript and take their React Native skills a step further before the advanced level. You should have completed Basic React Native with Expo or have equivalent knowledge: creating an Expo project, using the core components and setting up basic navigation, plus familiarity with REST APIs and JSON.
You will be able to build layouts for different screen sizes, create welcome and onboarding screens, write reusable components and themes, manage state with useReducer and Context, build validated forms with React Hook Form and Zod, combine a drawer, tabs and stacks, load API data, store data on the device, use the camera and location, and build a news app connected to a Node.js API. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Programming underpins almost every area of IT, from websites and mobile apps to desktop software and systems that work with data. Even with AI now helping to write code, people who understand how programs and data are structured are still needed, because…
Today's web applications need to respond quickly, feel as smooth as a mobile app and be easy to extend as the system grows. React is one of the most widely used libraries for building user interfaces because it splits a page into reusable components, and it…
Developers who already write React for the web have more than half of what they need to build mobile apps with React Native, because components, props, state and hooks work the same way. What is new is everything that differs from the web: there is no DOM and…
