react-navigation

SKILL.md

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