mcpField
U
upgrading-react-native

upgrading-react-native

github.com/callstackincubatorDevelopment1.7k12.9k installsUpdated 3w ago
Repository

About upgrading-react-native

A workflow guide for developers upgrading React Native apps. It covers template diffs, dependency and React alignment, optional Expo steps, and post-upgrade verification.

Key features

  1. 01Upgrade path selection
  2. 02Upgrade Helper template diffs
  3. 03Dependency compatibility assessment
  4. 04React and Expo upgrade steps
  5. 05Post-upgrade verification

Use cases

  1. 01Planning a React Native version upgrade
  2. 02Reconciling native template changes
  3. 03Assessing dependency upgrade risks
  4. 04Checking an upgraded app for regressions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/callstackincubator/agent-skills --skill upgrading-react-native

After installing, type/upgrading-react-nativein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
expo-sdk-upgrade.md
monorepo-singlerepo-targeting.md
react.md
upgrade-helper-core.md
upgrade-verification.md
upgrading-dependencies.md
upgrading-react-native.md

Details

From the project README

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
  2. Diff: Fetch the canonical template diff using Upgrade Helper via upgrade-helper-core.md
  3. Dependencies: Assess and update third-party packages via upgrading-dependencies.md
  4. React: Align React version if upgraded via react.md
  5. Expo (if applicable): Apply Expo SDK layer via expo-sdk-upgrade.md
  6. Verify: Run post-upgrade checks via upgrade-verification.md
# 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

FileDescription
upgrading-react-native.mdRouter: choose the right upgrade path
upgrade-helper-core.mdCore Upgrade Helper workflow and reliability gates
upgrading-dependencies.mdDependency compatibility checks and migration planning
react.mdReact and React 19 upgrade alignment rules
expo-sdk-upgrade.mdExpo SDK-specific upgrade layer (conditional)
upgrade-verification.mdPost-upgrade verification checklist, including agent-device-assisted checks
monorepo-singlerepo-targeting.mdMonorepo and single-repo app targeting and command scoping

Problem → Skill Mapping

ProblemStart With
Need to upgrade React Nativeupgrade-helper-core.md
Need dependency risk triage and migration optionsupgrading-dependencies.md
Need React/React 19 package alignmentreact.md
Need workflow routing firstupgrading-react-native.md
Need Expo SDK-specific stepsexpo-sdk-upgrade.md
Need manual or agent-assisted regression validationupgrade-verification.md
Need repo/app command scopingmonorepo-singlerepo-targeting.md

Comments

Markdown supported