Upgrading React Native
CallstackOfficialPublished by Callstack
- Skill
- Workflow
- Software development
- MIT
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides a structured, multi-step procedure for upgrading React Native applications to newer versions. It covers the entire lifecycle of an upgrade, from selecting the correct path and fetching template diffs to managing dependency compatibility, aligning React versions, and performing post-upgrade verification. It includes specific guidance for handling native iOS and Android configuration changes, resolving CocoaPods and Gradle issues, and integrating Expo SDK upgrades where applicable.
What it does
- Guides users through the complete React Native upgrade sequence.
- Facilitates fetching and applying canonical template diffs.
- Assists in assessing and updating third-party dependencies.
- Provides instructions for Expo SDK-specific upgrade layers.
- Includes steps for post-upgrade verification and build validation.
- Defines scoping rules for monorepo and single-repo project structures.
When to use it
- When moving a React Native application to a newer version.
- When reconciling native configuration changes after a version bump.
- When migrating an Expo SDK version alongside a React Native upgrade.
- When validating release notes for breaking changes.
- When managing dependency compatibility during an upgrade.
Advantages
- Provides a standardized, repeatable process for complex upgrades.
- Reduces manual error by offering clear routing and verification steps.
- Supports both standard React Native and Expo-managed workflows.
- Ensures native platform configurations are correctly reconciled.
- Includes specific guidance for monorepo environments.
Usage examples
- “How do I start upgrading my React Native app from version 0.76.9 to 0.78.2?”
- The agent will guide you to fetch the template diff using the Upgrade Helper, update your package.json, reconcile native changes, and run build verification.
- “I need to upgrade my Expo-based React Native app, what should I do?”
- The agent will provide the Expo SDK upgrade layer workflow, including running expo-doctor and aligning expo-modules.
Install
Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/callstackincubator/upgrading-react-native/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip upgrading-react-native.zip -d .agents/skills
Documentation by Callstack
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
Route: Choose the right upgrade path via upgrading-react-native.md
Diff: Fetch the canonical template diff using Upgrade Helper via upgrade-helper-core.md
Dependencies: Assess and update third-party packages via upgrading-dependencies.md
React: Align React version if upgraded via react.md
Expo (if applicable): Apply Expo SDK layer via expo-sdk-upgrade.md
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 buildWhen 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 | Router: choose the right upgrade path |
| upgrade-helper-core.md | Core Upgrade Helper workflow and reliability gates |
| upgrading-dependencies.md | Dependency compatibility checks and migration planning |
| react.md | React and React 19 upgrade alignment rules |
| expo-sdk-upgrade.md | Expo SDK-specific upgrade layer (conditional) |
| upgrade-verification.md | Post-upgrade verification checklist, including agent-device-assisted checks |
| monorepo-singlerepo-targeting.md | Monorepo and single-repo app targeting and command scoping |
Problem → Skill Mapping
| Problem | Start With |
|---|---|
| Need to upgrade React Native | upgrade-helper-core.md |
| Need dependency risk triage and migration options | upgrading-dependencies.md |
| Need React/React 19 package alignment | react.md |
| Need workflow routing first | upgrading-react-native.md |
| Need Expo SDK-specific steps | expo-sdk-upgrade.md |
| Need manual or agent-assisted regression validation | upgrade-verification.md |
| Need repo/app command scoping | monorepo-singlerepo-targeting.md |
Files
- ATTRIBUTION.mdAdded by AutoGineer863 B
- LICENSELicence file added by AutoGineer1.1 KiB
- SKILL.md4.1 KiB
- agents/openai.yaml248 B
- references/expo-sdk-upgrade.md2.5 KiB
- references/monorepo-singlerepo-targeting.md1.0 KiB
- references/react.md1.5 KiB
- references/upgrade-helper-core.md6.5 KiB
- references/upgrade-verification.md2.4 KiB
- references/upgrading-dependencies.md2.2 KiB
- references/upgrading-react-native.md2.7 KiB
references/upgrade-helper-core.md
title: Upgrade Helper Core Workflow impact: HIGH tags: react-native, upgrade-helper, rn-diff-purge, ios, android
Skill: Upgrade Helper Core Workflow
Reliable, framework-agnostic workflow for React Native upgrades using Upgrade Helper and rn-diff-purge.
Run shared environment checks first in upgrading-react-native.md under Prerequisites (All Upgrade Paths).
Quick Commands
npm pkg get dependencies.react-native devDependencies.react-native --prefix "$APP_DIR"
npm view react-native dist-tags.latest
curl -L "https://raw.githubusercontent.com/react-native-community/rn-diff-purge/master/RELEASES"
curl -L -o /tmp/rn-diff-<current_version>..<target_version>.diff "https://raw.githubusercontent.com/react-native-community/rn-diff-purge/diffs/diffs/<current_version>..<target_version>.diff"
grep -n "^diff --git" /tmp/rn-diff-<current_version>..<target_version>.diffUpgrade Helper API (Inline Reference)
List supported versions:
https://raw.githubusercontent.com/react-native-community/rn-diff-purge/master/RELEASES
Fetch raw unified diff:
https://raw.githubusercontent.com/react-native-community/rn-diff-purge/diffs/diffs/<current_version>..<target_version>.diff
GitHub compare view:
https://github.com/react-native-community/rn-diff-purge/compare/release/<current_version>..release/<target_version>
Upgrade Helper UI:
https://react-native-community.github.io/upgrade-helper/?from=<current_version>&to=<target_version>
Path mapping note:
Diff paths are prefixed with
RnDiffApp/; remap to your app paths and package names.
Inputs
APP_DIR: app package path (.for single-package repos)current_version: current React Native versiontarget_version: target React Native version (latest by default)
Reliable Workflow
Detect app and versions.
Read
react-nativefromAPP_DIR/package.json.Resolve target via
npm view react-native dist-tags.latestunless user provides one.
Validate
target_versionexists.Check
RELEASESfrom rn-diff-purge and confirmtarget_versionis listed.If missing, stop and ask user to choose one of available versions.
Collect canonical sources.
Upgrade Helper URL.
rn-diff-purge raw diff.
Fetch diff with fallback.
Try exact raw diff:
<current_version>..<target_version>.If 404, try nearest available patch versions and report what was attempted.
If no available pair works, stop and ask user for target adjustment.
Build dependency baseline from rn-diff-purge first.
Start with the
RnDiffApp/package.jsondiff for the exact version pair.Do not manually install RN packages one-by-one before this baseline is captured.
Publish a short execution plan before edits.
Include ordered phases: dependency baseline, one-pass install, native/tooling merges, verification.
If dependency migrations are ambiguous, ask for user confirmation before modifying package choices.
Run dependency risk planning.
Fold approved migrations into the same dependency update pass.
Apply dependency updates in one pass.
Update
APP_DIR/package.json(and lockfile) from the baseline plus approved migrations.Run exactly one install command with the repo's package manager (
npm install,yarn install,pnpm install, orbun install).Avoid piecemeal installs such as repeated
npm install <pkg>unless explicitly requested.
Build a change checklist from diff.
Group by JS/TS, iOS, Android, tooling.
Skip template-only UI (
App.tsx) unless explicitly requested.Skip template-only dependencies (
@react-native/new-app-screen) unless they exist in the app.
Apply diff safely.
Treat
RnDiffAppas placeholder; remap app/package names.Merge, do not overwrite project-specific customizations.
Sync native deps.
Run iOS pods in
APP_DIR/ios.
Validate and gate completion.
iOS build passes.
Android build passes.
tests/typecheck/lint pass or failures are documented with next actions.
If
reactwas upgraded, run react.md.If
target_version >= 0.81and tests fail due to missing modules, add proper mocks.Example (
BackHandlermock removal): https://github.com/facebook/react-native/issues/52667#issuecomment-3094788618
Run upgrade-verification.md before closing the upgrade.
Stop Conditions
Missing
react-nativedependency in target package.Diff source unavailable and no fallback available.
Unresolved native merge conflicts in iOS/Android entry files.
Reliability Rules
Keep operations version-pair scoped (
current_version -> target_version).Prefer official sources over ad-hoc guides.
Record every manual deviation from Upgrade Helper.
Do not run Expo-specific commands here.
Common Pitfalls
Upgrading an Expo project with only RN CLI steps: apply the Expo layer (expo-sdk-upgrade.md).
Skipping the Upgrade Helper: leads to missed native config changes.
Treating
RnDiffApppaths as literal project paths.Copying the entire template wholesale: use the diff as a guide and merge only needed changes.
Using the wrong changelog:
0.7xchanges live inCHANGELOG-0.7x.md.Running the wrong package manager: always match the repo lockfile.
Forgetting CocoaPods: iOS builds will fail without
pod install.Not updating Android Gradle wrapper binary: update
android/gradle/wrapper/gradle-wrapper.jarfor the target RN version. Source template:https://raw.githubusercontent.com/react-native-community/rn-diff-purge/release/<target_version>/RnDiffApp/android/gradle/wrapper/gradle-wrapper.jar
Flipper artifacts lingering after removal in v0.74: remove
ReactNativeFlipper.ktandFLIPPER_VERSIONwhen the target RN version drops Flipper.Skipping platform rebuilds after Pod/Gradle changes.
Related Skills
upgrading-react-native.md - Routing and mode selection
upgrading-dependencies.md - Dependency compatibility and migration plan
expo-sdk-upgrade.md - Expo-only layer on top of core workflow
react.md - React and React 19 alignment
upgrade-verification.md - Post-upgrade validation, including agent-device-assisted checks
monorepo-singlerepo-targeting.md - Repo/app selection and command scoping
Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Needs: Needs Node.js
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Published by
- Callstack
- Publisher
- Callstack (Official)
- Source
- callstackincubator/agent-skills · skills/upgrading-react-native · commit 59e9d17
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Callstack.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download upgrading-react-native.zip