mcpField
U
upgrading-react-native

upgrading-react-native

github.com/callstackincubator開発1.7k12.9k 回インストール3 週間前に更新
リポジトリ

upgrading-react-native について

React Native アプリをアップグレードする開発者向けの手順ガイドです。テンプレート差分、依存関係と React の整合、任意の Expo 手順、アップグレード後の検証を扱います。

主な機能

  1. 01アップグレード経路の選択
  2. 02Upgrade Helper のテンプレート差分
  3. 03依存関係の互換性評価
  4. 04React と Expo のアップグレード手順
  5. 05アップグレード後の検証

活用シーン

  1. 01React Native のバージョンアップ計画
  2. 02ネイティブテンプレート変更の反映
  3. 03依存関係更新リスクの評価
  4. 04アップグレード後の回帰確認

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/upgrading-react-nativeを入力して読み込まれたか確認します。

同梱ファイル

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

詳細

React Native のアップグレード

概要

Upgrade Helper によるテンプレートの差分確認、依存関係の更新、Expo SDK の手順、よくある落とし穴など、React Native のアップグレードワークフロー全体を扱います。

一般的なアップグレードの流れ

  1. ルート選択：upgrading-react-native.md を参照して、適切なアップグレード方法を選択します
  2. 差分確認：upgrade-helper-core.md を参照して、Upgrade Helper から正式なテンプレート差分を取得します
  3. 依存関係：upgrading-dependencies.md を参照して、サードパーティーパッケージを評価し、更新します
  4. React：アップグレードした場合は、react.md を参照して React のバージョンを合わせます
  5. Expo（該当する場合）：expo-sdk-upgrade.md を参照して、Expo SDK の手順を適用します
  6. 検証：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

適用するケース

以下の場合に、これらのガイドラインを参照してください。

  • React Native アプリを新しいバージョンに移行する
  • Upgrade Helper によるネイティブ設定の変更を調整する
  • 破壊的変更についてリリースノートを確認する

クイックリファレンス

ファイル説明
upgrading-react-native.mdルーター：適切なアップグレード方法を選択します
upgrade-helper-core.mdUpgrade Helper の基本ワークフローと信頼性の確認基準
upgrading-dependencies.md依存関係の互換性確認と移行計画
react.mdReact および React 19 のアップグレード時にバージョンを合わせるルール
expo-sdk-upgrade.mdExpo SDK 固有のアップグレード手順（条件付き）
upgrade-verification.mdエージェントによるデバイス支援チェックを含む、アップグレード後の検証チェックリスト
monorepo-singlerepo-targeting.mdモノレポおよび単一リポジトリでのアプリの対象指定とコマンドのスコープ設定

問題 → スキルの対応

問題最初に確認する項目
React Native をアップグレードする必要があるupgrade-helper-core.md
依存関係のリスク評価と移行方法を確認する必要があるupgrading-dependencies.md
React／React 19 のパッケージのバージョンを合わせる必要があるreact.md
まずワークフローのルートを確認する必要があるupgrading-react-native.md
Expo SDK 固有の手順を確認する必要があるexpo-sdk-upgrade.md
手動またはエージェント支援によるリグレッション検証が必要であるupgrade-verification.md
リポジトリ／アプリのコマンド範囲を設定する必要があるmonorepo-singlerepo-targeting.md

コメント

Markdown 対応