新しいアーキテクチャが登場

React Native 0.76がデフォルトで新しいアーキテクチャになり、npmで利用可能になりました！

0.76リリースブログ記事では、このバージョンに含まれる重要な変更のリストを共有しました。この記事では、新しいアーキテクチャの概要と、それがReact Nativeの将来をどのように形作るかについて説明します。

新しいアーキテクチャは、Suspense、Transitions、自動バッチ処理、およびuseLayoutEffectを含む、最新のReact機能の完全なサポートを追加します。また、新しいアーキテクチャには、ブリッジなしでネイティブインターフェイスに直接アクセスできる、タイプセーフなコードを記述できる新しいネイティブモジュールおよびネイティブコンポーネントシステムが含まれています。

このリリースは、2018年から取り組んできたReact Nativeの根本的な書き換えの結果であり、ほとんどのアプリにとって新しいアーキテクチャが段階的な移行になるように特別な注意を払ってきました。2021年には、Reactエコシステム全体のスムーズなアップグレードエクスペリエンスを確保するために、コミュニティと協力して新しいアーキテクチャワーキンググループを作成しました。

ほとんどのアプリは、他のリリースと同じレベルの労力でReact Native 0.76を採用できます。最も人気のあるReact Nativeライブラリは、すでに新しいアーキテクチャをサポートしています。新しいアーキテクチャには、古いアーキテクチャをターゲットとするライブラリとの下位互換性を実現する自動相互運用性レイヤーも含まれています。

過去数年間の開発を通じて、私たちのチームは新しいアーキテクチャに対するビジョンを公に共有してきました。これらの講演を見逃した場合は、ここで確認してください。

• React Native EU 2019 - 新しいReact Native
• React Conf 2021 - React 18基調講演
• App.js 2022 - 新しいReact NativeアーキテクチャをOSSコミュニティに導入
• React Conf 2024 - 2日目の基調講演

新しいアーキテクチャとは

新しいアーキテクチャは、コンポーネントのレンダリング方法、JavaScriptの抽象化がネイティブの抽象化と通信する方法、およびさまざまなスレッド間で作業がスケジュールされる方法など、React Nativeを支える主要システムの完全な書き換えです。ほとんどのユーザーはこれらのシステムがどのように機能するかを考える必要はありませんが、これらの変更により改善と新しい機能がもたらされます。

古いアーキテクチャでは、React Nativeは非同期ブリッジを使用してネイティブプラットフォームと通信していました。コンポーネントをレンダリングしたり、ネイティブ関数を呼び出したりするには、React Nativeはブリッジを使用してネイティブ関数呼び出しをシリアル化してエンキューする必要がありました。これは非同期で処理されます。このアーキテクチャの利点は、すべての作業がバックグラウンドスレッドで実行されるため、メインスレッドがレンダリングの更新やネイティブモジュール関数呼び出しの処理でブロックされることがなかったことです。

ただし、ユーザーはネイティブアプリのように感じるために、インタラクションに対する即時のフィードバックを期待します。これは、一部の更新がユーザー入力に応じて同期的にレンダリングされる必要があり、進行中のレンダリングを中断する可能性があることを意味します。古いアーキテクチャは非同期のみだったため、非同期と同期の両方の更新を許可するように書き換える必要がありました。

さらに、古いアーキテクチャでは、ブリッジを介して関数呼び出しをシリアル化すると、特に頻繁な更新や大きなオブジェクトの場合にすぐにボトルネックになりました。これにより、アプリが60+ FPSを確実に達成することが困難になりました。また、同期の問題もありました。JavaScriptとネイティブレイヤーの同期が取れなくなった場合、それらを同期的に調整することが不可能になり、リストに空白のフレームが表示されたり、中間状態のレンダリングが原因で視覚的なUIジャンプが発生したりするなどのバグが発生しました。

最後に、古いアーキテクチャでは、ネイティブ階層を使用してUIの単一のコピーを保持し、そのコピーをインプレースで変更していたため、レイアウトは単一のスレッドでのみ計算できました。これにより、ユーザー入力のような緊急の更新を処理することが不可能になり、ツールチップの位置を更新するためにレイアウト効果で読み取るなど、レイアウトを同期的に読み取ることができませんでした。

これらの問題はすべて、Reactの同時実行機能を適切にサポートすることが不可能であることを意味していました。これらの問題を解決するために、新しいアーキテクチャには4つの主要な部分が含まれています。

• 新しいネイティブモジュールシステム
• 新しいレンダラー
• イベントループ
• ブリッジの削除

新しいモジュールシステムにより、React Nativeレンダラーはネイティブレイヤーへの同期アクセスが可能になり、イベントの処理、更新のスケジュール、およびレイアウトの非同期および同期的な読み取りが可能になります。新しいネイティブモジュールもデフォルトで遅延ロードされるため、アプリのパフォーマンスが大幅に向上します。

新しいレンダラーは、メインスレッドまたはバックグラウンドスレッドのいずれかで、複数の同時更新の優先度を処理できる、複数の進行中のツリーを複数のスレッドで処理できます。また、複数のスレッドからのレイアウトを同期または非同期に読み取ることをサポートし、ジャンクのないより応答性の高いUIをサポートします。

新しいイベントループは、JavaScriptスレッドでタスクを明確な順序で処理できます。これにより、Reactはレンダリングを中断してイベントを処理できるため、緊急のユーザーイベントが優先度の低いUIトランジションよりも優先されます。イベントループはWeb仕様にも準拠しているため、マイクロタスク、MutationObserver、IntersectionObserverなどのブラウザー機能をサポートできます。

最後に、ブリッジを削除すると、起動が高速になり、JavaScriptとネイティブランタイム間の直接通信が可能になるため、作業を切り替えるコストが最小限に抑えられます。これにより、エラーレポート、デバッグが改善され、未定義の動作によるクラッシュが減少します。

新しいアーキテクチャは、本番環境で使用する準備が整いました。Facebookアプリやその他の製品で、Metaで大規模にすでに使用されています。Questデバイス用に開発したFacebookおよびInstagramアプリで、React Nativeと新しいアーキテクチャを正常に使用しました。

パートナーはすでに数か月間、新しいアーキテクチャを本番環境で使用しています。ExpensifyおよびKrakenによる成功事例をご覧になり、BlueSkyの新しいリリースを試してみてください。

新しいネイティブモジュール

新しいネイティブモジュールシステムは、JavaScriptとネイティブプラットフォームの通信方法を大幅に書き直したものです。完全にC++で記述されており、多くの新しい機能が利用可能になります。

• ネイティブランタイムとの同期アクセス
• JavaScriptとネイティブコード間の型安全性
• プラットフォーム間のコード共有
• デフォルトで遅延モジュールロード

新しいネイティブモジュールシステムでは、JavaScriptとネイティブレイヤーは、非同期ブリッジを使用する必要なく、JavaScript Interface (JSI) を介して互いに同期的に通信できるようになりました。つまり、カスタムのネイティブモジュールは、関数を同期的に呼び出し、値を返し、その値を別のネイティブモジュール関数に渡すことができるようになりました。

古いアーキテクチャでは、ネイティブ関数の呼び出しからの応答を処理するために、コールバックを提供する必要があり、返される値はシリアライズ可能である必要がありました。

// ❌ Sync callback from Native Module
nativeModule.getValue(value => {
  // ❌ value cannot reference a native object
  nativeModule.doSomething(value);
});

新しいアーキテクチャでは、ネイティブ関数を同期的に呼び出すことができます。

// ✅ Sync response from Native Module
const value = nativeModule.getValue();

// ✅ value can be a reference to a native object
nativeModule.doSomething(value);

新しいアーキテクチャでは、JavaScript/TypeScript APIからアクセスしながら、C++ネイティブ実装の能力を最大限に活用できます。新しいモジュールシステムは、C++で記述されたモジュールをサポートしているため、モジュールを一度記述すれば、Android、iOS、Windows、macOSなどのすべてのプラットフォームで動作します。C++でモジュールを実装することで、よりきめ細かいメモリ管理とパフォーマンスの最適化が可能になります。

さらに、Codegenを使用すると、モジュールはJavaScriptレイヤーとネイティブレイヤーの間の厳密に型付けされたコントラクトを定義できます。私たちの経験から、クロス境界の型エラーは、クロスプラットフォームアプリで最も一般的なクラッシュの原因の1つです。Codegenを使用すると、ボイラープレートコードを生成しながら、これらの問題を克服できます。

最後に、モジュールは遅延ロードされるようになりました。つまり、起動時ではなく、実際に必要なときにのみメモリにロードされます。これにより、アプリの起動時間が短縮され、アプリケーションの複雑さが増すにつれて低く保たれます。

react-native-mmkvなどの一般的なライブラリは、新しいネイティブモジュールへの移行ですでにメリットを享受しています。

「新しいネイティブモジュールは、react-native-mmkvのセットアップ、自動リンク、初期化を大幅に簡素化しました。新しいアーキテクチャのおかげで、react-native-mmkvは純粋なC++ネイティブモジュールになり、どのプラットフォームでも動作するようになりました。新しいCodegenを使用すると、MMKVは完全に型安全になり、null安全性を強制することで、長年のNullPointerReferenceの問題が修正され、ネイティブモジュール関数を同期的に呼び出すことができるようになったことで、カスタムJSIアクセスを新しいネイティブモジュールAPIに置き換えることができました。」

Marc Rousavy、react-native-mmkvの作成者

新しいレンダラー

ネイティブレンダラーも完全に書き直し、いくつかのメリットが追加されました。

• アップデートは、異なる優先度で異なるスレッドでレンダリングできます。
• レイアウトは、同期的に、異なるスレッド間で読み取ることができます。
• レンダラーはC++で記述されており、すべてのプラットフォームで共有されます。

更新されたネイティブレンダラーは、ビュー階層を不変のツリー構造に格納するようになりました。これは、UIが直接変更できない方法で保存されることを意味し、アップデートのスレッドセーフな処理を可能にします。これにより、ユーザーインターフェースの異なるバージョンを表す複数の進行中のツリーを処理できます。その結果、(トランジション中など) UIをブロックすることなくバックグラウンドで、または(ユーザー入力に応答して)メインスレッドで更新をレンダリングできます。

Reactは、複数のスレッドをサポートすることで、低優先度の更新を中断して、ユーザー入力によって生成されたものなどの緊急度の高い更新をレンダリングし、必要に応じて低優先度の更新を再開できます。新しいレンダラーは、レイアウト情報を同期的に、異なるスレッド間で読み取ることもできます。これにより、低優先度の更新のバックグラウンド計算と、ツールチップの再配置など、必要な場合の同期読み取りが可能になります。

最後に、レンダラーをC++で書き直すことで、すべてのプラットフォームで共有できます。これにより、iOS、Android、Windows、macOS、およびその他のReact Nativeがサポートするプラットフォームで同じコードが実行されるようになり、各プラットフォームごとに再実装する必要なく、一貫したレンダリング機能が提供されます。

これは、私たちの多くのプラットフォームビジョンに向けた大きな一歩です。たとえば、View Flatteningは、深いレイアウトツリーを回避するためのAndroidのみの最適化でした。共有C++コアを備えた新しいレンダラーは、この機能をiOSにもたらします。この最適化は自動的で、設定は不要で、共有レンダラーに無料で付属しています。

これらの変更により、React Nativeは、SuspenseやTransitionsなどのConcurrent React機能を完全にサポートするようになり、ジャンプ、遅延、視覚的な飛躍なしに、ユーザー入力に迅速に対応する複雑なユーザーインターフェースを簡単に構築できるようになりました。将来的には、これらの新しい機能を活用して、FlatListやTextInputなどの組み込みコンポーネントをさらに改善する予定です。

Reanimatedなどの一般的なライブラリは、新しいレンダラーをすでに取り入れています。

「現在開発中のReanimated 4は、新しいレンダラーと直接連携する新しいアニメーションエンジンを導入し、異なるスレッド間でアニメーションを処理し、レイアウトを管理できるようにします。新しいレンダラーの設計は、多くの回避策に頼ることなく、これらの機能を構築することを可能にします。さらに、C++で実装され、プラットフォーム間で共有されているため、Reanimatedの大部分を一度記述するだけで済み、プラットフォーム固有の問題が軽減され、コードベースが最小限に抑えられ、アウトオブツリープラットフォームへの採用が合理化されます。」

Krzysztof Magiera、Reanimatedの作成者

イベントループ

新しいアーキテクチャにより、このRFCで説明されているように、明確に定義されたイベントループ処理モデルを実装することができました。このRFCは、HTML標準で説明されている仕様に従っており、React NativeがJavaScriptスレッドでタスクを実行する方法について説明しています。

明確に定義されたイベントループを実装することで、React DOMとReact Nativeのギャップが埋められます。React Nativeアプリケーションの動作がReact DOMアプリケーションの動作に近くなり、一度学習すればどこでも簡単に記述できるようになりました。

イベントループは、React Nativeに多くのメリットをもたらします。

• イベントとタスクを処理するためにレンダリングを中断する機能
• Web仕様とのより緊密な連携
• より多くのブラウザ機能の基盤

イベントループにより、Reactは更新とイベントを予測可能な順序で処理できます。これにより、Reactは緊急のユーザーイベントで低優先度の更新を中断でき、新しいレンダラーを使用すると、これらの更新を個別にレンダリングできます。

イベントループは、タイマーのようなイベントとタスクの動作をWeb仕様に合わせるため、React NativeはWebでユーザーが慣れ親しんでいるもののように動作し、React DOMとReact Nativeの間でより優れたコード共有が可能になります。

また、マイクロタスク、MutationObserver、IntersectionObserverなど、より準拠したブラウザ機能の実装も可能です。これらの機能はまだReact Nativeで使用する準備ができていませんが、将来的に提供できるように取り組んでいます。

最後に、イベントループと、レイアウトを同期的に読み取ることをサポートするための新しいレンダラーの変更により、React Nativeは、useLayoutEffectを適切にサポートして、レイアウト情報を同期的に読み取り、同じフレーム内でUIを更新できるようになりました。これにより、要素をユーザーに表示する前に正しく配置できます。

詳細については、useLayoutEffectを参照してください。

ブリッジの削除

新しいアーキテクチャでは、React Nativeのブリッジへの依存関係も完全に取り除き、JSIを使用したJavaScriptとネイティブコード間の直接的で効率的な通信に置き換えました。

ブリッジを削除すると、ブリッジの初期化を回避することで、起動時間が短縮されます。たとえば、古いアーキテクチャでは、グローバルメソッドをJavaScriptに提供するために、起動時にJavaScriptでモジュールを初期化する必要があり、アプリの起動時間がわずかに遅れていました。

// ❌ Slow initialization
import {NativeTimingModule} from 'NativeTimingModule';
global.setTimeout = timer => {
  NativeTimingModule.setTimeout(timer);
};

// App.js
setTimeout(() => {}, 100);

新しいアーキテクチャでは、C++からメソッドを直接バインドできます。

// ✅ Initialize directly in C++
runtime.global().setProperty(runtime, "setTimeout", createTimer);

// App.js
setTimeout(() => {}, 100);

書き換えにより、特に起動時のJavaScriptクラッシュのエラーレポートも改善され、未定義の動作によるクラッシュが減少します。クラッシュが発生した場合、新しいReact Native DevToolsはデバッグを簡素化し、新しいアーキテクチャをサポートします。

ブリッジは、新しいアーキテクチャへの段階的な移行をサポートするために、後方互換性のために残されています。将来的には、ブリッジコードを完全に削除します。

段階的な移行

ほとんどのアプリは、他のリリースと同じ労力で0.76にアップグレードできると考えています。

0.76にアップグレードすると、新しいアーキテクチャとReact 18がデフォルトで有効になります。ただし、並行機能を使用し、新しいアーキテクチャのメリットを最大限に活用するには、アプリとライブラリを新しいアーキテクチャを完全にサポートするように徐々に移行する必要があります。

最初にアップグレードすると、アプリは古いアーキテクチャとの自動相互運用レイヤーを使用して新しいアーキテクチャで実行されます。ほとんどのアプリでは、これは変更なしで機能しますが、カスタムシャドウノードへのアクセスや並行機能のサポートがないため、相互運用レイヤーには既知の制限があります。

並行機能を使用するには、Concurrent Reactをサポートするようにアプリを更新し、Reactのルールに従う必要もあります。JavaScriptコードをReact 18とそのセマンティクスに移行するには、React 18アップグレードガイドに従ってください。

全体的な戦略は、既存のコードを壊すことなく、新しいアーキテクチャでアプリケーションを実行することです。その後、独自のペースでアプリを徐々に移行できます。すべてのモジュールを新しいアーキテクチャに移行した新しい表面では、すぐに並行機能の使用を開始できます。既存の表面では、並行機能を追加する前に、いくつかの問題に対処し、モジュールを移行する必要がある場合があります。

私たちは、最も人気のあるReact Nativeライブラリと協力して、新しいアーキテクチャのサポートを保証してきました。200Kを超える毎週のダウンロードがあるすべてのライブラリを含む、850を超えるライブラリがすでに互換性があります（ダウンロードされたライブラリの約10％）。reactnative.directoryウェブサイトで、ライブラリと新しいアーキテクチャの互換性を確認できます。

アップグレードの詳細については、以下のアップグレード方法を参照してください。

新機能

新しいアーキテクチャには、React Native における React 18、コンカレント機能、および useLayoutEffect の完全なサポートが含まれています。React 18 の機能の完全なリストについては、React 18 のブログ記事を参照してください。

トランジション

トランジションは、緊急の更新と緊急でない更新を区別するための React 18 の新しい概念です。

• 緊急の更新は、タイピングや押下などの直接的なインタラクションを反映します。
• トランジションの更新は、UI をあるビューから別のビューに移行させます。

緊急の更新は、物理的なオブジェクトの動作に関する私たちの直感に合致するため、即座に応答する必要があります。しかし、トランジションは、ユーザーが画面上のすべての中間値を表示することを期待していないため、異なります。新しいアーキテクチャでは、React Native は緊急の更新とトランジションの更新を別々にレンダリングできます。

通常、最高のユーザーエクスペリエンスのためには、単一のユーザー入力が緊急の更新と緊急でない更新の両方を引き起こす必要があります。ReactDOM と同様に、press や change などのイベントは緊急として処理され、即座にレンダリングされます。入力イベント内で startTransition API を使用して、どの更新が「トランジション」であり、バックグラウンドに延期できるかを React に通知できます。

import {startTransition} from 'react';

// Urgent: Show the slider value
setCount(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setNumberOfTiles(input);
});

緊急のイベントとトランジションを分離することで、よりレスポンシブなユーザーインターフェースと、より直感的なユーザーエクスペリエンスが可能になります。

以下は、トランジションがない古いアーキテクチャとトランジションがある新しいアーキテクチャの比較です。各タイルが背景色を持つ単純なビューではなく、レンダリングにコストのかかる画像やその他のコンポーネントを含むリッチコンポーネントであると想像してください。useTransition を使用すると、アプリを更新で過負荷にし、遅延することを回避できます。

以前：トランジションとしてマークせずにタイルをレンダリング。

以降：古い状態の進行中のレンダリングを中断するために、トランジションを使用してタイルをレンダリング。

詳細については、コンカレントレンダラーと機能のサポートを参照してください。

自動バッチ処理

新しいアーキテクチャにアップグレードすると、React 18 の自動バッチ処理の恩恵を受けることができます。

自動バッチ処理により、React はレンダリング時により多くの状態更新をまとめてバッチ処理し、中間状態のレンダリングを回避できます。これにより、開発者による追加のコードなしで、React Native をより高速にし、ラグの影響を受けにくくすることができます。

以前：レガシーレンダラーで頻繁な状態更新をレンダリング。

以降：自動バッチ処理で頻繁な状態更新をレンダリング。

古いアーキテクチャでは、より多くの中間状態がレンダリングされ、スライダーの移動が停止しても UI は更新を続けます。新しいアーキテクチャでは、より少ない中間状態がレンダリングされ、自動的に更新をバッチ処理することで、レンダリングがはるかに早く完了します。

詳細については、コンカレントレンダラーと機能のサポートを参照してください。

useLayoutEffect

新しいアーキテクチャでは、イベントループとレイアウトを同期的に読み取る機能に基づいて、React Native で useLayoutEffect の適切なサポートを追加しました。

古いアーキテクチャでは、ビューのレイアウト情報を読み取るために、非同期の onLayout イベントを使用する必要がありました（これも非同期でした）。その結果、レイアウトが読み取られて更新されるまで、レイアウトが正しくないフレームが少なくとも 1 つ存在し、ツールチップが間違った位置に配置されるなどの問題が発生していました。

// ❌ async onLayout after commit
const onLayout = React.useCallback(event => {
  // ❌ async callback to read layout
  ref.current?.measureInWindow((x, y, width, height) => {
    setPosition({x, y, width, height});
  });
}, []);

// ...
<ViewWithTooltip
  onLayout={onLayout}
  ref={ref}
  position={position}
/>;

新しいアーキテクチャでは、useLayoutEffect でレイアウト情報に同期的にアクセスできるようにすることで、この問題を解決しています。

// ✅ sync layout effect during commit
useLayoutEffect(() => {
  // ✅ sync call to read layout
  const rect = ref.current?.getBoundingClientRect();
  setPosition(rect);
}, []);

// ...
<ViewWithTooltip ref={ref} position={position} />;

この変更により、レイアウト情報を同期的に読み取り、同じフレームで UI を更新できるため、ユーザーに表示する前に要素を正しく配置できます。

古いアーキテクチャでは、レイアウトは onLayout で非同期的に読み取られ、ツールチップの位置が遅延していました。

新しいアーキテクチャでは、useLayoutEffect でレイアウトを同期的に読み取ることができ、表示前にツールチップの位置を更新します。

詳細については、同期レイアウトとエフェクトのドキュメントを参照してください。

Suspense の完全サポート

Suspense を使用すると、コンポーネントツリーの一部が表示される準備ができていない場合に、そのローディング状態を宣言的に指定できます。

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

数年前に Suspense の限定バージョンを導入し、React 18 で完全サポートが追加されました。これまで、React Native は Suspense のコンカレントレンダリングをサポートできませんでした。

新しいアーキテクチャには、React 18 で導入された Suspense の完全なサポートが含まれています。これは、React Native で Suspense を使用してコンポーネントのローディング状態を処理できるようになったことを意味し、ローディング状態が表示されている間に、中断されたコンテンツがバックグラウンドでレンダリングされ、表示されているコンテンツへのユーザー入力がより高い優先度で処理されます。

詳細については、React 18 における Suspense の RFCを参照してください。

アップグレード方法

0.76 にアップグレードするには、リリース投稿の手順に従ってください。このリリースでは React 18 にもアップグレードされるため、React 18 アップグレードガイドにも従う必要があります。

これらの手順は、古いアーキテクチャとの相互運用レイヤーのおかげで、ほとんどのアプリが新しいアーキテクチャにアップグレードするのに十分なはずです。ただし、新しいアーキテクチャを最大限に活用し、コンカレント機能の使用を開始するには、カスタムのネイティブモジュールとネイティブコンポーネントを新しいネイティブモジュールおよびネイティブコンポーネントAPIをサポートするように移行する必要があります。

カスタムのネイティブモジュールを移行しないと、共有 C++、同期メソッド呼び出し、codegen による型安全性というメリットは得られません。ネイティブコンポーネントを移行しないと、コンカレント機能を使用できません。すべてのネイティブコンポーネントとネイティブモジュールをできるだけ早く新しいアーキテクチャに移行することをお勧めします。

注意

将来のリリースでは、相互運用レイヤーを削除し、モジュールは新しいアーキテクチャをサポートする必要があります。

アプリ

アプリ開発者の場合、新しいアーキテクチャを完全にサポートするには、ライブラリ、カスタムのネイティブコンポーネント、およびカスタムのネイティブモジュールを新しいアーキテクチャを完全にサポートするようにアップグレードする必要があります。

最も人気のある React Native ライブラリと協力して、新しいアーキテクチャのサポートを確保しました。新しいアーキテクチャとのライブラリの互換性は、reactnative.directory の Web サイトで確認できます。

アプリが依存しているライブラリがまだ互換性がない場合は、次のいずれかを行うことができます。

• ライブラリで問題を提起し、作成者に新しいアーキテクチャへの移行を依頼します。
• ライブラリがメンテナンスされていない場合は、同じ機能を持つ代替ライブラリを検討してください。
• これらのライブラリが移行される間は、新しいアーキテクチャをオプトアウトします。

アプリにカスタムのネイティブモジュールまたはカスタムのネイティブコンポーネントがある場合は、相互運用レイヤーのおかげで、正常に動作することが期待されます。ただし、新しいアーキテクチャを完全にサポートし、コンカレント機能を採用するには、新しいネイティブモジュールおよびネイティブコンポーネントAPIにアップグレードすることをお勧めします。

モジュールとコンポーネントを新しいアーキテクチャに移行するには、次のガイドに従ってください。

• ネイティブモジュール
• ネイティブコンポーネント

ライブラリ

ライブラリのメンテナーの場合は、まずライブラリが相互運用レイヤーで動作するかどうかをテストしてください。動作しない場合は、新しいアーキテクチャワーキンググループで問題を提起してください。

新しいアーキテクチャを完全にサポートするには、できるだけ早くライブラリを新しいネイティブモジュールおよびネイティブコンポーネントAPIに移行することをお勧めします。これにより、ライブラリのユーザーは新しいアーキテクチャを最大限に活用し、コンカレント機能をサポートできるようになります。

モジュールとコンポーネントを新しいアーキテクチャに移行するには、次のガイドに従うことができます。

• ネイティブモジュール
• ネイティブコンポーネント

オプトアウト

何らかの理由で、新しいアーキテクチャがアプリケーションで適切に動作しない場合は、準備ができるまでオプトアウトして、再度オンにするオプションが常にあります。

新しいアーキテクチャをオプトアウトするには、

• Android では、android/gradle.properties ファイルを修正して、newArchEnabled フラグをオフにします。

-newArchEnabled=true
+newArchEnabled=false

• iOS では、次のコマンドを実行して依存関係を再インストールできます。

RCT_NEW_ARCH_ENABLED=0 bundle exec pod install

謝辞

新しいアーキテクチャを OSS コミュニティに提供することは、数年間の研究開発を要した大変な取り組みでした。この結果を達成するために協力してくれた、React チームの現メンバーと過去のメンバー全員に感謝します。

また、この実現のために協力してくれたすべてのパートナーに深く感謝します。特に、以下の方々に言及したいと思います。

• Expo：早期に新しいアーキテクチャを採用し、最も人気のあるライブラリの移行作業をサポートしてくれました。
• Software Mansion：エコシステム内の重要なライブラリを維持し、それらを早期に新しいアーキテクチャに移行し、さまざまな問題の調査と修正にご協力いただきました。
• Callstack：エコシステム内の重要なライブラリを維持し、それらを早期に新しいアーキテクチャに移行し、コミュニティ CLI の作業をサポートしていただきました。
• Microsoft：react-native-windows および react-native-macos 用の新しいアーキテクチャの実装と、他のいくつかの開発ツールで追加されました。
• Expensify、Kraken、BlueSky、Brigad：新しいアーキテクチャの採用を先駆的に行い、さまざまな問題を報告してくれたため、他のすべての人々のために修正することができました。
• 新しいアーキテクチャをテストし、問題の一部を修正し、不明確な問題について質問をして、それらを解決できるように貢献してくれたすべての独立したライブラリメンテナーと開発者。