Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From react-native-brownfield-migration
Provides React Navigation 7 UI patterns for stacks, tabs, drawers, sheets. Use when building navigation UIs, configuring headers, bottom sheets or handling safe areas and insets.
How this skill is triggered — by the user, by Claude, or both
Slash command
/react-native-brownfield-migration:react-navigationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Guide for building navigation UIs with React Navigation.
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.
React Navigation offers two API - object-based Static API and component-based Dynamic API.
Static APIReference this skill when:
| 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 | 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 |
npx claudepluginhub callstackincubator/agent-skills --plugin react-native-brownfield-migration2plugins reuse this skill
First indexed Jul 7, 2026
Implements stack, tab, drawer navigation in React Native apps using React Navigation. Covers installation, setup, deep linking, and navigation patterns.
Provides navigation patterns for React Native Web using React Navigation, including stack/tab navigators, type-safe params, deep linking, and web URLs. Use for cross-platform routing.
Sets up navigation structure for React Native apps: tab bars, stack navigators, drawer menus, deep linking, and type-safe parameters using Expo Router or React Navigation.