React Navigation Skills
Two skills from the React Navigation team move navigators to static config and upgrade the library to version 7 or 8
- 23 ★ on the repository
- Last commit
Extended access
Why this level
- The agent edits navigation files across the project, and a migration mistake changes screen and deep link behavior
- After the edits the skill runs the project's type check, linter and tests, and with them the scripts from `package.json`
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/react-navigation-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent edits navigation files across the project, and a migration mistake changes screen and deep link behavior
- After the edits the skill runs the project's type check, linter and tests, and with them the scripts from `package.json`
This is third-party code. Review the repository files before installing.
What it does
The `migrate-to-static-config` skill rewrites navigators from the dynamic JSX-element API to the static configuration introduced in React Navigation 7. The agent first reads the `@react-navigation/native` version in `package.json` and opens the reference for 7.x or 8.x. The order of preference is a direct move to a static object, then static config with `.with()` for a navigator wrapper, then context for data that used to travel through render callbacks, and only as a last resort the navigator stays dynamic. The `upgrade-react-navigation` skill moves a project from 6.x to 7.x and from 7.x to 8.x. It bumps dependencies and tooling, then fixes renamed and removed APIs for navigation, linking, themes, navigators and screen options. After the edits the agent detects the package manager, runs the type checker, the linter and tests when they exist, and works through the automatic and manual checks in the reference.
Who it is for. React Native developers who upgrade React Navigation from version 6 or move old navigators to the static API.
Good fit when
- An app on React Navigation 6 is due for version 7, and renamed navigation and linking calls need fixing
- The screen tree is built from `Stack.Navigator` and `Stack.Screen` elements and is being moved to a static object
- Deep links must survive the move, and the skill accounts for the `linking` configuration during the transfer
- Screens receive data through render callbacks and are being moved to context
- A 7.x project is upgraded to 8.x, and you want to go through the automatic and manual checks
Not a fit when
- The project is below version 7: static config is not supported there, so upgrade first
- You are writing a new app from scratch: the skills assume existing navigation code
- You need a general React Native review, for example of performance: the skills cover React Navigation only
Example request
Upgrade React Navigation from 6 to 7 in this project, then move the navigators to static config and run the type checkLimitations
- Migration to static config works with versions 7.x and 8.x, and for 6.x the skill sends you to upgrade first.
- When the skill is unsure how to carry a behavior over, it stops and asks the user instead of guessing.
- The repository has no license file, and the license type is not stated.
- Installation uses the generic `npx skills add` command, and the tool picks the agent and directory itself.
- The skill runs the type checker, linter and tests only when the project has such scripts.
How to disable. Delete the `migrate-to-static-config` and `upgrade-react-navigation` folders from the agent's skills directory. Edits already made in the project are undone with git.
FAQ
How do I install the React Navigation skills in Claude Code?
Run `npx skills add react-navigation/skills`. The tool detects the agent and puts both skills in the right directory. Then ask the agent to upgrade the library or move navigators to static config.
Which library versions are supported?
The upgrade goes from 6.x to 7.x and from 7.x to 8.x. The move to static config targets 7.x and 8.x. For other versions the skill points to the official upgrade guides.
What does the skill do with navigators that cannot be moved?
If a static object cannot express the screen structure without changing behavior, the navigator stays dynamic. The order of preference is a direct move, static config with `.with()`, context, then a dynamic navigator.
Will the migration break deep links?
The skill commits to keeping behavior, typing and deep links. The skill accounts for the `linking` configuration during the transfer, and the agent runs the type check and tests after the edits.
How are these skills different from general React Native skills?
These are two narrow skills for one library with version references for 7 and 8. General sets advise on performance and tests, and they do not cover the specific navigation API changes.
Discussion
No questions or reviews yet.
Related
SkillsCallstack agent skills for React Native
Callstack Agent Skills
Callstack's React Native skills: performance, version upgrades, native app migration, testing and CI
Animations, gestures, on-device AI, audio and live video: 10 Software Mansion skills teach the agent React Native patterns.
Uniwind skills
Uniwind
Two skills for React Native with Tailwind v4: Uniwind styling rules and a step-by-step move of a project off NativeWind
A skill that finds Reanimated and Animated code in a project and migrates it to native EaseView components from react-native-ease
React Native Unistyles v3 skill
react-native-unistyles-v3
A skill for styling React Native with Unistyles v3: setup, themes, responsive layout, variants and v2 migration
Rozenite skill for React Native: an agent attaches to a running app and reads console, network and DevTools plugin data
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| React Navigation Skills (this card) | yes | 23 | |
| Expo Skills | no | 4,069 | Expo's general set for building, deploying and debugging apps, while here are two narrow skills for one navigation library |
| Callstack agent skills for React Native | no | 1,702 | Callstack's general React Native skills on performance, version upgrades and testing, while here it is React Navigation only |
README in short
The page is short: a description, one install command and a list of two skills with a note on what each does. The details live in the skill folders, where each library version has its own reference.