expo-router

Configure file-based routing with Expo Router 6.x for React Native apps.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/toddbadams/SBFoundation --skill expo-router-toddbadams
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: expo-router
Source: https://github.com/toddbadams/SBFoundation/tree/main/.claude/skills/languages/expo-router
Command: npx skills add https://github.com/toddbadams/SBFoundation --skill expo-router-toddbadams

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies navigation setup and management in React Native applications by leveraging a file-system-based routing approach, making app structure intuitive and maintainable.

Core Features & Use Cases

  • File-based Routing: Automatically maps your app's directory structure to navigation routes.
  • Navigator Configuration: Easily set up Stack and Tab navigators, including nested layouts and route groups.
  • Dynamic Routes & Params: Handle dynamic URL segments and pass parameters between screens seamlessly.
  • Use Case: When building a new feature that requires a multi-step form with a dedicated header and back navigation, use this Skill to create the necessary route group and configure the Stack navigator within its _layout.tsx file.

Quick Start

Use the expo-router skill to create a new screen for the '/settings/profile' route.

Frequently Asked Questions about expo-router

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up file-based routing in React Native?

File-based routing in React Native maps your `app/` directory structure directly to navigation routes. Using Expo Router 6.x, files automatically become screens, enabling intuitive and maintainable app structure without manual route configuration.

How do I handle dynamic route parameters in a React Native app?

Dynamic route parameters in React Native are handled by naming files with bracket syntax in the `app/` directory. Expo Router parses these dynamic URL segments and allows you to pass and access parameters between screens seamlessly.

Can I configure nested Stack and Tab navigators with Expo Router?

Yes, you can configure nested Stack and Tab navigators with Expo Router. By adding a `_layout.tsx` file inside a route group, you define the navigator configuration and structure nested layouts for your mobile application.

What is the best way to create a multi-step form with dedicated headers in React Native?

The best way to create a multi-step form with dedicated headers is using a route group. Configure a Stack navigator within the group's `_layout.tsx` file to manage the dedicated header and back navigation across the form screens.

Does Expo Router require manual navigation setup for new screens?

No, Expo Router does not require manual navigation setup for new screens. It automatically maps the file system structure in the `app/` directory to navigation screens, creating routes as soon as the files are added.

Why use file-based navigation over manual route configuration in mobile app development?

File-based navigation simplifies mobile app development by making app structure intuitive and maintainable. It automatically maps the directory structure to routes, reducing boilerplate and streamlining the creation of Stack and Tab navigators.