validate-skills
Validates skills in this repo against agentskills.io spec and Claude Code best practices. Use via /validate-skills command.
@callstackincubatorInstall SkillMobile
Skill
/react-navigation
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.
Claude Code
$ npx -y skills add callstackincubator/agent-skills --skill react-navigation --agent claude-code
Codex
$ npx skills add callstackincubator/agent-skills --skill react-navigation -a codex -y
Cursor
$ npx skills add callstackincubator/agent-skills --skill react-navigation -a cursor -y
Gemini CLI
$ npx skills add callstackincubator/agent-skills --skill react-navigation -a gemini-cli -y
GitHub Copilot
$ npx skills add callstackincubator/agent-skills --skill react-navigation -a github-copilot -y
OpenCode
$ npx skills add callstackincubator/agent-skills --skill react-navigation -a opencode -y
Windsurf
$ npx skills add callstackincubator/agent-skills --skill react-navigation -a windsurf -y
SKILL.md
react-navigation.SKILL.mdname: 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
Read more
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
Stats
1,707
Stars
120
Forks
Maintained
Maintenance
Shell
Language
MIT
License
Last commit
Created
Ships withagent-skills
Callstack Agent Skills give AI coding assistants practical React Native knowledge drawn from our work on production apps.
1.7k10 skills
Stars on GitHub
Momentum
- stars in total
- 1.7k
Other skills on agent-skills.
@callstackincubatorInstall Skillassess-react-native-mi…
Assesses whether and how an existing mobile product should migrate to React Native. Use when auditing one or more product…
@callstackincubatorInstall Skillcreate-react-native-li…
Scaffolds React Native libraries with create-react-native-library for standalone libraries or local native modules and views. Use…
@callstackincubatorInstall Skillgithub-actions
GitHub Actions workflow patterns for React Native iOS simulator and Android emulator cloud builds with downloadable artifacts.…
@callstackincubatorInstall Skillreact-native-best-prac…
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.…
@callstackincubatorInstall Skillreact-native-brownfiel…
Implements an accepted incremental brownfield migration from native iOS or Android to React Native or Expo using…
@callstackincubatorInstall SkillMore skills from other plugins.
android-reverse-engine…
Decompile Android APK, XAPK, JAR, and AAR files using jadx or Fernflower/Vineflower. Reverse engineer Android apps, extract HTTP…
@simoneavogadroInstall Skill
Questions about react-navigation.
- Which coding agents can use react-navigation?
- react-navigation installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.