# React Navigation

Provides React Navigation UI patterns for stacks, tabs, drawers etc.

- Repository: https://github.com/callstackincubator/agent-skills (1694 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-08
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add callstackincubator/agent-skills --skill react-navigation -g -a claude-code -y`
Codex: `npx skills add callstackincubator/agent-skills --skill react-navigation -g -a codex -y`
Cursor: `npx skills add callstackincubator/agent-skills --skill react-navigation -g -a cursor -y`
Gemini CLI: `npx skills add callstackincubator/agent-skills --skill react-navigation -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add callstackincubator/agent-skills`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/callstackincubator/agent-skills/blob/HEAD/skills/react-navigation/SKILL.md