Expo Router v56：React Navigation との分離

Expo Router v56 は、このライブラリのリリース以来、最大の変革です。私たちは Expo Router が依存している React Navigation のコードの一部を fork し、ストリーミング SSR を導入しました。さらに、新しい toolbar API と拡張された Native Tabs によって、Android の機能を iOS に近づけています。

fork は今回の最も中心的な変更であり、すべての Expo Router アプリに影響するため、まず説明する価値があります。その後、新しい SSR API、Android toolbar、そして Native Tabs の新機能について紹介します。

なぜ React Navigation を fork することにしたのか

Expo と React Navigation の付き合いは長く続いています。Brent Vatne は Expo で最も在籍期間の長い社員であり、エンジニアリング担当副社長でもあります。彼は 1.0 と 2.0 のリリースを経てプロジェクトを導き、@ericvicenti や @satya164 と協力してきました。React Navigation はもともと、React Native の古い NavigationExperimental API と Expo 独自の ex-navigation に影響を受けた初期のアイデアにすぎませんでしたが、Expo が支援したことで React Native エコシステムの標準ナビゲーションライブラリへと成長しました。現在も、Expo Router と並ぶエコシステムの中核的なナビゲーション手段のひとつです。

React Navigation は現在 Satya が単独で担当しており、私たちのナビゲーション分野における重点はますます Expo Router に集まっています。Expo Router が成長するにつれ、Expo Router が依存する React Navigation の内部実装をより深く制御する必要が出てきました。私たちは Satya と話し合い、両プロジェクトにとって最善の道は、Expo Router が最も直接的に依存している React Navigation のコード部分を Expo Router が fork することだという結論に達しました。

これは React Navigation というプロジェクトから離れるという意味ではなく、両プロジェクトがそれぞれのユーザーにとって最善の方向へ自由に進化できるようにするためのものです。

Expo Router にとって、fork によってファイルベースルーティング、Web、サーバーサイドレンダリング、その他の Expo Router のユースケースに特化した変更を加える余地が生まれます。私たちが実現したい改善の中には、React Navigation のユーザーに直接当てはまらないものもあります。そうした変更をアップストリームに持ち込めば、全員にとって複雑さが増すだけです。

また、Expo Router が内部で直接使うための、よりスリムな React Navigation の内部実装を作ることも可能になります。この層を掌握すれば、統合を簡素化し、回り道のコードを減らし、Expo Router を長期的に保守しやすくできます。

もうひとつの現実的な理由は依存バージョンの管理です。過去のバージョンでは、プロジェクト内に複数バージョンの React Navigation が同時にインストールされ、さまざまな問題を引き起こすことがありました。依存している内部モジュールを fork すれば、互換性をより適切に制御でき、Expo Router のリリースもより予測可能になります。

最後に、Expo Router はデータローダーやサーバーサイドレンダリングなど、Web 機能を強化しつつあります。これらの機能は React Navigation に属するものではなく、適切にサポートするにはかなりの変更が必要です。そして、Expo Router 専用にカスタマイズされたコードベースでなら、そうした変更はずっと容易です。

これはあなたにとって何を意味するか

Expo Router が React Navigation に依存しなくなるため、@react-navigation/* から直接インポートするコードは使えなくなります。これが破壊的変更であることは承知しており、移行を容易にするためのツールを用意しています。

コードベース内のすべての React Navigation インポートを expo-router/react-navigation に移行するには、私たちの codemod を使用できます:

px expo-codemod sdk-56-expo-router-react-navigation-replace src

手動で移行する場合、移行ガイドに必要な手順がすべて記載されています。最後に、移行を段階的かつ円滑に進めるため、各ライブラリから @react-navigation/core をインポートするコードは、少なくとも 1 リリースサイクルの間、自動的に expo-router/react-navigation のバージョンに置き換えられます。

問題が発生したり、異常を見つけたりした場合は、ぜひ知らせてください。

Expo Router の今後の予定

私たちは React Navigation チームと協力し、ライブラリ作者向けに両ライブラリを同時にサポートする共有 API を設計しています。

Expo Router と React Navigation の両方をサポートする必要があるライブラリを保守している方は、ぜひ連絡してください。新しい API への対応を一緒に進めましょう。

Expo Router での Suspense のカスタマイズ

_layout 内でルートの Suspense fallback をカスタマイズできるようになりました。SuspenseFallback をエクスポートして読み込み画面をカスタマイズできます。

import { ActivityIndicator, View } from 'react-native';
import { Stack } from 'expo-router';

export function SuspenseFallback() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator size="large" />
    </View>
  );
}

export default function Layout() {
  return <Stack />;
}

Expo Router のサーバーサイドレンダリング

既存のサーバー機能（API routes、middleware、data loaders、static rendering など）に加え、今回のリリースではストリーミングサーバーサイドレンダリングを導入しました。これにより、データに依存して読み込みが遅い UI よりも前に、重要な UI 要素を先に表示できるようになり、ユーザーが体感するパフォーマンスが向上します:

動画：Expo Router のサーバーサイドレンダリング——expo.dev で視聴

使い方は簡単です。app config の Expo Router 設定項目で unstable_useServerRendering を true に設定するだけです。

ストリーミング SSR の一環として、ルートの HTML メタデータを生成する新しい方法も導入しました。generateMetadata 関数を使います。

型安全な data loader を書きやすくするためのヘルパーも追加しました：createStaticLoader、createServerLoader。

Android のツールバー

SDK 55 では、iOS 向けのツールバー対応を追加しました。今回のリリースでは、Android にも対応する機能を追加し、クロスプラットフォーム互換を実現しました。iOS と同様、Android のツールバーも左・右・下の 3 か所から選べます。

ツールバーで利用できるすべてのオプションについては、ドキュメントを参照。

ネイティブタブ

昨年の秋、Router v6 で（その後、Router の命名方法を変更した）、ネイティブタブコンポーネントのサポートを追加した。現在、すべてのプラットフォームで完全なサポートに向けて作業を進めており、次のリリースでこの API を安定版とすることを目標としている。

Expo Router v56 では、ネイティブタブにいくつかの新しいオプションが加わった。最も要望が多かった機能のひとつが、タブを選択できないようにする機能だ。このバージョンから、disabled プロパティを使うと、タブをタブバーに表示したまま、ユーザーがクリックできないようにできる。

動画：Expo Router v56 ではネイティブタブにいくつかの新しいオプションが加わった——expo.dev で視聴

利用できるすべてのオプションとプラットフォームごとの対応状況は、ネイティブタブのリファレンスページを参照。

Expo Router v56 の使い始め方

この記事でひとつだけ覚えて帰るとしたら、次の3つのアップデートを期待してほしい：

React Navigation のフォークにより、Expo Router アプリはインポートを一度更新するだけで済む。移行をできるだけ簡単にするため、codemod と互換レイヤーを用意している。
ストリーミング SSR、generateMetadata、そして新しい loader ヘルパーが、より良い Expo Router for Web の体験を構築する助けになる。
Android がツールバーに対応し、ネイティブタブ API も拡張されて iOS と足並みが揃った。

既存のアプリをアップグレードする場合は、まず移行ガイドを見てから codemod を実行してほしい。新しくプロジェクトを作る場合は、SDK 56 にこれらがすべてデフォルトで含まれている。

Discord と GitHub で待っている。何を作ったか、どこで問題が起きたかを聞かせてほしい。