skills.rest
gmackie
gmackieCOMMUNITY
Explore all skills by this author →
Website𝕏@grahammackieGitHub

expo-router

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

Updated Mar 27, 2026
Search Tags:#navigation#mobile#Expo#react-native#expo-router#file-based routing#native tabs
One-click install
npx skills add https://github.com/gmackie/agent-skills --skill expo-router-gmackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-router
Source: https://github.com/gmackie/agent-skills/tree/main/skills/expo-router
Command: npx skills add https://github.com/gmackie/agent-skills --skill expo-router-gmackie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Structuring navigation in Expo apps requires knowledge of file-based routing conventions, native stack configuration, and platform-specific UI patterns that are easy to get wrong, leading to broken routes, missing headers, and non-native user experiences. ## Core Features & Use Cases - File-Based Route Structure: Organize routes in the app directory with dynamic segments, catch-all routes, group routes, and shared array routes across tabs. - Native Navigation Components: Configure Link with previews and context menus, native Stack screens, modals, form sheets, NativeTabs, headers, toolbars, and header search bars. - Use Case: When building an Expo app with tabs and detail screens, use this Skill to scaffold the app directory with NativeTabs at the root, nested Stacks per tab, and shared group routes so both tabs can push common screens. ## Quick Start Use the expo-router skill to set up a tab-based navigation structure with native stacks, link previews, and a search tab for my Expo app.

Frequently Asked Questions about expo-router

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

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

Place routes in the app directory, use square brackets like [id].tsx for dynamic segments, and parentheses like (group) for URL-independent grouping. Always define navigation with _layout.tsx files and never co-locate components or utilities in the app directory.

How to add native tabs in Expo Router?▼

Import NativeTabs from expo-router/unstable-native-tabs and define a NativeTabs.Trigger for each route with Icon, Label, and Badge children. Nest a Stack inside each tab for headers, and place the search-role tab last.

Does Expo Router support form sheets and modals?▼

Yes, set presentation to "modal" or "formSheet" in Stack.Screen options. Form sheets support sheetAllowedDetents for height stops, sheetGrabberVisible, and transparent contentStyle for liquid glass on iOS 26.

Can I import @react-navigation directly with Expo Router?▼

In SDK 56 and later, never import from @react-navigation packages directly. Use expo-router/react-navigation instead, which covers native, core, elements, and routers subpackages.

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, or set disableTransparentOnScrollEdge on the trigger.

Related Skills

Explore More Software Engineering Skills→
timikalo7timikalo7

expo-mobile-mvp

Scaffolds and builds cross-platform mobile app MVPs with Expo, React Native, and expo-router.

Community
Advanced
carlos3gcarlos3g
2

expo-deployment

Automate Expo app deployment to iOS, Android, web, and API routes with EAS.

Community
Intermediate
AIBiz-AutomatyzacjeAIBiz-Automatyzacje
16

expo-native-ui

Builds native-feeling Expo screens with semantic colors, SF Symbols, animations, and platform controls.

Community
Advanced
SajinthanSajinthan

screen

Generate Expo Router screens, route groups, and layouts for React Native apps.

Community
Advanced