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.