react-navigation
FreeNo executable scriptsNot checkedProvides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets
About this skill
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 |
Install react-navigation in Claude Code & Claude Desktop
Sign up to install this skill
Create a free account to reveal the install command and save the skill to your library.
- Reveal the one-line install command
- Save skills to your synced library
- Get notified when skills update
Allowed tools
Tools this skill is permitted to call.
No restriction — this skill can use any tool.
Bundled files
FAQ
What does the react-navigation skill do?
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.
How do I install the react-navigation skill?
Copy the skill folder into ~/.claude/skills (the Claude Code tab above does this in one command), or install it as a plugin.
Does the react-navigation skill run scripts?
No, this skill is instructions only (SKILL.md) with no executable scripts.
Related skills
Artifacts Builder
Build polished interactive HTML artifacts
by AnthropicFrontend Design
Design clean, modern UI components in code
by Anthropicweb-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for
by Anthropicreplay-ux-research
Analyze Sentry session replays to surface UX patterns, pain points, and user journeys for a given product area. Use when asked to "show me how users use", "day
by Sentry