upgrade-react-native

This skill automates version upgrades for React Native projects by fetching and applying diffs, managing dependencies, and resolving conflicts. It is useful for developers maintaining React Native applications.

000Updated 1mo ago

Development

Quick InstallView Source

$ npx skills add https://github.com/react-native-community/skills --skill upgrade-react-native

Overview

About This Skill

This skill automates the process of upgrading React Native projects to newer versions by fetching unified diffs from the React Native Upgrade Helper and intelligently applying changes across native (iOS/Android) and JavaScript files. It detects your current version, validates the target version, parses the diff while mapping template paths to your actual project structure, and categorizes changes as direct applies, conflicts, or new files. The skill guides you through a step-by-step upgrade procedure, identifies third-party native library compatibility requirements, and presents a post-upgrade checklist. It's designed for developers and teams managing React Native Community CLI projects who need reliable, conflict-aware version upgrades.

How to Use

Run the command `/upgrade-react-native <targetVersion>` in your terminal.

Use Cases

Upgrade a React Native project to a target version

Fetch and apply diffs from the React Native Upgrade Helper

Resolve conflicts in native project customizations

Setup & Installation

Quick Install

Terminal

$ npx skills add https://github.com/react-native-community/skills --skill upgrade-react-native

Alternative Install (Git Clone)

git clone https://github.com/react-native-community/skills

Requirements

Claude Code or compatible AI agent

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Act as an expert React Native developer and help me upgrade my [PROJECT_NAME] app from React Native [CURRENT_VERSION] to [TARGET_VERSION]. Analyze the [CHANGELOG_URL] and [UPGRADE_GUIDE_URL] for this version, then provide a step-by-step plan to safely upgrade the app. Identify potential breaking changes, dependency conflicts, and migration steps. Finally, generate the exact commands I need to run and any code modifications required. Current dependencies: [DEPENDENCIES_LIST].

Example Output

# React Native Upgrade Plan for MediTrack v2.3.1 → v3.1.0

## 📋 Summary
- **Target Version**: React Native 0.73.1
- **Breaking Changes**: 3 major, 5 minor
- **Estimated Time**: 45-60 minutes
- **Risk Level**: Medium (due to Hermes engine changes)

---

## 🔍 Pre-Upgrade Analysis

### Dependencies Status
| Package | Current | Target | Action |
|---------|---------|--------|--------|
| react-native | 0.72.6 | 0.73.1 | ✅ Upgrade |
| react-native-reanimated | 2.14.4 | 3.5.4 | ⚠️ Major upgrade |
| react-native-gesture-handler | 2.12.0 | 2.14.0 | ✅ Patch update |
| @react-navigation/native | 6.1.6 | 7.0.0 | ⚠️ Breaking changes |

### Critical Breaking Changes
1. **Hermes Engine**: Now required for iOS. Android already uses it.
2. **New Architecture**: Optional but recommended for new apps.
3. **Navigation v7**: Incompatible with old navigation patterns.

---

## 🚀 Step-by-Step Upgrade Process

### 1. Backup & Prepare
```bash
# Create a backup branch
git checkout -b upgrade/rn-0.73.1

# Commit current state
git add .
git commit -m "Pre-upgrade state"
```

### 2. Upgrade React Native Core
```bash
# Follow official guide: https://reactnative.dev/docs/upgrading
npx react-native upgrade --legacy true
```

### 3. Resolve Hermes Engine (iOS)
```bash
# Edit ios/Podfile
platform :ios, '13.0'
use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true)

# Then run
cd ios && pod install && cd ..
```

### 4. Update Navigation Stack
```bash
# Install new version
yarn add @react-navigation/native@^7.0.0

# Update imports in App.tsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
```

### 5. Test & Validate
```bash
# Run on both platforms
npx react-native run-android
npx react-native run-ios

# Check for common issues
- [ ] Hermes memory usage
- [ ] Navigation stack behavior
- [ ] Reanimated animations
```

---

## ⚠️ Known Issues & Fixes

### Issue: Reanimated 3 breaks on Android
**Fix**: Add this to `android/app/build.gradle`
```gradle
project.ext.react = [
  enableHermes: true,
  hermesCommand: "node_modules/hermes-engine/android/hermesc",
  hermesFlags: ["--strip-flow", "--enable-source-maps"]
]
```

### Issue: Navigation v7 requires type updates
**Fix**: Update all `Stack.Screen` components with proper typing:
```typescript
<Stack.Screen<RootStackParamList> name="Home" component={HomeScreen} />
```

---

## ✅ Post-Upgrade Checklist
- [ ] All screens render correctly
- [ ] Navigation works on both platforms
- [ ] Animations play smoothly
- [ ] Hermes engine enabled for both platforms
- [ ] Lint passes with no errors

**Next Steps**: Consider enabling the New Architecture in your next sprint for better performance.

Apply to these tools

Browse all tools

Native

Automate your social media content creation and management.

ICRON AI-Native Decision Execution Hub

End-to-End Supply Chain Planning Software for Complex, Regulated Industries

Compatible MCP servers

Browse all MCP servers

Find the right skills for your stack

Take a free 3-minute scan and get personalized AI skill recommendations.

Take free scan

Overview

About This Skill

How to Use

Run the command `/upgrade-react-native <targetVersion>` in your terminal.

Use Cases

Upgrade a React Native project to a target version

Fetch and apply diffs from the React Native Upgrade Helper

Resolve conflicts in native project customizations

Quick Install

Terminal

$ npx skills add https://github.com/react-native-community/skills --skill upgrade-react-native

Alternative Install (Git Clone)

git clone https://github.com/react-native-community/skills

Requirements

Claude Code or compatible AI agent

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Act as an expert React Native developer and help me upgrade my [PROJECT_NAME] app from React Native [CURRENT_VERSION] to [TARGET_VERSION]. Analyze the [CHANGELOG_URL] and [UPGRADE_GUIDE_URL] for this version, then provide a step-by-step plan to safely upgrade the app. Identify potential breaking changes, dependency conflicts, and migration steps. Finally, generate the exact commands I need to run and any code modifications required. Current dependencies: [DEPENDENCIES_LIST].

Example Output

# React Native Upgrade Plan for MediTrack v2.3.1 → v3.1.0

## 📋 Summary
- **Target Version**: React Native 0.73.1
- **Breaking Changes**: 3 major, 5 minor
- **Estimated Time**: 45-60 minutes
- **Risk Level**: Medium (due to Hermes engine changes)

---

## 🔍 Pre-Upgrade Analysis

### Dependencies Status
| Package | Current | Target | Action |
|---------|---------|--------|--------|
| react-native | 0.72.6 | 0.73.1 | ✅ Upgrade |
| react-native-reanimated | 2.14.4 | 3.5.4 | ⚠️ Major upgrade |
| react-native-gesture-handler | 2.12.0 | 2.14.0 | ✅ Patch update |
| @react-navigation/native | 6.1.6 | 7.0.0 | ⚠️ Breaking changes |

### Critical Breaking Changes
1. **Hermes Engine**: Now required for iOS. Android already uses it.
2. **New Architecture**: Optional but recommended for new apps.
3. **Navigation v7**: Incompatible with old navigation patterns.

---

## 🚀 Step-by-Step Upgrade Process

### 1. Backup & Prepare
```bash
# Create a backup branch
git checkout -b upgrade/rn-0.73.1

# Commit current state
git add .
git commit -m "Pre-upgrade state"
```

### 2. Upgrade React Native Core
```bash
# Follow official guide: https://reactnative.dev/docs/upgrading
npx react-native upgrade --legacy true
```

### 3. Resolve Hermes Engine (iOS)
```bash
# Edit ios/Podfile
platform :ios, '13.0'
use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true)

# Then run
cd ios && pod install && cd ..
```

### 4. Update Navigation Stack
```bash
# Install new version
yarn add @react-navigation/native@^7.0.0

# Update imports in App.tsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
```

### 5. Test & Validate
```bash
# Run on both platforms
npx react-native run-android
npx react-native run-ios

# Check for common issues
- [ ] Hermes memory usage
- [ ] Navigation stack behavior
- [ ] Reanimated animations
```

---

## ⚠️ Known Issues & Fixes

### Issue: Reanimated 3 breaks on Android
**Fix**: Add this to `android/app/build.gradle`
```gradle
project.ext.react = [
  enableHermes: true,
  hermesCommand: "node_modules/hermes-engine/android/hermesc",
  hermesFlags: ["--strip-flow", "--enable-source-maps"]
]
```

### Issue: Navigation v7 requires type updates
**Fix**: Update all `Stack.Screen` components with proper typing:
```typescript
<Stack.Screen<RootStackParamList> name="Home" component={HomeScreen} />
```

---

## ✅ Post-Upgrade Checklist
- [ ] All screens render correctly
- [ ] Navigation works on both platforms
- [ ] Animations play smoothly
- [ ] Hermes engine enabled for both platforms
- [ ] Lint passes with no errors

**Next Steps**: Consider enabling the New Architecture in your next sprint for better performance.

upgrade-react-native

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Apply to these tools

Native

ICRON AI-Native Decision Execution Hub

Compatible MCP servers

Native MCP Client Server

MCP Apple Notes

Claude Notification Server

Token Minter MCP

Find the right skills for your stack

upgrade-react-native

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Apply to these tools

Native

ICRON AI-Native Decision Execution Hub

Compatible MCP servers

Native MCP Client Server

MCP Apple Notes

Claude Notification Server

Token Minter MCP

Find the right skills for your stack