expo-router

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

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/Taquit/Life-Manager --skill expo-router-taquit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-router
Source: https://github.com/Taquit/Life-Manager/tree/main/double_m_react/.agents/skills/expo-router
Command: npx skills add https://github.com/Taquit/Life-Manager --skill expo-router-taquit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires expo-router, and includes references (resource) components.

What problem does it solve? Structuring navigation in React Native apps with Expo Router requires knowledge of file-based route conventions, dynamic segments, native stacks, tabs, modals, and platform-specific iOS features, which is error-prone without guidance. ## 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 headers, toolbars, search bars, NativeTabs, modals, form sheets, and Link previews with context menus. - Platform-Specific Patterns: Apply iOS 26 liquid glass tabs, Apple Zoom transitions, and header search bars following platform conventions. - Use Case: When building a finance app with tabs for transactions and search, use this Skill to scaffold the route structure, nest Stacks inside NativeTabs, and add a header search bar with filtering. ## Quick Start Use the expo-router skill to set up a tab-based navigation structure with a native stack, search bar, and modal form sheet in 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 set up file-based routing with Expo Router?▼

Place route files in the app directory, using _layout.tsx files to define stacks and [id].tsx for dynamic segments. Every directory can have a layout file wrapping its routes, and the app must always include a route matching "/".

How to add native tabs in Expo Router?▼

Use NativeTabs from expo-router/unstable-native-tabs with NativeTabs.Trigger components for each tab. Each trigger needs a name matching the route, plus Icon and Label child components, and you should nest a Stack inside each tab for headers.

Should I use NativeTabs or JS Tabs in Expo Router?▼

Prefer NativeTabs for the best native experience, including iOS 26 liquid glass effects and Material 3 on Android. JS Tabs use a props-based API while NativeTabs use component-based triggers, but NativeTabs cannot be nested and Android limits you to 5 tabs.

Does Expo Router support header search bars?▼

Yes, add a search bar via headerSearchBarOptions on a Stack.Screen or the Stack.SearchBar component. You can manage state with a useSearch hook that wires onChangeText callbacks to filtering logic.

Why is my Expo Router tab bar transparent on iOS?▼

On iOS 18 and earlier, the tab bar turns transparent if the first child of the screen is not a ScrollView or FlatList. Wrap content correctly, use collapsable={false} on wrapper views, or set disableTransparentOnScrollEdge on the trigger.

What are the limitations of form sheets in Expo Router?▼

Form sheets require the Stack navigator and presentation set to formSheet with sheetAllowedDetents. Content must use flex: 1 to fill the sheet, and transparent backgrounds need contentStyle with backgroundColor set to transparent.