Communityコーディング&開発github.com

bharath2020/expo-navigation-migration

既存のExpoまたはReact Nativeリポジトリのナビゲーション実装を分析し、Expo SDK 58のナビゲーション、Expo Router(React Navigationとreact-native-screens)、@expo/ui(SwiftUI、Jetpack Compose)への段階的な移行計画を作成します。機能フラグあり・なしの両方に対応し、最終的にはクリーンな状態で終了します。また、スタック、戻るインターセプト、タブ、iPadサイドバーと折りたたみセクション、モーダル、シート、ナビゲーションバーボタン、オーバーフローメニュー、ラージタイトル、タップ・スクロール時のナビゲーションバー非表示、ボトムツールバー、Surface Duo、iPhone Duo、折りたたみデバイスなど、ナビゲーションパターンのカタログも備えています。アプリのナビゲーション評価、Expo Router / React Navigation / @expo/uiへの移行計画、既存のReact Navigationアプリのネイティブ要素化と安定したディープリンク化(Expoを採用せずプレーンなReact Navigationに留まるベアアプリを含む)、またはExpo 58上でのこれらのパターンの選択・実装を依頼された場合に使用します。

expo-navigation-migration とは?

このスキルは、Expo SDK 58をターゲットにしたナビゲーションの分析、移行計画、パターンルックアップの3つの主要ジョブを提供します。分析フェーズでは、リポジトリ内のナビゲーション関連コードを読み取り専用でスキャンし、インベントリレポートを生成します。移行計画フェーズでは、機能フラグを用いた段階的移行または一括切り替えのいずれかの戦略を立案し、各ステップの出荷可能な検証ステップを含む詳細な計画を作成します。また、Expo Router(react-native-screensベース)、プレーンなReact Navigation、@expo/ui(SwiftUI/Jetpack Compose)の3つのターゲットを区別し、それぞれに最適な移行パスを推奨します。さらに、スタック、タブ、モーダル、サイドバー、デュアルスクリーンなど、プラットフォームごとの検証済みパターンのカタログを提供し、実装時の注意点やマイグレーションノートも記載しています。このスキルはコードを変更せず、分析と計画のみを行います。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/bharath2020/expo-navigation-migration-skill/tree/HEAD/expo-navigation-migration

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Expo ナビゲーション移行 (SDK 58)

3 つのジョブがあります。リクエストに応じて選択してください。移行計画には 3 つすべてを順に実行する必要があります。

リクエスト実行内容
「このリポジトリではナビゲーションはどのように実装されていますか?」分析
「移行を計画して」「フラグ付けできますか?」「React Navigation ですか、@expo/ui ですか?」分析 → 計画
「React Navigation を使用していて、もっとネイティブな要素と、ナビゲーションとディープリンクのための安定したライブラリが必要です」分析 → 計画 (既存の React Navigation シナリオを使用)
「サイドバー / シート / Duo レイアウトを構築するには?」「X は動作しますか?」カタログで検索

全体で使用するターゲット名:

  • React Navigation は、react-native-screens 上の Expo Router を意味します。SDK 56 以降、expo-router は @react-navigation/* に依存しなくなり、基盤とする部分をフォークしています。SDK 58 では、フォークされた API のほとんどが削除されました。
  • プレーン React Navigation は、Expo Router なしの @react-navigation/* 7.x を意味します。
  • @expo/ui は、iOS では SwiftUI、Android では Jetpack Compose を意味します。

ターゲットリポジトリのみを読み取ります。このスキルは計画を立案します。ユーザーが別途要求しない限り、アプリケーションコードを変更することはありません。

Expo は SDK ごとに変更されます。ここに記載されている API の事実は、2026-11-02 に SDK 58 に対して確認されました。カタログに検証済みと表示されていない API に依存する場合は、https://docs.expo.dev/versions/v58.0.0/ を取得してください。

分析

  1. node <skill>/scripts/inventory-navigation.mjs <repo-root> を実行します。読み取りのみを行い、path:line の位置とともにシグナルを出力します。シグナルに truncated が 0 より大きく表示された場合は、--max-locations 200 を付けて再実行します。
  2. references/analysis.md に従います。templates/analysis-report.md を記入します。

レポートのすべての行に証拠付きの値が入力されるか、検索したが見つからなかったことが記載され、かつすべてのインベントリシグナルがコードを読んで確認または却下されるまで完了しません。

計画

references/migration-planning.md に従います。このドキュメントは以下を参照します:

templates/migration-plan.md を記入します。計画には常に以下が含まれます: フラグ付きの切り替え、フラグなしの切り替え、それぞれが出荷可能で単独で検証可能な順序付けられたステップ、そしてフラグと計画で置き換えたものをすべて削除するクリーンな終了。このリポジトリの理由に基づいた 1 つの推奨事項を指定します。その推奨事項は、現在のナビゲーション所有者を維持することもできます。SDK のみが移動する場合、計画ではフラグ付けすべきものはなく、その理由を説明します。

パターンを検索する

references/pattern-catalog.md は、すべてのシナリオとそのファイルをリストします。各ファイルは、iOS と Android の両方のターゲットに対する動作するプロトタイプのコード、プラットフォームごとのステータス、注意点、移行ノートを提供します。ステータスワードはそのまま引用してください: verified はシミュレーターまたはエミュレーターで実行されたことを意味し、物理ハードウェアは使用されていません。

templates/ には、再利用可能なファイル(サイドバーセクション、サイドバーの配置とナビゲーションバーの可視性のためのローカルモジュール、ナビゲーションヘルパーレイヤー、ヒンジとペイン分割コンポーネント)が含まれています。ローカルモジュールには開発ビルドが必要です。

関連スキル