rn-navigation

Implement Expo Router navigation patterns in React Native apps.

Updated Dec 22, 2025
One-click install
npx skills add https://github.com/CJHarmath/claude-agents-skills --skill rn-navigation
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: rn-navigation
Source: https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/rn-navigation
Command: npx skills add https://github.com/CJHarmath/claude-agents-skills --skill rn-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides practical navigation patterns and structure for Expo Router-driven React Native apps, helping teams organize screens, layouts, and flows without boilerplate.

Core Features & Use Cases

  • File-based routing fundamentals: Understand how app/ routes map to screens and how to compose layouts with _layout.tsx.
  • Route structures and patterns: Implement tabs, auth flows, dynamic routes, and catch-all routes in a scalable way.
  • Navigation operations: Use programmatic navigation (navigate, push, replace, back) and link components to move between screens.
  • Deep linking and modals: Configure and handle deep links and present modals from any screen to enhance UX.
  • Typical use cases: Build an app with authentication, a tabbed main area, and nested screens like profile and settings.

Quick Start

Set up a minimal Expo Router project and implement a basic tab-based navigation with a home and profile screen, including an authentication flow.

Frequently Asked Questions about rn-navigation

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

FAQPage Schema
How do I set up Expo Router navigation for a React Native app?

Set up Expo Router navigation by installing the expo-router package in a standard React Native project, then map your app/ directory routes to screens and compose layouts using _layout.tsx files.

What is file-based routing in React Native and how does it structure screens?

File-based routing in React Native maps your app/ directory structure directly to screens, allowing you to compose scalable layouts and nested screens using _layout.tsx files without manual boilerplate.

How do I implement authentication flows and tabs with Expo Router?

Implement authentication flows and tabs with Expo Router by using layout groups to organize route structures, separating protected screens from public ones within your app/ directory.

Can I use programmatic navigation and deep links in React Native with Expo Router?

Yes, Expo Router supports programmatic navigation operations like navigate, push, replace, and back, alongside configuring deep links and presenting modals from any screen to enhance UX.

What's the best way to handle dynamic routes and modals in Expo Router?

Handle dynamic routes and modals in Expo Router by structuring scalable route patterns within your app/ directory, presenting modals from any screen to handle dynamic content efficiently.

Does Expo Router require specific React Native tooling or dependencies to work?

Expo Router requires a standard project setup with Expo and the expo-router package, adhering to typical React Native tooling workflows without additional external dependencies.