Expo Router v55 Crash Course | Stacks, Tabs, API Routes & More

Expo Router has become the go-to navigation library for new React Native projects, offering native support for iOS and Android design systems like Apple's liquid glass and Material tabs. I cover everything from setting up a new Expo Router project to navigating between screens, using stacks and tabs, and even building server-side API routes.

If you want to master modern React Native navigation with TypeScript type safety and full-stack capabilities, this crash course is for you. I walk you through creating screens, layouts, customizing navigation options, and using router hooks and middleware for protected routes and advanced patterns.

What's inside

• Why Expo Router is the preferred navigation library for new React Native projects
• Creating a new Expo Router project with SDK 55 and liquid glass support
• Understanding the app folder structure and screen routing conventions
• Using stacks for screen navigation and creating new screens
• Navigating between screens with the Link component and TypeScript route safety
• Customizing screen options and headers in layouts
• Native tabs on iOS and Android with material design integration
• Introduction to Expo Router’s full-stack features: API routes and middleware

Why Expo Router is the preferred navigation library for new React Native projects

Expo Router fully supports the latest native design systems on iOS and Android, including Apple's liquid glass effects and Android's Material tabs and symbols. It integrates deeply with Expo SDK 55, enabling apps that feel like first-class citizens on both platforms while also working well on the web.

Beyond navigation, Expo Router is a full-stack framework with server-side integrations. This means you can build API routes and use middleware within the same project, simplifying development. I highlight how Expo Router uses React Navigation under the hood, so if you know React Navigation, you'll find the API familiar but with added conventions and features.

Creating a new Expo Router project with SDK 55 and liquid glass support

To start, I create a new Expo project using the command:

• bunx create-expo-app --template default@sdk55

I specify SDK 55 because the default Expo Go app in stores uses SDK 54, but SDK 55 includes first-class support for liquid glass and native Android tabs. After creating the project, I open it in VS Code and start the Expo server with:

• npx expo start

I demonstrate running the app on iOS 26 simulator and Android device, showing the native tabs and liquid glass effects in action. The new template comes with Expo Router preinstalled and configured.

Understanding the app folder structure and screen routing conventions

All screens and routing-related files must live inside the app folder, which cannot be renamed. This folder contains screens, layouts, and indexes that define the navigation structure. Other components or utility files should be placed outside this folder.

The index.tsx file inside app is the entry point screen for the root route. You can organize screens into nested folders to create nested routes and groups, such as segments for authentication or authenticated users.

I also run a reset command to simplify the default template and remove example screens, so you start with a clean slate.

Using stacks for screen navigation and creating new screens

Expo Router uses stacks to manage screens that overlay each other. I create a new screen by adding a file like explorer.tsx inside the app folder. This automatically registers the screen in the stack.

Stacks allow you to push and pop screens with native gestures and transitions. I explain that a stack is a set of screens layered on top of each other, enabling typical navigation flows like moving from a home screen to a detail screen.

Navigating between screens with the Link component and TypeScript route safety

To navigate, I use Expo Router’s Link component, which takes an href prop pointing to the route path. The latest Expo Router version provides typed routes, so TypeScript ensures you only navigate to existing screens.

This type safety comes from the file-based routing system: creating a file automatically adds a typed route. I show how to add a styled text link that navigates to the new explorer screen. Navigation is fully native, supporting gestures like swipe back on iOS.

Customizing screen options and headers in layouts

Layouts define navigation options for groups of screens. For example, you can set headerShown: false in the layout to hide headers across all stack screens.

I demonstrate toggling the header visibility by changing options in the layout file. Since Expo Router uses React Navigation under the hood, you can pass any React Navigation screen options here, giving you full control over headers, gestures, and other navigation behaviors.

Native tabs on iOS and Android with material design integration

On Android, Expo Router uses native Material tabs with surface colors and symbols, providing a platform-consistent look and feel. Long pressing a tab shows native tooltips with the tab name.

On iOS, tabs support the liquid glass design on the latest versions, while older iOS versions show standard tabs without the effect. I show how the default template includes native tabs out of the box, working seamlessly across platforms.

Introduction to Expo Router’s full-stack features: API routes and middleware

Expo Router is more than client-side navigation; it supports server-side API routes and middleware. This enables you to build backend logic inside your Expo project without separate servers.

While I focus mostly on navigation, it mentions advanced patterns like protected routes and middleware, which can be used to secure screens or handle authentication flows. This full-stack capability makes Expo Router a powerful framework for React Native apps.

Resources

CourseReact Native course

Master React Native fundamentals and navigation with lifetime access.