skills.rest
AIBiz-Automatyzacje
AIBiz-AutomatyzacjeCOMMUNITY
Explore all skills by this author →
GitHub

expo-router

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

16|1|Updated May 5, 2026
Search Tags:#navigation#mobile#ios#react native#expo-router#file-based routing#native tabs
One-click install
npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill expo-router-aibiz-automatyzacje
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-router
Source: https://github.com/AIBiz-Automatyzacje/workspace-template-mobile/tree/main/.claude/skills/expo-router
Command: npx skills add https://github.com/AIBiz-Automatyzacje/workspace-template-mobile --skill expo-router-aibiz-automatyzacje

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building navigation in React Native apps requires coordinating stacks, tabs, modals, and deep links across platforms. This Skill provides the conventions and patterns for structuring routes, configuring native headers, and using iOS-specific features like link previews, context menus, and zoom transitions in Expo Router. ## Core Features & Use Cases - File-Based Routing: Organize routes in the app directory with dynamic segments, catch-all routes, and group routes that keep URLs clean. - Native Navigation Components: Configure NativeTabs with SF Symbols, Stack headers with toolbars and search bars, form sheets, and modals using native platform APIs. - iOS Navigation Enhancements: Add Link previews, long-press context menus, and Apple Zoom transitions for fluid screen-to-screen animations. - Use Case: You are building a mobile app with a tab bar, a search tab, and detail screens. Use this Skill to set up NativeTabs with nested Stacks, add a header search bar, and present a confirmation form sheet with detents. ## Quick Start Ask the AI to set up an Expo Router app structure with native tabs, a shared stack for detail screens, and a modal form sheet.

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 in Expo Router?▼

Place route files in the app directory where each file exports a default component. Use _layout.tsx files to define Stack or NativeTabs navigators, square brackets like [id].tsx for dynamic segments, and parentheses groups like (auth) to organize routes without affecting URLs.

How do I 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. Use the sf prop for SF Symbols on iOS and the md prop for Material Symbols on Android, and 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 bottom navigation on Android. JS Tabs offer more customization flexibility, but NativeTabs use a component-based API and require nested Stacks for headers.

Does Expo Router support modals and bottom sheets?▼

Yes, set presentation to modal or formSheet in Stack.Screen options. Form sheets support sheetAllowedDetents for height stops, sheetGrabberVisible for the drag handle, and sheetLargestUndimmedDetentIndex to keep background content interactive.

Why is my Expo Router tab bar transparent or icons missing on Android?▼

Missing Android icons usually mean the md prop is not set on NativeTabs.Trigger.Icon. A transparent tab bar on iOS 18 and earlier is fixed by making the ScrollView the first opaque child of the screen or setting disableTransparentOnScrollEdge on the trigger.

What are the limitations of NativeTabs in Expo Router?▼

NativeTabs support a maximum of five tabs on Android, cannot nest inside other native tabs, and must remain static since dynamic changes remount the navigator and lose state. Tab bar height also cannot be measured programmatically.

Related Skills

Explore More Software Engineering Skills→
SajinthanSajinthan

screen

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

Community
Advanced
LykhoydaLykhoyda
10

rn-testing

Automate React Native UI and end-to-end tests with Maestro and maestro-runner.

Community
Advanced
expoexpo
2.4k

expo-native-ui

Build native-feeling Expo UI screens with Apple HIG and Material 3.

Official
Intermediate
orchestra-mcporchestra-mcp
3

react-native-mobile

Develop React Native mobile apps with WatermelonDB offline sync and React Navigation.

Official
Advanced