本日、React Native 0.78のリリースを発表できることを嬉しく思います！このリリースでは、React Native にReact 19が搭載され、Android Vector drawablesのネイティブサポートやiOSでのより良いbrownfield統合などの関連機能も含まれています。
ハイライト
- React 19
- より小さく高速なリリースに向けて
- MetroでのJavaScriptログのオプトイン
- Android XML drawablesのサポート追加
- iOSでのReactNativeFactory
ハイライト
React 19
React 19がReact Nativeで利用可能になりました！React 19では、React 18からいくつかの変更を導入したため、アプリの更新が必要です。例えば、propTypesなどのAPIを削除したため、新しいバージョンのReactと互換性を持たせるためにアプリを調整する必要があります。
React 19へのアップグレードについては、ステップバイステップの手順に従ってください。
移行後は、以下を含むReactの新機能をすべて活用できるようになります（網羅的ではありません）：
- Actions: 非同期トランジションを使用する関数です。非同期トランジションは、データの送信を自動的に管理し、保留状態、楽観的更新、エラーハンドリングなどを処理します。
- useActionState: Actionsの上に構築されたユーティリティフックです。関数を受け取り、呼び出すためのラップされたActionを返します。アクションが呼び出されると、Actionの最後の結果とその保留状態を返します。
- useOptimistic: 非同期リクエストが進行中の間、更新の最終状態を楽観的に表示することを簡素化する新しいフックです。リクエストがエラーになった場合、Reactは自動的に前の値に戻します。
- use: レンダリング中にリソースにアクセスできる新しいAPIです。
useでpromiseやcontextを読み取ることができ、Reactはそれらが解決されるまでSuspendします。
- ref as props: 他のpropと同様に
refをpropとして渡すことができるようになりました。関数コンポーネントはforwardRefが不要になり、今すぐコンポーネントを移行できます。
- その他多数
利用可能な新機能の完全なリストについては、React 19リリースブログ投稿をご覧ください。
React Compiler
React Compilerは、自動的にメモ化を適用してReactアプリケーションを最適化するように設計されたビルド時ツールです。開発者はuseMemo、useCallback、React.memoなどのAPIを手動で使用してアプリの変更されていない部分の不要な再計算を防ぐことができますが、これらの最適化を忘れたり誤用したりする可能性もあります。
React Compilerは、JavaScriptとReactのルールの理解を活用して、コンポーネントとフック内の値や値のグループを自動的にメモ化することでこの問題に対処します。
このリリースでは、React NativeアプリでReact Compilerを有効にするプロセスを簡素化しました。以前のバージョンでは、コンパイラーとそのランタイムの2つのパッケージをインストールする必要がありました。これらのパッケージをインストールした後、Metroを通じてReact Compilerを有効にするためにBabelプラグインを設定する必要がありました。
現在は、コンパイラー自体をインストールし、Babelプラグインを設定するだけで済みます。有効にする方法については、ステップバイステップガイドに従ってください。
コンパイラーが実行されていることを確認するには、React Native DevToolsを開いてください。メモ化されたコンポーネントには、Component InspectorでMemo ✨タグが付いているのが確認できるはずです。
React Compilerについてさらに学びたい場合は、以下のリソースが役立ちます：
より小さく高速なリリースに向けて
2025年により頻繁に安定版React Nativeリリースを出荷するため、リリースプロセスを更新しています。出荷する破壊的変更の数を減らすため、React Nativeバージョンの更新が簡単になります。
より高速なリリースは、内部で出荷するすべてのバグ修正がより早くあなたに届き、React Native内で開発する最新機能の恩恵を受けられることも意味します。
より少ない破壊的変更は、誰もが信頼できるより安定したフレームワークを意味するため、この新しいモデルはReact Nativeエコシステムのすべての開発者に利益をもたらすと信じています。
MetroでのJavaScriptログのオプトイン
Community CLIユーザー向けに0.77で削除されたMetro dev server経由のJavaScriptログストリーミングを復元するオプトインを追加しました。これは、ユーザーフィードバックと、現在の代替手段の状況を検討した結果です。
オプトインするには、新しい--client-logsフラグを使用してください。便利なように、npmスクリプト経由でエイリアスすることもできます。
npx @react-native-community/cli start --client-logs
Metroでのログストリーミングは将来的に廃止され、デフォルトではオフのままです。ただし、開発者がこの変更に適応するためのより長い移行期間を提供する予定です。
この更新は、今後の0.77.1マイナーリリースでも利用可能になります。
Android XML drawablesのサポート追加
React Native 0.78では、Androidでアイコン、イラスト、その他のグラフィック要素をXMLリソースとして読み込む新しい方法を提供しています。これは、品質を失うことなく任意のスケールでベクター画像を表示するためのベクタードローアブル、またはより基本的な装飾を描画するためのシェイプドローアブルを使用できることを意味します。
これはすべて、あなたが知っていて愛用している同じImageコンポーネントでサポートされています。
今日この機能を使用するには、source propで参照することで、他の静的リソースと同様にXMLリソースをインポートできます。さらに、ビットマップではなくXMLリソースを使用することで、アプリケーションサイズの削減にも役立ち、異なるDPIの画面でのより良いレンダリングが実現されます。
<Image source={require('./img/my_icon.xml')} style={{width: 40, height: 40}} />;
import MyIcon from './img/my_icon.xml';
<Image source={MyIcon} style={{width: 40, height: 40}} />;
パフォーマンスと品質
他のすべての画像タイプと同様に、AndroidのXMLリソースはメインスレッド外で読み込まれ、展開されるため、フレームドロップが発生しません。これは、リソースが即座に表示されることが保証されていないが、リソースの読み込み中にユーザー入力を妨げないことも意味します。
オフスレッドデコーディングは、多くのアイコンを同時にレンダリングする必要がある場合に特に重要です。内部アプリでは、Androidのベクタードローアブルを使用する際に大幅なパフォーマンス向上を実現しました。
ベクタードローアブルなどのリソースタイプの活用は、品質を失うことなく画像を表示する完璧な方法であり、すべての画面密度に対して画像タイプを含める必要がないため、APKファイルのサイズ削減につながります。さらに、ベクタードローアブルは読み込まれるとメモリから一度コピーされるため、同じアイコンを複数回レンダリングする場合、すべて同時に表示されます。
トレードオフ
drawable XMLリソースは完璧ではなく、使用には制約があることに注意することが重要です：
- Androidアプリケーションのビルド時に参照される必要があります。これらのリソースは、生のXMLをバイナリXMLに変換するAndroid Asset Packaging Tool（AAPT）を使用したビルドステップに渡されます。Androidは生のXMLファイルの読み込みをサポートしていません。これは既知の制限です。
- Metroによってネットワーク経由で読み込むことはできません。
- XMLリソースのディレクトリや名前を変更した場合、毎回Androidアプリケーションを再ビルドする必要があります。
- 寸法がありません。デフォルトでは0x0サイズで表示され、表示するには幅と高さを提供する必要があります。
- 実行時に完全にカスタマイズできません。寸法や全体的なティント色のみ制御できますが、ストローク幅、境界半径、色などのリソース内の個々の要素属性をカスタマイズすることはできません。これらのタイプのカスタマイズには、XMLリソースの異なるバリアントが必要です。
info
AndroidのベクタードローアブルはReact-native-svgなどのライブラリの1:1の代替品ではありません。これらは特にAndroid用に設計されており、iOSでは動作しません。すべてのプラットフォームで同じSVGを使用したい場合は、react-native-svgを使い続ける必要があります。ベクタードローアブルは、カスタマイズ性を犠牲にしてパフォーマンス上の利点を提供するだけです。
iOSでのReactNativeFactory
React Native 0.78では、iOSでのReact Nativeの統合を改善しました。このバージョンでは、AppDelegateを必要とせずにReact Nativeのインスタンスを作成できるRCTReactNativeFactoryという新しいクラスを導入しています。これにより、例えばViewControllerで新しいバージョンのReact Nativeを作成できるようになります。
これにより、Brownfieldアプリとの統合が劇的に簡素化されます。
アプリのView ControllerでReact Nativeビューを表示したいとします。React Native 0.78以降では、このガイドに示されているようにすべての依存関係をインストールした後、このコードを追加するだけです：
+ import React
+ import React_RCTAppDelegate
public class ViewController {
+ var reactNativeFactory: RCTReactNativeFactory?
+ var reactNativeDelegate: ReactNativeDelegate?
public func viewdidLoad() {
super.viewDidLoad()
+ reactNativeDelegate = ReactNativeDelegate()
+ reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeDelegate!)
+ view = reactNativeFactory.rootViewFactory.view(withModuleName: "")
}
}
+ class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
+ override func sourceURL(for bridge: RCTBridge) -> URL? {
+ self.bundleURL()
+ }
+
+ override func bundleURL() -> URL? {
+ #if DEBUG
+ RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
+ #else
+ Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+ #endif
+ }
+ }
React Nativeは、そのView Controllerにナビゲートするとすぐに読み込まれます。このコードはRCTReactNativeFactoryを作成し、それにデリゲートを割り当て、React Nativeのビュー用のrootViewを作成するよう要求します。デリゲートは下で定義されており、sourceURLとbundleURLプロパティをオーバーライドして、React Nativeがビューに読み込むJSバンドルをどこで見つけられるかを伝えます。
その他の破壊的変更
全般
- React Native DevTools
- FuseboxClient CDP domainの削除
- Codegen
- コンポーネント配列タイプとコマンド配列タイプの分離
Android
- Nullability変更：RootViewのKotlinへの移行により、パラメータタイプがnullableから非nullableに変更されました。
- 以下のクラスがpublicからinternalに移動、または削除され、もうアクセスできません：
com.facebook.react.bridge.GuardedResultAsyncTaskcom.facebook.react.uimanager.ComponentNameResolvercom.facebook.react.uimanager.FabricViewStateManagercom.facebook.react.views.text.frescosupport.FrescoBasedReactTextInlineImageViewManager
iOS
- Image load eventのサイズ情報を論理サイズからピクセルに変更（これはOld Architectureのみに影響します）
謝辞
React Native 0.78には、87人の貢献者による509以上のコミットが含まれています。すべてのハードワークに感謝します！
このリリース投稿で機能の文書化に取り組んだすべての追加著者に感謝します：
- React NativeでのReact 19機能の徹底的なテストを行ったDream11チーム
- Faster Releasesの作業を行ったNicola Corti
- Metroログオプトインの作業を行ったAlex Hunt
- Android XML Drawable Supportの作業を行ったPeter Abbondanzo
- ReactNativeFactoryの作業を行ったOskar Kwaśniewski
0.78へのアップグレード
既存のプロジェクトについては、アップグレードドキュメントに加えて、React Native Upgrade Helperを使用してReact Nativeバージョン間のコード変更を確認してください。
新しいプロジェクトを作成するには：
npx @react-native-community/cli@latest init MyProject --version latest
Expoを使用している場合、React Native 0.78はExpo SDKのcanaryリリースでサポートされます。
info
0.78は現在React Nativeの最新安定版であり、0.75.xはサポート対象外になります。詳細については、React Nativeのサポートポリシーをご覧ください。近い将来、0.75の最終的なend-of-lifeアップデートを公開する予定です。