How do I install the Rn Expo Router skill?

Run npx skillmds@latest add lukedj78/rn-expo-router in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Rn Expo Router safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Rn Expo Router?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Rn Expo Router free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Rn Expo Router?

lukedj78 (@lukedj78) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Rn Expo Router by lukedj78 — Agent Skill

Name: Rn Expo Router
Author: lukedj78

Rn Expo Router

Use when working with navigation in an Expo + React Native app: adding routes, building tab/stack/drawer layouts, modal routes, dynamic segments (e.g. /profile/[id]), typed routes, deep linking, search params. Triggers on: "add a route", "wire up tabs", "open as modal", "set up deep linking", "configure navigation", or whenever an agent is about to touch a file under app/. Not for: styling navigation chrome (rn-styling), animating transitions (rn-animations-gestures, Wave 3), or non-RN web routing.

lukedj78 Updated Sep 17, 2026

File contents

rn-expo-router — guardrail for navigation in Expo + RN

For the current Expo API and per-version details, verify against the Expo docs / MCP mcp.expo.dev / expo/skills (see rn-fundamentals → Source of truth).

The 4 rules (non-negotiable)

Expo Router only. Never import from @react-navigation/* directly — Expo Router wraps and owns it.
File-based: routes live in app/. The filename IS the URL. _layout.tsx files define the layout for their directory.
Typed routes ON. In app.json: "expo": { "experiments": { "typedRoutes": true } }. Use Href type for navigation, never raw strings.
Layouts contain navigators. Screen files contain only the screen UI. Tab bar / stack header config goes in _layout.tsx.

Quick decision tree

"Tabs / Stack / Drawer — which?" → references/decision-tree.md
"How do I structure routes for an auth-gated section?" → references/patterns.md (Auth groups)
"Deep linking from notification or URL?" → references/deep-linking-setup.md
"Show me a real layout" → references/examples/

Common anti-patterns (NEVER do)

❌ import { useNavigation } from '@react-navigation/native' → use useRouter() from expo-router.
❌ router.push('/profile/123') as raw string → typed routes: router.push({ pathname: '/profile/[id]', params: { id: '123' } }).
❌ Defining a <Tabs.Screen> in a screen file — it goes in the parent _layout.tsx.
❌ Hardcoded route strings scattered everywhere → use typed routes (expo-router/typed-routes provides static checking).

Sources

Course: codewithbeto.dev/rnCourse — lesson 11 "Navigation Basics" (free) + 1 free Expo Router lesson.
Official: https://docs.expo.dev/router/introduction/
Official: https://docs.expo.dev/router/reference/typed-routes/

---name: rn-expo-routerdescription: Use when working with navigation in an Expo + React Native app: adding routes, building tab/stack/drawer layouts, modal routes, dynamic segments (e.g. /profile/[id]), typed routes, deep linking, search params. Triggers on: "add a route", "wire up tabs", "open as modal", "set up deep linking", "configure navigation", or whenever an agent is about to touch a file under app/. Not for: styling navigation chrome (rn-styling), animating transitions (rn-animations-gestures, Wave 3), or non-RN web routing.---# rn-expo-router — guardrail for navigation in Expo + RN> For the current Expo API and per-version details, verify against the Expo docs / MCP `mcp.expo.dev` / `expo/skills` (see rn-fundamentals → Source of truth).## The 4 rules (non-negotiable)1. **Expo Router only**. Never `import` from `@react-navigation/*` directly — Expo Router wraps and owns it.2. **File-based**: routes live in `app/`. The filename IS the URL. `_layout.tsx` files define the layout for their directory.3. **Typed routes ON**. In `app.json`: `"expo": { "experiments": { "typedRoutes": true } }`. Use `Href` type for navigation, never raw strings.4. **Layouts contain navigators**. Screen files contain only the screen UI. Tab bar / stack header config goes in `_layout.tsx`.## Quick decision tree- "Tabs / Stack / Drawer — which?" → `references/decision-tree.md`- "How do I structure routes for an auth-gated section?" → `references/patterns.md` (Auth groups)- "Deep linking from notification or URL?" → `references/deep-linking-setup.md`- "Show me a real layout" → `references/examples/`## Common anti-patterns (NEVER do)- ❌ `import { useNavigation } from '@react-navigation/native'` → use `useRouter()` from `expo-router`.- ❌ `router.push('/profile/123')` as raw string → typed routes: `router.push({ pathname: '/profile/[id]', params: { id: '123' } })`.- ❌ Defining a `<Tabs.Screen>` in a screen file — it goes in the parent `_layout.tsx`.- ❌ Hardcoded route strings scattered everywhere → use typed routes (`expo-router/typed-routes` provides static checking).## Sources- Course: codewithbeto.dev/rnCourse — lesson 11 "Navigation Basics" (free) + 1 free Expo Router lesson.- Official: https://docs.expo.dev/router/introduction/- Official: https://docs.expo.dev/router/reference/typed-routes/

Frequently asked questions