React Navigation UI Guide
Practical React Navigation 7 patterns for building and configuring React Native navigation interfaces.
The material stays within React Navigation configuration and UI patterns, with no credential access, data handling, external side effects, or destructive operations, so its scope is least-privilege. It lacks user-confirmation, rollback, and sensitive-data guidance, and the author identity is unverified, so points are deducted.
The skill explicitly targets React Navigation 7 and documents API selection, platform prerequisites, and several Android/iOS/web limitations, reducing misuse. However, it includes no tests, CI, compatibility matrix, or diagnosable failure feedback; static evidence is therefore insufficient for a higher score.
The audience, scenarios, and non-fit cases are reasonably clear across stacks, tabs, drawers, sheets, headers, and safe areas, with platform caveats. Chinese-language support is absent, trigger conditions remain broad, and mainland-China reachability of linked documentation is not established, so points are deducted.
The main file routes readers to topic-specific references with progressive disclosure and includes MIT licensing, prerequisites, examples, related topics, and limitations. It lacks explicit maintenance ownership, update path, changelog, and clear version governance, so points are deducted.
The skill supplies extensive Static API and Dynamic API examples that are directly usable for common React Navigation 7 UI work. The files provide no execution evidence, and coverage of full application integration, error handling, and dependency coordination is limited; the score follows the static-review ceiling.
It links to canonical React Navigation and React Native documentation and provides auditable code examples plus platform conditions. It contains no committed tests, CI results, or third-party reproduction evidence, so static verifiability remains limited.
- This skill applies only to React Navigation 7; examples and APIs may fail with other versions.
- Drawers, material top tabs, native bottom tabs, and form sheets require additional native packages, platform versions, or build configuration that must be checked in the target project.
- Some features use unstable APIs or depend on newer platform versions; recheck official documentation before upgrading React Native, Expo, or React Navigation.
- No examples, tests, or builds were executed, and reachability of linked documentation from mainland-China networks was not verified.
What does this skill do, and when should you use it?
This skill is for developers building React Native navigation UIs with React Navigation 7. It covers stacks, bottom tabs, native bottom tabs, material top tabs, drawers, form sheets, headers, and safe-area handling. For existing applications, it recommends following the navigation API style already in use; for new applications, it prefers the Static API. Its problem-to-reference mapping directs coding assistants to focused Markdown guides for each navigation scenario.
It checks an existing application's navigation setup and selects references consistent with its Static or Dynamic API style; maps stack, tab, drawer, sheet, header, and safe-area problems to specific Markdown reference files; and produces implementation guidance for React Navigation 7 navigation UI patterns.
- A React Native developer needs to organize screens and modals and uses the stack-navigation reference.
- A developer needs bottom tabs, responsive sidebars with web support, or native tabs on iOS and Android and selects the relevant tab guide.
- A developer is implementing bottom sheets or form sheets and needs the form-sheet reference.
- A developer is configuring headers in a bottom-tab or drawer navigator and needs the header guide.
- A developer is handling status-bar, header, or tab-bar insets and uses the safe-area guide.
What are this skill's strengths and limitations?
- Covers common navigation UI scenarios including stacks, several tab types, drawers, form sheets, headers, and safe areas.
- Provides a clear problem-to-reference mapping for targeted lookup.
- Includes guidance for choosing between the Static and Dynamic APIs.
- Licensed under MIT.
- Explicitly targets React Navigation 7; APIs and patterns may not work with other versions.
- The supplied source does not include the reference-file contents, test results, or platform validation evidence.
- Installation documentation targets the full skill collection; standalone installation of this skill is not documented.
- Its scope is navigation UI, not broader React Native performance, upgrade, or testing workflows.
How do you install this skill?
The repository ships a collection of skills. Its README documents this Codex project-level installation flow: git clone https://github.com/callstackincubator/agent-skills.git; cp -r agent-skills/skills/* .codex/skills/. For user-level installation, copy the skills into ~/.codex/skills/. The README does not document a separate single-skill installation command for skills/react-navigation/.
How do you use this skill?
Place the react-navigation skill directory in a Codex-recognized skills directory and restart Codex. Then invoke it for React Navigation 7 work, for example: Please build a bottom-tab navigation UI using the existing navigation API style and handle safe-area insets.