react-navigation
callstackincubator/agent-skills
React Navigation UI patterns for stacks, tabs, drawers, and sheets in React Native apps.
What is react-navigation?
Provides patterns and configuration guidance for React Navigation 7, covering stack-based navigation, bottom sheets, tabs, drawers, headers, and safe-area handling. Use this when building navigation UIs and configuring navigator components in React Native applications.
- Build stack-based navigation with screens and modals
- Create bottom sheets and form sheets
- Implement bottom tabs with cross-platform and native support
- Add swipeable top tabs with Material Design
- Configure drawer and sidebar navigation
- Customize headers in navigators
How to install react-navigation
npx skills add https://github.com/callstackincubator/agent-skills --skill react-navigation- React Navigation 7 installed
- React Native project set up
- Familiarity with React and component-based architecture
How to use react-navigation
- 1.Identify your navigation pattern (stack, tabs, drawer, sheets) using the problem-to-skill mapping table
- 2.Review the corresponding reference file (stacks.md, bottom-tabs.md, drawers.md, etc.)
- 3.Check if your app uses Static API (object-based) or Dynamic API (component-based) and follow that style
- 4.Implement the navigator configuration and screen components as shown in the reference
- 5.Configure headers, safe areas, and insets as needed for your use case
Use cases
- Setting up a multi-screen app with stack navigation and modal presentations
- Adding a bottom tab bar to switch between main app sections
- Creating a drawer sidebar for navigation on mobile and responsive layouts on web
- Configuring custom headers with buttons and styling in tab or drawer navigators
- Handling notches, status bars, and safe areas across iOS and Android devices
- React Native developers
- Mobile app developers using React Navigation
- Full-stack developers building cross-platform apps with web support
react-navigation FAQ
For existing apps, match the current navigation setup. For new apps, prefer Static API (object-based) as it is simpler to configure.
No, this skill only applies to React Navigation 7. APIs and patterns may differ in other versions.
Refer to the safe-areas.md reference for handling status bars, header insets, and tab bar insets across platforms.
Yes, the bottom-tabs.md reference covers cross-platform bottom tabs with web support, and drawers provide responsive sidebars for web.
Both are covered in form-sheet.md. Form sheets are typically full-height modals for forms, while bottom sheets are smaller overlays; the reference shows how to implement both.
Full instructions (SKILL.md)
Source of truth, from callstackincubator/agent-skills.
name: react-navigation description: Provides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and insets. license: MIT
React Navigation
Overview
Guide for building navigation UIs with React Navigation.
This skill only applies to React Navigation 7. The API and patterns may not work with different versions.
API Selection
React Navigation offers two API - object-based Static API and component-based Dynamic API.
- Existing Apps: Check the current navigation setup and follow the same API style when using the references
- New Apps: If the app does not have an existing navigation setup yet, prefer
Static API
When to Apply
Reference this skill when:
- Building navigation UI patterns such as stacks, tabs, drawers, sheets etc.
- Configuring headers and other built-in navigator UI
- Handling safe areas and insets in navigation UI
References
| File | Description |
|---|---|
| stacks.md | Stack based navigation |
| form-sheet.md | Bottom sheet and form sheets |
| bottom-tabs.md | Cross-platform bottom tabs |
| native-bottom-tabs.md | Native bottom tabs |
| material-top-tabs.md | Swipeable Top tabs |
| drawers.md | Drawer navigation and sidebars |
| header.md | Configuring headers |
| safe-areas.md | Safe-area handling |
Problem -> Skill Mapping
| Problem | Start With |
|---|---|
| Showing screens and modals in a stack | stacks.md |
| Showing bottom sheets or form sheets | form-sheet.md |
| Showing screens in bottom tabs or responsive sidebars with web support | bottom-tabs.md |
| Showing screens in native tabs on iOS & Android | native-bottom-tabs.md |
| Showing content in swipeable top tabs | material-top-tabs.md |
| Using a drawer or sidebar | drawers.md |
| Configuring the header in bottom tab or drawer navigator | header.md |
| Handling safe-area such as status bar, header insets, tab bar insets etc. | safe-areas.md |
Related skills
More from callstackincubator/agent-skills and the wider catalog.
upgrading-react-native
Upgrade React Native apps to newer versions with template diffs, dependency updates, and native config migration.
validate-skills
Validate skills against agentskills.io spec and Claude Code best practices.
assess-react-native-migration
Assess React Native migration readiness by auditing product scope, native dependencies, and delivery constraints.
create-react-native-library
Scaffold React Native libraries with native module and UI component support.
audit
Comprehensive SEO audit covering technical health, on-page optimization, content quality, and competitive positioning.
audit-speed
Deep Core Web Vitals and page speed audit with root-cause analysis and optimization recommendations.