AutoGineer
Generated banner for Upgrading React Native
Generated logo for Upgrading React Native

Upgrading React Native

CallstackOfficialPublished by Callstack

  • Skill
  • Workflow
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

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.
— the description by Callstack

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

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/callstackincubator/upgrading-react-native/download

  2. Unzip 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

  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

Files

references/upgrade-verification.md

title: Upgrade Verification impact: HIGH tags: verification, regression, android, ios, navigation

Skill: Upgrade Verification

Manual and agent-assisted validation checklist after React Native and/or Expo upgrades.

Scope

  • Focus on behavior and UX regressions that static diffs cannot prove.

  • Keep checks small, repeatable, and tied to critical user flows.

Agent-Assisted Checks

Use agent-device for runnable app verification. If it is missing and device verification is needed, install it through the environment's approved/trusted path or ask the user to install or enable it.

  1. If the agent environment exposes an agent-device skill, read it before planning exact commands.

  2. If the agent-device CLI is available, follow its agent-device help workflow guidance.

  3. Open or install the upgraded app, drive each critical scenario, and verify with UI snapshots.

  4. Capture screenshots, logs, and pass/fail evidence for changed flows.

  5. Fall back to human validation for credentials, physical-device-only hardware, or profiler surfaces the agent cannot inspect.

Behavior Checks (Required)

  1. App launch and core journeys work on both iOS and Android.

  2. Navigation behavior is correct (forward/back stack, params, deep links, modal flows).

  3. Android edge-to-edge is visually correct (status bar, nav bar, safe area insets, keyboard overlays).

  4. Permissions and device APIs work (camera, location, notifications, file/media access).

  5. Background/restore paths work (app resume, push open, interrupted flows).

Build and Test Gates

  1. Run unit/integration tests and fix all upgrade-related failures.

  2. If target_version >= 0.81 and tests fail due to missing modules, add proper mocks.

  3. Build installable artifacts for both platforms.

  4. For Expo apps, run npx expo-doctor from expo-sdk-upgrade.md.

Evidence to Capture

  • Screen recordings/screenshots for changed flows.

  • List of verified scenarios and pass/fail status.

  • Follow-up fixes for any observed regressions.

Related Skills

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 or Callstack.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download upgrading-react-native.zip