React Navigation 8.0アルファ版:ネイティブ下部タブの標準化、TypeScript推論と履歴機能
React NavigationがReact NativeおよびWeb向けに8.0アルファ版をリリースし、デフォルトでネイティブボトムタブとディープリンク機能を採用するとともに、TypeScriptの型推論を強化し、安定性と7.xからの移行ガイドを提供している。
キーポイント
ネイティブボトムタブの標準化
従来はオプションだったボトムタブがデフォルト機能として採用され、パフォーマンスとユーザーエクスペリエンスが向上する。
TypeScript型推論の再設計
ナビゲーション状態とパラメータの型安全性が大幅に強化され、開発者のDX向上とエラー防止に寄与する。
ディープリンクのデフォルト有効化
URLスキームやWebパスに基づくディープリンク機能が初期状態でオンになり、SEOとアプリ間連携が容易になる。
安定性重視と移行サポート
アルファ版ながら内部アーキテクチャの見直しを行い、7.xからのスムーズな移行を可能にする公式ガイドを提供する。
影響分析・編集コメントを表示
影響分析
本アップデートはReact Nativeエコシステムにおけるナビゲーション標準の再定義を示しており、開発者はパフォーマンスと型安全性を重視した新しいアーキテクチャへ移行する必要がある。特にディープリンクの標準化は、Webとモバイルの統合開発において重要な指針となる。ただしアルファ版であるため、安定性検証と移行コストを慎重に評価した上で採用を進めるべきだ。
編集コメント
React Navigationの8.0アルファ版は、ネイティブコンポーネントへの依存と型安全性の強化により、React Native開発のベストプラクティスを再定義する可能性がある。移行コストを考慮しつつ、早期テスト環境での検証を推奨する。
React Navigation は、React Native および Web アプリケーション向けに広く利用されているルーティングおよびナビゲーションライブラリであり、8.0 アルファ版 と 2026年3月の進捗報告 を同時に公開しました。これにより、ネイティブボトムタブがデフォルトで採用され、TypeScript の型推論(TypeScript inference)が改善され、開発者体験(Developer Experience)を向上させる新機能がいくつか追加されています。
2025年12月に発表されたアルファ版は、コミュニティから要望されていた改善を提供しつつ、大規模な破壊的変更(Breaking Changes)を最小限に抑えることに重点を置いています。2026年3月の続報では、デフォルトで有効化されたディープリンク(Deep Links)、Standard Schema 対応、ネイティブアイコンの統合など、さらなる改良が追加されました。
React Navigation 8.0 で最も目立つ変更の一つは、Bottom Tab Navigator が iOS および Android においてデフォルトでネイティブプラットフォームプリミティブ(Native Platform Primitives)を使用するようになった点です。これは react-native-screens によって駆動されています。これには iOS 26 の新機能であるリキッドグラスエフェクト(Liquid Glass Effect)のサポートも含まれます。以前の JavaScript ベースの実装を好む開発者は、ナビゲーターに implementation プロップ(Prop)として custom を渡すことで、以前のバージョンに戻すことができます。Medium にて記事を投稿した HB Nguyen 氏は、ネイティブタブとリキッドグラスサポートを新バージョン採用の主要な理由として強調し、このライブラリが「デバイスのネイティブ UI とより深く連携するようになった」と指摘しています。
TypeScript のサポートも更新されました。React Navigation 7 で導入された静的 API(Static API)が再設計され、useNavigation、useRoute、useNavigationState といったフック(Hook)が、提供された画面名に基づいて型を自動的に推論するようになりました。
このライブラリは、リンク設定(Linking Configuration)内のパスパターンからパラメータ型を直接推論することも可能で、このアプローチは TanStack Router に影響を受けています。これにより、ナビゲーションに関する手動の型注釈(Type Annotations)を一切記述せずにアプリケーション全体を書くことが技術的に可能になりました。r/reactnative 上の ある Reddit ユーザー は、これらの改善について興奮を表明しつつも、アップグレードサイクルや破壊的変更に対するユーザーの不満も示しました。
「このアップグレードサイクル全体に疲れ果てています。まるで終わりの見えないようです。今年のクリスマスの願いは、安定した React Native フレームワークです。
新しいアーキテクチャへのアップグレードと、それに伴うすべての問題(その一つが react-native-maps の不安定性)をようやく完了しました。react navigation v7 へのアップグレードも終わって、もう v8 が登場しているんです。」
3月の進捗報告では、React 19のReact.Activityを活用して非アクティブな画面を一時停止し、不要な再レンダリングを削減する新しいinactiveBehaviorオプションなど、追加機能が紹介されました。ディープリンク(Deep linking)はデフォルトで有効化され、画面名からパスが自動生成されるようになりました。また、ライブラリはリンク設定においてZodやValibotなどのStandard Schema準拠のバリデーションライブラリのサポートを追加しました。Web上のアクセシビリティも向上し、inert属性がすべてのナビゲーターで利用されるようになり、フォーカスされていない画面を支援技術から適切に非表示にできるようになりました。
新しいpushParams APIにより、開発者は完全に新しい画面をプッシュすることなくパラメータを更新するだけで、履歴スタック(history stack)にエントリを追加できます。これは特にWeb上で重要で、ユーザーは特定のUI状態の変更がブラウザの戻る・進むボタンで移動可能な新しい履歴エントリを作成することを期待しています。
React Navigation 8.0にはReact 19が必要であり、これはReact Native 0.83以降およびExpo SDK 55以降を意味します。バージョン7.xからのすべての破壊的変更とマイグレーション手順を網羅した詳細なアップグレードガイドが公開されています。
React NavigationはSatyajit Sahooによって管理されているオープンソースライブラリです。開発者は、@nextタグを付けてパッケージをインストールすることで、今日からアルファ版を試すことができます。
著者について
Daniel Curtisは、英国バーミンガムに拠点を置くソフトウェアコンサルティング会社Griffiths WaiteのUI開発マネージャーです。彼はスタック全体でTypeScriptを活用した革新的なエンタープライズソリューションの提供に重点を置き、フロントエンドエンジニアリングの取り組みをリードしています。DanielはモダンなWebアーキテクチャ、開発者体験(Developer Experience)、そしてソフトウェアの納品を支援し製品内で実際の顧客課題を解決するためにAIを活用することに情熱を注いでいます。
原文を表示
React Navigation, the widely used routing and navigation library for React Native and web applications, has published its 8.0 alpha release alongside a March 2026 progress report, introducing native bottom tabs as the default, improved TypeScript inference, and several new developer experience features.
The alpha, announced in December 2025, focuses on minimising large breaking changes while delivering improvements that the community has been requesting. A follow-up progress report in March 2026 added further refinements including deep links enabled by default, Standard Schema support, and native icon integration.
One of the most visible changes in React Navigation 8.0 is that the Bottom Tab Navigator now uses native platform primitives by default on iOS and Android, powered by react-native-screens. This includes support for the new liquid glass effect on iOS 26. Developers who prefer the previous JavaScript-based implementation can switch back by passing the implementation prop as custom to the navigator. HB Nguyen, writing on Medium, highlighted the native tabs and liquid glass support as key reasons to adopt the new version, noting that the library now "interacts more deeply with the device's native UI."
TypeScript support has received updates. The static API introduced in React Navigation 7 has been reworked so that hooks like useNavigation, useRoute, and useNavigationState now automatically infer types based on a provided screen name.
The library can also infer param types directly from path patterns in linking configuration, an approach inspired by TanStack Router. This makes it technically possible to write an entire app without any manual type annotations for navigation. One Reddit user on r/reactnative noted excitement about the improvements, but also showed that some users were frustrated with upgrade cycles and breaking changes:
I’m burnt out by this whole upgrade cycle. It just doesn’t seem to end. My wish this christmas is a stable react native framework.
I just finished upgrading to the new architecture and all it’s issues (react-native-maps instability for one). Just finished upgrading to react navigation v7 and v8 is here already.
The March progress report introduced additional features including a new inactiveBehavior option that leverages React 19's React.Activity to pause inactive screens, reducing unnecessary re-renders. Deep linking is now enabled by default with automatic path generation from screen names, and the library has added support for Standard Schema validation libraries such as Zod and Valibot in linking configuration. Accessibility on the web has improved too, with the inert attribute now used across all navigators to properly hide unfocused screens from assistive technologies.
A new pushParams API allows developers to add entries to the history stack by updating params without pushing an entirely new screen. This is particularly important on the web, where users expect that changing certain UI states should create a new history entry navigable with the browser's back and forward buttons.
React Navigation 8.0 requires React 19, which means React Native 0.83 or later and Expo SDK 55 or later. A detailed upgrade guide is available covering all breaking changes and migration steps from version 7.x.
React Navigation is an open-source library maintained by Satyajit Sahoo. Developers can try the alpha today by installing packages with the @next tag.
About the Author
Daniel Curtis
Daniel Curtis is a UI Development Manager at Griffiths Waite, a software consultancy based in Birmingham, UK. He leads front-end engineering efforts with a strong focus on delivering innovative enterprise solutions using TypeScript across the stack. Daniel is passionate about modern web architecture, developer experience, and the use of AI to both support software delivery and solve real customer problems within products.
Show moreShow less
関連記事
React Native 向け高速・特化型モデル「Apex」の紹介
TLDR AI は、アーキテクチャ判断やフレームワーク固有の問題修正を分析してアプリ構築を行う React Native 特化型コーディングモデル「Apex」を発表しました。この最適化されたモデルは特定領域で性能対コスト比を大幅に改善し、現在選定チーム限定のプライベートベータ版として提供されています。
GitHub Copilot のローカルセッションをどこでも利用可能に
GitHub が、開発者がデスクから離れても GitHub Copilot CLI セッションの遠隔操作や可視化が可能になる機能をリリースした。これにより、複数のエージェントを並行して管理できるワークフローが場所を選ばず実行できるようになった。
Genkit ミドルウェア(10 分読了)
Genkit は、TypeScript や Python など複数の言語に対応し、信頼性の高い AI エージェントアプリケーションを構築するためのフレームワークです。このツールは、生成呼び出しをインターセプトするコンポーザブルフックや、破壊的なツールの実行前に人間が承認を行う機能を提供します。