Expo Router | Beginner's Crash Course | Code with Beto

This guide introduces Expo Router, a file-based routing system built on top of React Navigation for React Native apps. You'll learn how to manage navigation with tabs, stacks, and authentication flows, while highlighting the differences and advantages over traditional React Navigation.

If you want cleaner code, automatic route typing, and a simpler way to organize navigation without boilerplate, this crash course is for you. It’s ideal for React Native developers looking to improve navigation structure and developer experience.

What's inside

Introduction and overview of Expo Router
Differences between Expo Router and React Navigation
React Navigation basics and its challenges
How Expo Router solves React Navigation pain points
File-based routing explained with the app folder structure
Creating tabs and stacks with Expo Router
Handling authentication flows in Expo Router
Upcoming features: server functions in Expo Router v3

Introduction and overview of Expo Router

Expo Router is a routing library for React Native apps that uses a file-based system similar to Next.js. Instead of manually defining navigation stacks, tabs, and drawers in code, you organize your screens as files and folders inside an directory. This structure automatically defines your app’s navigation.

I explain that Expo Router is built on React Navigation, so it inherits its robustness but removes much of the boilerplate. It’s designed to simplify navigation setup and improve developer productivity by leveraging conventions over configuration.

React Navigation is a powerful and mature library that requires explicit setup of navigation containers, stacks, tabs, and screens. This often leads to boilerplate code and no enforced file structure, which can cause messy projects as apps grow.

Expo Router addresses these issues by enforcing a file-based routing system where the folder and file structure directly maps to navigation. It automatically types routes, reducing the need for manual TypeScript declarations. This approach leads to cleaner, more maintainable code and a better developer experience.

I reviews React Navigation’s API: you create navigation containers, define stacks, tabs, or drawers, and then add screens inside them. Navigation props are passed to screens for programmatic navigation.

While React Navigation is flexible and well-maintained, it requires a lot of setup and boilerplate before you can start navigating. Also, there are no rules for file organization, which can lead to confusion in large projects. Typing navigation parameters in TypeScript is also complex and verbose.

Expo Router simplifies navigation by using file-based routing, so you don’t write boilerplate navigation code. You just create files inside the folder, and they become screens automatically.

It also automatically generates TypeScript types for routes, eliminating the tedious manual typing required in React Navigation. The router includes a component that simplifies navigation between screens, making code cleaner and easier to read.

Expo Router’s conventions reduce cognitive load by enforcing a consistent file structure, so you don’t have to decide how to organize navigation files.

File-based routing explained with the app folder structure

The core of Expo Router is the folder, which acts as the entry point and navigation root. Each file inside corresponds to a screen, and folders represent nested routes or groups like tabs or drawers.

For example, creating a file automatically creates a Home screen. Grouping files inside folders like creates tab navigation. This system is similar to Next.js routing, making it familiar for web developers transitioning to React Native.

This approach removes the need for explicit navigation containers or stack definitions in code.

Creating tabs and stacks with Expo Router

Expo Router supports common navigation patterns like tabs and stacks through file and folder naming conventions. You create a folder for tabs and place screen files inside it to define tab routes.

Stacks are created by nesting files or folders. I show how to create two tabs and stack navigation inside them by organizing files in the folder without writing navigation setup code.

This declarative approach makes it easy to visualize and maintain navigation structure just by looking at the file system.

Handling authentication flows in Expo Router

I cover how to handle authentication flows by conditionally rendering routes or redirecting users based on authentication state.

Expo Router allows you to create protected routes by checking user status and controlling access to screens. Since routing is file-based, you can organize public and private routes in separate folders and use hooks or server functions to manage authentication logic.

This simplifies managing complex flows like login, signup, and protected content.

Upcoming features: server functions in Expo Router v3

Expo Router v3 introduces server functions, enabling you to write backend logic directly inside your React Native app. This feature is inspired by Next.js API routes and aims to simplify backend development for solo developers.

Server functions will allow fetching data and handling server-side logic securely without managing a separate backend. This improves developer experience and app security by integrating server and client code in one place.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Premium resourcePro Membership

Get access to exclusive tutorials, templates, and community support.

Let's connect!

Expo Router | Beginner's Crash Course