navigation

Implements Expo Router file-based routing, dynamic routes, and navigation guards for React Native apps.

Updated Aug 19, 2026
One-click install
npx skills add https://github.com/homeslands/trend-ui --skill navigation-homeslands
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: navigation
Source: https://github.com/homeslands/trend-ui/tree/main/app/order-ui/src/.claude/skills/navigation
Command: npx skills add https://github.com/homeslands/trend-ui --skill navigation-homeslands

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building screens and wiring up navigation in a React Native app with Expo Router involves many conventions—file-based routes, dynamic segments, nested layouts, deep links, and auth guards—that are easy to get wrong or inconsistent across a codebase. ## Core Features & Use Cases - File-Based Routing Conventions: Defines the route structure for tabs, nested stacks, dynamic segments like [id].tsx, and standalone flows such as payment and auth. - Navigation Patterns: Provides ready-to-use patterns for router.push with params, useLocalSearchParams, route guards, deep linking, and stack resets on logout. - Performance Optimization: Covers pre-mounting screens with GhostMount, predictive data prefetching, loading overlays, and shared element transitions. - Use Case: When adding a new product detail screen, follow the documented pattern to create app/(tabs)/menu/product/[id].tsx, read the id via useLocalSearchParams, and navigate with router.push using typed params. ## Quick Start Ask the assistant to add a new screen with a dynamic route and navigation from an existing list, following the project's Expo Router conventions.

Frequently Asked Questions about navigation

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

FAQPage Schema
How do I navigate to a dynamic route with params in Expo Router?▼

Use router.push with a pathname containing the dynamic segment and a params object, for example pathname '/(tabs)/menu/product/[id]' with params { id: productId }. The target screen reads the value with useLocalSearchParams.

How to read route parameters in an Expo Router screen?▼

Use the useLocalSearchParams hook from expo-router with a typed generic such as { id: string }. For nested screens using React Navigation directly, useRoute from @react-navigation/native also exposes params.

How do I protect routes with authentication in Expo Router?▼

Check authentication state in the root layout on startup and call router.replace('/auth/login') when unauthenticated. Individual protected screens can also render a login prompt instead of content when the auth store reports no session.

Does Expo Router support deep linking to nested routes?▼

Yes, Expo Router maps URLs directly to file-based routes when a scheme and origin are configured in app.json. A URL like trendcoffee:///payment/order123 resolves to /payment/[order].tsx with the order param populated.

Why does navigation feel slow between screens in React Native?▼

Slow transitions usually come from mounting heavy screens and fetching data after navigation starts. Pre-mount routes with a ghost-mount provider, prefetch data on press-in, and skip loading overlays when the query cache already has data.