upgrading-react-native
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.
Best use case
upgrading-react-native is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using upgrading-react-native should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/upgrading-react-native/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How upgrading-react-native Compares
| Feature / Agent | upgrading-react-native | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
# 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] | Manual post-upgrade verification checklist | | [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 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
Related Skills
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
upgrading-expo
Guidelines for upgrading Expo SDK versions and fixing dependency issues
react-state-management
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
react-native-best-practices
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
react-doctor
Run after making React changes to catch issues early. Use when reviewing code, finishing a feature, or fixing bugs in a React project.
native-app-performance
Native macOS/iOS app performance profiling via xctrace/Time Profiler and CLI-only analysis of Instruments traces. Use when asked to profile, attach, record, or analyze Instruments .trace files, find hotspots, or optimize native app performance without opening Instruments UI.
native-data-fetching
Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (useLoaderData).
building-native-ui
Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
competitor-alternatives
When the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'comparison page,' '[Product] vs [Product],' '[Product] alternative,' 'competitive landing pages,' 'switch from competitor,' or 'comparison content.' Covers four formats: singular alternative, plural alternatives, you vs competitor, and competitor vs competitor. Emphasizes deep research, modular content architecture, and varied section types beyond feature tables.
youtube-watcher
Fetch and read transcripts from YouTube videos. Use when you need to summarize a video, answer questions about its content, or extract information from it.
youtube-transcript
Fetch and summarize YouTube video transcripts. Use when asked to summarize, transcribe, or extract content from YouTube videos. Handles transcript fetching via residential IP proxy to bypass YouTube's cloud IP blocks.
youtube-auto-captions - YouTube 自动字幕
## 描述