Skip to main content
affpapa.org
RU EN
skill CX Codex

upgrading-react-native — Claude Code skill: React Native upgrade

Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, migrating iOS and Android native config, and resolving CocoaPods and Gradle conflicts.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add callstackincubator/agent-skills --skill upgrading-react-native -a claude-code
Open on GitHub

What upgrading-react-native does

The skill guides an app through the full React Native upgrade cycle. It fetches the canonical template diff from Upgrade Helper, updates dependencies in package.json, aligns the React version, and migrates native iOS and Android configuration. Inside are six linked files: an upgrade path router, the Upgrade Helper workflow, dependency compatibility checks, React 19 alignment rules, an Expo SDK layer (if the project uses Expo), and a post-upgrade verification checklist.

It runs CLI commands: detects the current React Native version via npm pkg get, downloads the diff from GitHub, checks changed files with grep, runs pod install and xcodebuild for iOS, npx react-native build-android for Android. Without access to Upgrade Helper and the rn-diff-purge repository, it won't run. Expo projects need a separate SDK migration step.

The skill acts as a problem router: need dependency triage — it fires upgrading-dependencies.md, need regression validation — upgrade-verification.md, need command scoping for a monorepo — monorepo-singlerepo-targeting.md.

What it helps with

  • upgrade React Native from 0.76 to 0.78
  • apply an rn-diff-purge diff to a project
  • migrate native iOS and Android config after an RN upgrade
  • resolve CocoaPods and Gradle conflicts after an upgrade
  • align React version during an RN upgrade

Example prompts for the agent

  • Upgrade React Native from the current version to the latest stable
  • Apply the Upgrade Helper diff for upgrading from 0.76.9 to 0.78.2
  • Check dependency compatibility after upgrading React Native

How to install upgrading-react-native

1Skills CLI (Vercel)

npx skills add callstackincubator/agent-skills --skill upgrading-react-native -a claude-code

2Manually: put the files in place

~/.claude/skills/upgrading-react-native/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/upgrading-react-native/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about upgrading-react-native

How to install upgrading-react-native in Claude Code?

Run npx skills add callstackincubator/agent-skills --skill upgrading-react-native -a claude-code, and the skill will land in ~/.claude/skills/upgrading-react-native/SKILL.md.

What does upgrading-react-native do?

It guides a React Native app through the full upgrade cycle: applies template diffs from rn-diff-purge, updates dependencies, migrates native iOS and Android config, resolves CocoaPods and Gradle conflicts, aligns the React version, and verifies the result.

What does upgrading-react-native require to work?

Access to Upgrade Helper and the rn-diff-purge repository on GitHub. For iOS projects — CocoaPods, for Android — Gradle. Expo projects need an additional SDK migration step.

Source text

SKILL.md · MIT 
---
name: upgrading-react-native
description: Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and Gradle changes, and handling breaking API updates. Use when upgrading React Native, bumping RN version, updating from RN 0.x to 0.y, or migrating Expo SDK alongside a React Native upgrade.
license: MIT
---

# Upgrading React Native

## Overview

Covers the full React Native upgrade workflow: template diffs via Upgrade Helper, dependency updates, Expo SDK steps, and common pitfalls.

## Typical Upgrade Sequence

1. **Route**: Choose the right upgrade path via [upgrading-react-native.md][upgrading-react-native]
2. **Diff**: Fetch the canonical template diff using Upgrade Helper via [upgrade-helper-core.md][upgrade-helper-core]
3. **Dependencies**: Assess and update third-party packages via [upgrading-dependencies.md][upgrading-dependencies]
4. **React**: Align React version if upgraded via [react.md][react]
5. **Expo** (if applicable): Apply Expo SDK layer via [expo-sdk-upgrade.md][expo-sdk-upgrade]
6. **Verify**: Run post-upgrade checks via [upgrade-verification.md][upgrade-verification]

```bash
# Quick start: detect current version and fetch diff
npm pkg get dependencies.react-native --prefix "$APP_DIR"
npm view react-native dist-tags.latest

# Example: upgrading from 0.76.9 to 0.78.2
# 1. Fetch the template diff
curl -L -f -o /tmp/rn-diff.diff \
  "https://raw.githubusercontent.com/react-native-community/rn-diff-purge/diffs/diffs/0.76.9..0.78.2.diff" \
  && echo "Diff downloaded OK" || echo "ERROR: diff not found, check versions"
# 2. Review changed files
grep -n "^diff --git" /tmp/rn-diff.diff
# 3. Update package.json, apply native changes, then install + rebuild
npm install --prefix "$APP_DIR"
cd "$APP_DIR/ios" && pod install
# 4. Validate: both platforms must build successfully
npx react-native build-android --mode debug --no-packager
xcodebuild -workspace "$APP_DIR/ios/App.xcworkspace" -scheme App -sdk iphonesimulator build
```

## When to Apply

Reference these guidelines when:
- Moving a React Native app to a newer version
- Reconciling native config changes from Upgrade Helper
- Validating release notes for breaking changes

## Quick Reference

| File | Description |
|------|-------------|
| [upgrading-react-native.md][upgrading-react-native] | Router: choose the right upgrade path |
| [upgrade-helper-core.md][upgrade-helper-core] | Core Upgrade Helper workflow and reliability gates |
| [upgrading-dependencies.md][upgrading-dependencies] | Dependency compatibility checks and migration planning |
| [react.md][react] | React and React 19 upgrade alignment rules |
| [expo-sdk-upgrade.md][expo-sdk-upgrade] | Expo SDK-specific upgrade layer (conditional) |
| [upgrade-verification.md][upgrade-verification] | Post-upgrade verification checklist, including agent-device-assisted checks |
| [monorepo-singlerepo-targeting.md][monorepo-singlerepo-targeting] | Monorepo and single-repo app targeting and command scoping |

## Problem → Skill Mapping

| Problem | Start With |
|---------|------------|
| Need to upgrade React Native | [upgrade-helper-core.md][upgrade-helper-core] |
| Need dependency risk triage and migration options | [upgrading-dependencies.md][upgrading-dependencies] |
| Need React/React 19 package alignment | [react.md][react] |
| Need workflow routing first | [upgrading-react-native.md][upgrading-react-native] |
| Need Expo SDK-specific steps | [expo-sdk-upgrade.md][expo-sdk-upgrade] |
| Need manual or agent-assisted regression validation | [upgrade-verification.md][upgrade-verification] |
| Need repo/app command scoping | [monorepo-singlerepo-targeting.md][monorepo-singlerepo-targeting] |

[upgrading-react-native]: references/upgrading-react-native.md
[upgrade-helper-core]: references/upgrade-helper-core.md
[upgrading-dependencies]: references/upgrading-dependencies.md
[react]: references/react.md
[expo-sdk-upgrade]: references/expo-sdk-upgrade.md
[upgrade-verification]: references/upgrade-verification.md
[monorepo-singlerepo-targeting]: references/monorepo-singlerepo-targeting.md

© callstackincubator · MIT · callstackincubator/agent-skills

Similar skills

Everything for Mobile →
vercel-react-native-skills vercel A rules pack for React Native and Expo work: lists, animations, navigation, native modules. Load it so your agent makes mobile changes the same way every time. CX Codex +1 255,200installs animate-expo emilkowalski Builds React Native and Expo animations using Reanimated and Gesture Handler. Helps keep motion on the UI thread and avoid dropped frames on physical devices. CX Codex +1 137,900installs mobile-native emilkowalski Strips the tells that give a web app away on a phone: sticky hover, tap highlight flash, the 100vh bug. CX Codex +1 86,600installs aso coreyhaines31 Audits App Store and Google Play listings against store optimization standards. Helps uncover gaps in metadata, visual assets, and conversion. CX Codex +1 75,400installs swiftui-pro Paul Hudson Reviews SwiftUI code for deprecated APIs, data-flow issues, accessibility gaps, and performance concerns. Use it during feature work or code review. CX Codex +1 35,200installs orca-emulator stablyai Controls booted iOS Simulators inside Orca with a live device view. Handy for running gestures, hardware buttons, accessibility tree checks, and UI verification. CX Codex +1 5,800installs

From the same set9

react-native-best-practices Provides React Native performance guidelines based on Callstack practices. It helps agents diagnose FPS drops, memory leaks, and large bundles. CX Codex +1 30,200installs github-actions Reusable GitHub Actions patterns to build React Native apps for iOS simulators and Android emulators in the cloud and download artifacts. Simplifies CI pipeline setup and scripted retrieval via gh CLI or REST API. CX Codex +1 10,900installs validate-skills Checks skills in skills/ against the agentskills.io specification and Claude Code practices. Use it when authoring or reviewing a skill collection. CX Codex +1 7,300installs react-native-brownfield-migration Guides incremental React Native or Expo adoption in native iOS and Android apps using @callstack/react-native-brownfield. CX Codex +1 5,200installs react-navigation Reference files for React Navigation 7 UI patterns: stacks, tabs, sheets, drawers, headers, safe areas. Useful when screens and modals have to sit inside a navigator. CX Codex +1 4,800installs create-react-native-library Scaffolds a React Native library or a local native module inside an app, then points the agent at the right implementation doc. CX Codex +1 4,400installs react-native-tv-best-practices Reviews React Native TV apps for focus and D-pad navigation, 10-foot layout, DRM playback, and memory use on weak TV hardware. CX Codex +1 2,300installs assess-react-native-migration Audits product repositories and decides whether a mobile app should move to React Native, before anyone writes migration code. CX Codex +1 2,100installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor