# upgrade-react-navigation

A skill that walks the agent through a React Navigation major bump, from 6.x to 7.x or 7.x to 8.x, fixing breaking changes without changing navigation behavior.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 502 installs · ★ 23
- Author: react-navigation
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/react-navigation/skills/tree/HEAD/skills/upgrade-react-navigation/SKILL.md
- Updated: 2026-06-26
- HTML: https://affpapa.org/en/nevibecode/skills/upgrade-react-navigation

## What it does

Reach for this skill when you move React Navigation to a new major version. The agent reads `@react-navigation/native` in `package.json` first. On 6.x it opens `references/upgrade-6-to-7.md`; on 7.x it opens `references/upgrade-7-to-8.md`. One reference file gets loaded, unless you are deliberately comparing versions.

From there it works through the renamed and dropped APIs: `navigate`, linking, themes, navigators, screen options. Peer-dependency and tooling bumps belong to the same pass. The policy is narrow — touch only the code the upgrade affects, and pick the simplest change that keeps behavior intact. The patterns inside the skill are starting points rather than a full catalogue, so an unfamiliar construct gets mapped onto the nearest example.

Verification comes after the edits. The package manager is read off `package.json` or the lockfile, then the project's type checker, linter and tests run where scripts exist. The “Automated checks” and “Manual checks” sections of the loaded reference are walked through as well, and any step that cannot run is reported with a reason. No such scripts in the repo means you verify by hand.

One brake is built in. When a navigator relies on APIs that neither the official docs nor the upgrade reference covers, the skill pauses and asks you before touching code. Same when the upgrade would need a guess about which behavior changes are acceptable.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add react-navigation/skills --skill upgrade-react-navigation -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/upgrade-react-navigation/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/upgrade-react-navigation/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add react-navigation/skills --skill upgrade-react-navigation -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/upgrade-react-navigation/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add react-navigation/skills --skill upgrade-react-navigation -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/upgrade-react-navigation/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install react-navigation/skills upgrade-react-navigation
```

2. **Manually: put the files in place**
- File: `.github/skills/upgrade-react-navigation/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add react-navigation/skills --skill upgrade-react-navigation -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/react-navigation/skills --path skills/upgrade-react-navigation
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/upgrade-react-navigation/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add react-navigation/skills --skill upgrade-react-navigation -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/react-navigation/skills/tree/HEAD/skills/upgrade-react-navigation/SKILL.md

## When to use it
- move a project from React Navigation 6.x to 7.x
- take 7.x up to 8.x without breaking screen transitions
- track down renamed and removed screen options
- bump peer dependencies and tooling for the new major
- run type checks, lint and tests after the navigation upgrade

## Example prompts
- Upgrade React Navigation to 7.x and handle the breaking changes
- Check `@react-navigation/native` in `package.json` and apply the matching upgrade reference
- Run the type checker, linter and tests after the navigation upgrade

## Similar
- [vercel-react-native-skills](https://affpapa.org/en/nevibecode/skills/vercel-react-native-skills.md) — skill · 255200 installs
- [animate-expo](https://affpapa.org/en/nevibecode/skills/animate-expo.md) — skill · 137900 installs
- [mobile-native](https://affpapa.org/en/nevibecode/skills/mobile-native.md) — skill · 86600 installs
- [aso](https://affpapa.org/en/nevibecode/skills/aso.md) — skill · 75400 installs
- [swiftui-pro](https://affpapa.org/en/nevibecode/skills/swiftui-pro.md) — skill · 35200 installs
- [orca-emulator](https://affpapa.org/en/nevibecode/skills/orca-emulator.md) — skill · 5800 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md