React Native 0.72 - Symlink Support, Better Errors, and more

本日、React Native 0.72をリリースします！

このリリースでは、Metro向けに多く要望されていた機能、エラー処理の改善、その他開発体験（DX）の向上を含みます。これらの多くは2022年のコミュニティ調査でのフィードバックから優先度付けされたものです — ご協力いただいた皆様、ありがとうございます。

ハイライト

• 新しい Metro 機能
• 開発体験の改善
• New Architecture の移動（更新の届け先の変更）
• Breaking Changes（破壊的変更）
• 非推奨コンポーネントの削除
• パッケージ名の変更

New Metro Features

Symlink Support (Beta)

Symlink（シンボリックリンク）サポートはMetroで最も要望の多い機能の一つであり、React Native 0.72ではベータサポートを提供します。これにより、monorepo構成やpnpmといった環境でReact Nativeが透過的に動作し、これまで必要だったワークアラウンドを不要にします。アプリで使うには "Enabling Beta Features" を参照してください。現在はさまざまなワークフローに対する開発体験に関するフィードバックを収集するためベータ段階です。0.73でデフォルト有効化する予定です。

Package Exports Support (Beta)

Package Exportsは package.json の main フィールドの現代的な代替で、npmパッケージが公開APIやReact Native向けのターゲットを定義する新しい機能です。Metro構成でPackage Exportsサポートを有効にすると、アプリは新しい "react-native" community condition を含むより広いJavaScriptエコシステムと互換になります。アプリで使うには "Enabling Beta Features" を参照してください。

ヒント: Package Exports Support in React Native を参照して、この機能と安定化の計画について詳しく確認してください。

ベータ機能の有効化方法

プロジェクトでこれらの機能を有効にするには、アプリの metro.config.js を更新し、resolver.unstable_enableSymlinks または resolver.unstable_enablePackageExports オプションを設定します。

const config = {
  // ...
  resolver: {
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true,
  },
};

新しい metro.config.js のセットアップ

React Native CLI内のMetroの設定読み込み方法を0.72で変更しました。プロジェクトの metro.config.js をテンプレートのバージョンに合わせて更新してください。

info: 以下のフォーマットにconfigファイルを更新してください。アップグレードには upgrade-helper に従うこともできます。これらの metro.config.js のフォーマット変更は0.73で必須になります。0.72では更新していない場合に警告を出します。

この変更により、base React Native Metro config の拡張方法をプロジェクト側で制御できるようになり、残されたデフォルト設定を整理しました。加えて、metro get-dependencies のような独立した Metro CLI コマンドも正常に動作するようになります。

Developer Experience Improvements

無効なスタイルプロパティで赤いエラー画面（redbox）が出なくなりました

以前は StyleSheet に無効なスタイルプロパティを与えるとredboxが表示され、高信号のエラーとして開発フローを中断していました。0.72では、この挙動をブラウザの無効なCSSプロパティと同様にサイレントに失敗するように緩和し、一部のエラーは実行時ではなく型チェック時に検出できるように型定義を更新しました。

Hermes のエラー可読性の向上

Hermesは、未定義の呼び出し可能を呼ぼうとした際によりわかりやすいエラーメッセージを追加しました。

var x = undefined;
x();
// Before: undefined is not a function
// After: x is not a function (it is undefined)

さらに、LogBox のスタックトレースからアプリ利用者にとって関係の薄い内部の Hermes バイトコードフレームをフィルタリングするようになりました。

React Native CLI のエラー出力の改善

0.72には React Native CLI v11 が同梱され、init、run-android、run-ios などのコマンドで重複の削減、文言の明確化、冗長なスタックトレースの縮小、関連ドキュメントへのディープリンク追加などの改善が含まれています。その他の改善点は React Native CLI の changelogs を参照してください。

Hermes における高速化（コンパイルとJSONパース）

Hermesは大きなオブジェクトリテラルのコンパイル時間を改善しました。例えば、ある報告（#852）ではデータセット全体が大きなオブジェクトリテラルとして書かれており、Hermesが使用する重複除去アルゴリズムを改善することでコンパイルが97%高速化されました（221c）。これらの改善は多くのオブジェクトをバンドルするアプリのビルド時間に有益です。

JSONパースにも複数の最適化（de9c、6e2d）が入り、redux-persist のようにJSON操作を多用するライブラリを使うアプリに恩恵があります。

Hermes の ECMAScript サポート拡張

以下の仕様サポートがHermesに導入されました（React Native 0.72）：

• Array.prototype.at / TypedArray / String.prototype.at のサポート（see #823、ebe2）
• 正しく整形された JSON.stringify の実装（d41d）により不正なUnicode文字列を防止
• AggregateError の実装（9b25） — Promise.any() のように複数のエラーをまとめて表現するために有用

JSC を使っているユーザーにとっては、これらの機能はすでに利用可能です。

Moving New Architecture Updates

New Architecture は現在実験的です。対象となるユーザーにフォーカスした更新にするため、0.72以降の New Architecture に関する更新は専用の working group に移動します。この変更により、nightlyでリリースされる作業のような、より頻繁な更新を行いやすくなります。0.72 の New Architecture に関する更新内容は こちら で読めます。New Architecture の進捗を追いたい場合は、working group の GitHub 通知を購読してください。

Breaking Changes

非推奨コンポーネントの削除

以下のパッケージは React Native 0.72 から削除されました。推奨される community パッケージへ移行してください。

• Slider は @react-native-community/slider に置き換えられました
• DatePickerIOS は @react-native-community/datetimepicker に置き換えられました
• ProgressViewIOS は @react-native-community/progress-view に置き換えられました

パッケージ名の変更

react-native core リポジトリから公開されているすべてのパッケージは現在 react-native/packages 配下に移動し、所有権を明確にするために @react-native npm スコープで公開されます。react-native パッケージ自体に変更はありません。

変更に該当するパッケージは以下の通りです（旧名 → 新名）：

• @react-native-community/eslint-config → @react-native/eslint-config
• @react-native-community/eslint-plugin → @react-native/eslint-plugin
• @react-native/polyfills → @react-native/js-polyfills
• @react-native/normalize-color → @react-native/normalize-colors
• @react-native/assets → @react-native/assets-registry
• react-native-codegen → @react-native/codegen
• react-native-gradle-plugin → @react-native/gradle-plugin

この変更は、これらの名前を直接依存関係として持っていない場合は影響しません。影響がある場合は、React Native 0.72 にアップグレードする際にリネームされた依存関係を ~0.72 バージョンに更新してください。これらの変更に至った動機は専用の RFC を参照してください。

謝辞

多くの改善はコミュニティからの直接のフィードバックに基づいています。ノイジーな redbox の報告、Package Exports に関するバグ、New Architecture のベンチマークなど、すべて貴重なフィードバックでした。0.72 には66名のコントリビュータによる1100件以上のコミットが含まれています。皆さんのおかげで成り立っています、ありがとうございます。

0.72 へのアップグレード

アップグレードに必要な変更の一覧は upgrade-helper を確認するか、既存プロジェクトの更新方法についてはアップグレードドキュメントを参照してください。新規プロジェクトを作成するには次を実行します:

npx react-native@latest init MyProject

Expoを使用している場合、React Native 0.72 は Expo SDK 49 でサポートされます。

info: 0.72 は現在の最新の安定版で、0.69.x 系はサポート対象外になりました。詳細は React Native の support policy を参照してください。