Guides building React Navigation 7 navigation UIs: stacks, tabs, drawers, sheets, headers and safe areas.
- What it does
- This skill provides reference guidance for building navigation interfaces with React Navigation 7. It covers stack navigation, bottom sheets and form sheets, bottom tabs, native bottom tabs, material top tabs, drawers, header configuration, and safe-area handling. It also explains choosing between the object-based Static API and the component-based Dynamic API, and maps common problems to the relevant reference file.
- When to use it
- Use it when building navigation UI patterns such as stacks, tabs, drawers or sheets in a React Navigation app. It is also meant for configuring headers and other built-in navigator UI, and for handling safe areas and insets in navigation UI.
- Requirements
- No scripts; instructions and reference documents only. It applies specifically to React Navigation 7, so a project using that version is expected.
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
Problem -> Skill Mapping
