Skip to main content
affpapa.org
RU EN
skill CX Codex

react-navigation — Claude Code skill: what it does, how to install

Reference files for React Navigation 7 UI patterns: stacks, tabs, sheets, drawers, headers, safe areas. Useful when screens and modals have to sit inside a navigator.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add callstackincubator/agent-skills --skill react-navigation -a claude-code
Open on GitHub

What react-navigation does

The skill kicks in while the agent builds navigation for a React Native app: stacks, bottom and top tabs, drawers, bottom sheets, header configuration. Its references sit in references/ — stacks.md, form-sheet.md, bottom-tabs.md, native-bottom-tabs.md, material-top-tabs.md, drawers.md, header.md, safe-areas.md. SKILL.md maps a problem to the file that answers it, so the agent opens one document instead of the whole set.

There is a fork over API style. In an app that already navigates somewhere, the skill says to read the current setup and stay with that style, either object-based Static API or component-based Dynamic API. A brand-new app gets pointed at Static API.

Scope is narrow on purpose: React Navigation 7 only. Patterns and API from other versions may not line up, so check which version the project actually pins before letting the agent rewrite a navigator.

What it helps with

  • lay out screens and modals in a stack
  • add bottom tabs that also render in the browser
  • open a bottom sheet over the current screen
  • keep content clear of the status bar and tab bar insets
  • configure headers inside a drawer navigator

Example prompts for the agent

  • Set up navigation in a new React Navigation 7 app: bottom tabs, with a stack inside the first tab
  • Make the login screen open as a form sheet on top of the stack
  • Content slides under the status bar in the drawer — fix the safe area insets

How to install react-navigation

1Skills CLI (Vercel)

npx skills add callstackincubator/agent-skills --skill react-navigation -a claude-code

2Manually: put the files in place

~/.claude/skills/react-navigation/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/react-navigation/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about react-navigation

How do I install react-navigation in Claude Code?

Run npx skills add callstackincubator/agent-skills --skill react-navigation -a claude-code. The skill lands at ~/.claude/skills/react-navigation/SKILL.md.

What does the react-navigation skill do?

It hands the agent reference docs for React Navigation UI work: stacks, tabs, drawers, bottom sheets, headers, safe areas. The agent pulls the pattern from the matching file rather than inventing a structure.

Which React Navigation version does it cover?

React Navigation 7. On other versions the API and the patterns in the references may not apply.

Source text

SKILL.md · MIT 
---
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][stacks]                         | Stack based navigation         |
| [form-sheet.md][form-sheet]                 | Bottom sheet and form sheets   |
| [bottom-tabs.md][bottom-tabs]               | Cross-platform bottom tabs     |
| [native-bottom-tabs.md][native-bottom-tabs] | Native bottom tabs             |
| [material-top-tabs.md][material-top-tabs]   | Swipeable Top tabs             |
| [drawers.md][drawers]                       | Drawer navigation and sidebars |
| [header.md][header]                         | Configuring headers            |
| [safe-areas.md][safe-areas]                 | Safe-area handling             |

## Problem -> Skill Mapping

| Problem                                                                   | Start With                                  |
| ------------------------------------------------------------------------- | ------------------------------------------- |
| Showing screens and modals in a stack                                     | [stacks.md][stacks]                         |
| Showing bottom sheets or form sheets                                      | [form-sheet.md][form-sheet]                 |
| Showing screens in bottom tabs or responsive sidebars with web support    | [bottom-tabs.md][bottom-tabs]               |
| Showing screens in native tabs on iOS & Android                           | [native-bottom-tabs.md][native-bottom-tabs] |
| Showing content in swipeable top tabs                                     | [material-top-tabs.md][material-top-tabs]   |
| Using a drawer or sidebar                                                 | [drawers.md][drawers]                       |
| Configuring the header in bottom tab or drawer navigator                  | [header.md][header]                         |
| Handling safe-area such as status bar, header insets, tab bar insets etc. | [safe-areas.md][safe-areas]                 |

[stacks]: references/stacks.md
[form-sheet]: references/form-sheet.md
[safe-areas]: references/safe-areas.md
[bottom-tabs]: references/bottom-tabs.md
[native-bottom-tabs]: references/native-bottom-tabs.md
[material-top-tabs]: references/material-top-tabs.md
[drawers]: references/drawers.md
[header]: references/header.md

© callstackincubator · MIT · callstackincubator/agent-skills

Similar skills

Everything for Frontend and UI →
react-native-app aj-geddes A skill that walks your agent through building cross-platform React Native apps: navigation, state, API calls. CX Codex +1 503installs react-native-design Seth Hobson This skill guides React Native styling, navigation, and Reanimated animations. Use it when building cross-platform mobile apps or platform-specific screens. CX Codex 15,522installs navigation-patterns Owl-Listener Helps select and design navigation patterns such as tab bars, sidebars, and breadcrumbs. Useful when mapping user journeys across mobile and desktop interfaces. CX Codex +1 1,800installs react-native-architecture Seth Hobson A skill for Claude Code, Codex and Cursor that hands your agent project layout, navigation, native modules and offline sync patterns for React Native on Expo. CX Codex 15,087installs vercel-react-native-skills vercel A rules pack for React Native and Expo work: lists, animations, navigation, native modules. Load it so your agent makes mobile changes the same way every time. CX Codex +1 255,200installs react-native-expert https://github.com/Jeffallan A skill for AI coding agents that helps build React Native and Expo apps: navigation, native modules, list performance, platform-specific code for iOS and Android. CX Codex +1 4,900installs

From the same set9

react-native-best-practices Provides React Native performance guidelines based on Callstack practices. It helps agents diagnose FPS drops, memory leaks, and large bundles. CX Codex +1 30,200installs upgrading-react-native Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, migrating iOS and Android native config, and resolving CocoaPods and Gradle conflicts. CX Codex +1 12,600installs github-actions Reusable GitHub Actions patterns to build React Native apps for iOS simulators and Android emulators in the cloud and download artifacts. Simplifies CI pipeline setup and scripted retrieval via gh CLI or REST API. CX Codex +1 10,900installs validate-skills Checks skills in skills/ against the agentskills.io specification and Claude Code practices. Use it when authoring or reviewing a skill collection. CX Codex +1 7,300installs react-native-brownfield-migration Guides incremental React Native or Expo adoption in native iOS and Android apps using @callstack/react-native-brownfield. CX Codex +1 5,200installs create-react-native-library Scaffolds a React Native library or a local native module inside an app, then points the agent at the right implementation doc. CX Codex +1 4,400installs react-native-tv-best-practices Reviews React Native TV apps for focus and D-pad navigation, 10-foot layout, DRM playback, and memory use on weak TV hardware. CX Codex +1 2,300installs assess-react-native-migration Audits product repositories and decides whether a mobile app should move to React Native, before anyone writes migration code. CX Codex +1 2,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor