skills.rest
CYRUS-pinto
CYRUS-pintoCOMMUNITY
Explore all skills by this author →
GitHub

expo-router

Implements file-based navigation and routing for Expo Router apps.

Updated Sep 11, 2026
Search Tags:#navigation#ios#react-native#expo#expo-router#file-based routing#native tabs
One-click install
npx skills add https://github.com/CYRUS-pinto/pi-bot --skill expo-router-cyrus-pinto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-router
Source: https://github.com/CYRUS-pinto/pi-bot/tree/main/.agents/skills/expo-router
Command: npx skills add https://github.com/CYRUS-pinto/pi-bot --skill expo-router-cyrus-pinto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Structuring navigation in React Native apps with Expo Router requires knowing many conventions: file-based routes, dynamic segments, group routes, native stacks, tabs, modals, and headers. This Skill provides the conventions and code patterns to build correct, native-feeling navigation without digging through documentation. ## Core Features & Use Cases - File-Based Routing: Organize routes in the app directory with dynamic routes, catch-all segments, group routes, and _layout files. - Native Navigation Components: Configure native Stack screens, NativeTabs with SF Symbols, modals, form sheets, headers, toolbars, and header search bars. - Rich Link Interactions: Add Link previews, long-press context menus, and Apple Zoom transitions for iOS-native navigation feel. - Use Case: You are building an Expo app with a home feed and search tab. Use this Skill to set up NativeTabs with a search role, nest Stacks per tab with large titles, add a header search bar, and present detail screens as form sheets. ## Quick Start Use the expo-router skill to set up a NativeTabs layout with home and search tabs, each with its own native Stack and a header search bar.

Frequently Asked Questions about expo-router

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

FAQPage Schema
How do I structure routes in Expo Router?▼

Place route files in the app directory, using [id].tsx for dynamic segments and (group) folders for URL-independent grouping. Every directory can have a _layout.tsx defining its navigator, and the app must always have a route matching "/".

How do I add native tabs in Expo Router?▼

Import NativeTabs from expo-router/unstable-native-tabs and define a NativeTabs.Trigger per route with Label, Icon (sf/md props), and Badge children. Nest a Stack inside each tab for headers, since native tabs do not render headers themselves.

How do I present a modal or bottom sheet in Expo Router?▼

Set presentation to "modal" or "formSheet" in Stack.Screen options. For form sheets, configure sheetAllowedDetents, sheetGrabberVisible, and a transparent contentStyle background for the liquid glass effect on iOS 26.

Should I import from @react-navigation directly in Expo Router?▼

No. In SDK 56 and later, import from expo-router/react-navigation instead of @react-navigation/native, /core, /elements, or /routers. This ensures compatibility with Expo Router's integrated navigation layer.

Why is my tab bar transparent or headers missing in Expo Router?▼

Missing headers mean you need a Stack nested inside each tab. Transparent tab bars on iOS 18 and earlier require the ScrollView to be the first opaque child of the screen, or set disableTransparentOnScrollEdge on the trigger.

What are the limitations of NativeTabs in Expo Router?▼

NativeTabs supports a maximum of 5 tabs on Android, cannot nest inside other native tabs, and requires static tab definitions since dynamic changes remount the navigator and lose state. Toolbar components are iOS only.

Related Skills

Explore More Software Engineering Skills→
TaquitTaquit

expo-project-structure

Defines folder structure conventions for scaffolding new Expo apps with Expo Router.

Community
Basic
rladydqls99rladydqls99

rn-screen

Generate React Native screen components with data fetching and state handling.

Community
Intermediate
truongnattruongnat

react-native-design

A data-driven approach to evaluating LLMs.

Community
Advanced
AIBiz-AutomatyzacjeAIBiz-Automatyzacje
16

expo-router

Implements file-based navigation and routing for Expo Router apps.

Community
Intermediate