React Native 0.76 リリース
本日、React Native 0.76 をリリースします！本リリースは大きなマイルストーンであり、New Architecture をプロジェクトでデフォルト有効化し、React Native DevTools を導入します。これはチームと素晴らしいコミュニティの開発者の6年にわたる取り組みの結実です。
ハイライト
- React Native New Architecture をデフォルトで有効化
- React Native DevTools（安定版リリース）
- Metro の解決（resolver）が高速化
boxShadow と filter スタイルプロップ（New Architecture 専用）- Breaking Changes（互換性に注意）
@react-native-community/cli への依存を除去- ネイティブライブラリのマージにより Android アプリが約 3.8MB 小さくなる
- 最低 iOS / Android SDK 要件の更新
React Native New Architecture をデフォルトで有効化
React Native 0.76 から、プロジェクトでは New Architecture がデフォルトで有効になります。New Architecture は内部実装の書き直しで、React を用いて高品質なネイティブアプリを構築できるように設計されています。本日、New Architecture を本番利用可能と宣言します。本変更が何を含み、今後の React Native にどのように影響するかは、専用ブログポスト「The New Architecture is Here」をご参照ください。
React Native DevTools
React Native DevTools の最初の安定版をリリースします。これは新しいデフォルトのデバッグ体験で、React を複数プラットフォームでデバッグするためのツールを信頼性・親和性・シンプルさ・一貫性を持って提供します。React Native DevTools はブラウザに近い開発者ツールとして React Native に深く統合されています。
主な機能:
- 親しみのあるブラウザ準拠のツール：Chrome DevTools ベースの完全なデバッガ（信頼できるブレークポイント、watch、ステップ実行、スタック検査、充実した JavaScript コンソール）。これらのコア機能はリロード後も安定して動作します。
- 統合された React DevTools：組み込みの Components Inspector と Profiler がシームレスに動作し、コンポーネントのハイライトがより高速かつ信頼性を向上。
- UX の改善：ブレークポイントで一時停止していることを示す「Paused in Debugger」オーバーレイ。LogBox の警告は要約表示され、DevTools 接続時には非表示になります。
- 再接続挙動の改善：JavaScript ブレークポイントはリロードや DevTools の切断・再接続後でも信頼して動作します。ネイティブ再ビルド後に同じアプリへ再接続することも可能です。
- 即時起動：ゼロコンフィグでデフォルト有効。アプリ内の Dev Menu から開くか、CLI サーバでデバッグする場合は
j で起動できます。CLI サーバは複数のエミュレータ・デバイスをサポートします。
注意点:
React Native DevTools はこれまでのデバッグオプション（0.73 で導入された Experimental Debugger など）と根本的に異なります。過去1年で再構築した新しいバックエンドデバッグスタックに切り替えているため、以前のツールとの互換性が変わっています。エンドツーエンドでより信頼性の高い体験を提供するための基盤であり、将来的には Performance や Network パネルなどの機能を安定的に実装していく予定です。
Metro のログ転送（logs in Metro）の段階的廃止
次回リリースでは、Metro におけるフォワードログを廃止し、モダンなブラウザツールに合わせる予定です。古いデバッグ統合を削除する代わりに、ログ用途は React Native DevTools の Console パネルを使用してください。詳しくは FAQs をご確認ください。
リンク:
- Updated debugging docs
- Announcement talk at React Universe Conf
- Feedback thread and FAQs
Faster Metro resolution
Metro の resolver（import パスからモジュールを見つけるコンポーネント）に対する複数のパフォーマンス改善を行い、resolver 自体は約 15x 高速になりました。これにより Metro 全体のパフォーマンスが向上し、特にウォームビルドでは約 4x の高速化を観測しています。
Box Shadow と Filter スタイルプロップ
0.76 では New Architecture 専用のスタイルプロップとして boxShadow と filter を追加しました。どちらも Web に存在するプロパティで、可能な限り仕様に準拠しているため予測可能で導入が容易です（例外は制限・仕様差分の項を参照）。Web のドキュメントを参照すると各プロパティの理解に役立ちます。
boxShadow
boxShadow は要素に影を追加し、位置・色・サイズ・ぼかし具合を制御できます。MDN のドキュメントに各引数の概要と試せる fiddle が掲載されています。
- フォーマット: 文字列（CSS 語法を模倣）または JS オブジェクト（変数を埋め込める）。
- 例：
'5 5 5 0 rgba(255, 0, 0, 0.5)' と {offsetX: 5, offsetY: 5, blurRadius: 5, spreadDistance: 0, color: 'rgba(255, 0, 0, 0.5)'} は同等の影になります。
以前の影機能の欠点（今は boxShadow で対応）:
- Android で動作しない
- inset にできない
- spread がない
- 背景色がない View では動作しない
- 別プロップだったため Web と同じ構文を共有できない
制限および仕様差分:
- デフォルトの影の色は親の色ではなく黒
- Android の通常シャドウは Android 9+ をサポート
- Android の inset シャドウは Android 10+ をサポート
filter
filter は要素に対してグラフィカルなフィルタを適用します。明るさ・彩度・色相などのカラー系フィルタと、ぼかしやシャドウなどの非カラー系フィルタがあります。MDN に各関数の詳細と fiddle が載っています。
- 例: 左から順にフィルタ無し、
saturate、blur、invert を適用した画像など。
- フォーマット: 文字列（CSS 語法）または JS オブジェクトの配列（変数を埋め込める）。
- 例：
'saturate(0.5) grayscale(0.25)' と [{saturate: 0.5}, {grayscale: 0.25}] は同じフィルタを表します。
filter の dropShadow は boxShadow と少し異なります:
dropShadow はアルファマスクで、ピクセルのアルファがゼロでない場合にのみ影が落ちます。boxShadow は要素の境界ボックス周りに影を落とします（内部が空でも影が落ちる）。dropShadow には spread 距離がなく、inset にできません。
制限および仕様差分:
- iOS の
filter は brightness と opacity のみサポート
- iOS の
filter は影・アウトラインなど、要素境界外のグラフィカル要素には適用されない
- Android の
blur と drop-shadow は Android 12+ のみサポート
filter は overflow: hidden を暗黙的に意味するため、フィルタ付き要素の子が親の境界外に配置されるとクリップされる
Breaking Changes
@react-native-community/cli への依存を除去
0.75 で共有した通り、React Native はフレームワークに依存しない方向を目指しています。今回、@react-native-community/cli を React Native の直接依存から除去しました。CLI と React Native を切り離すことで、それぞれ独立してより速くリリースできるようになります。
CLI を日常ワークフローで利用している場合は、package.json に CLI 依存を明示的に追加してください（例）：
//…
"devDependencies": {
// …
+ "@react-native-community/cli": "15.0.0",
+ "@react-native-community/cli-platform-android": "15.0.0",
+ "@react-native-community/cli-platform-ios": "15.0.0",
},
ネイティブライブラリのマージにより Android アプリが約 3.8MB 小さく
React Native 0.76 では多くのネイティブコードを単一のライブラリ libreactnative.so にマージしました。これによりアプリサイズの削減と Android でのアプリ起動パフォーマンスが向上します。ベンチマークではアプリサイズが約 3.8MB（全体の約 20%）削減、中央値のアプリ起動時間が約 15ms（約 8%）短縮されました（source）。
ただし、これはアプリ・ライブラリの開発者にとって破壊的変更です。アプリ開発者は Application の onCreate を次のように更新する必要があります:
+ import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader
class MainApplication : Application(), ReactApplication {
override fun onCreate() {
super.onCreate()
+ SoLoader.init(this, OpenSourceMergedSoMapping)
- SoLoader.init(this, false)
}
}
この変更は libreactnative.so を正しく読み込むために必要で、upgrade-helper にも含まれています。カスタム C++ コードを持つライブラリ作者は影響を受ける可能性があります。技術的な詳細やライブラリ作者向けの提案は専用ポストを参照してください。
最低 iOS / Android SDK 要件の更新
- iOS: 13.4 から 15.1 へ
- Android: SDK 23 から SDK 24 (Android 7) へ
この変更は 0.75 のリリース時に既に告知済みです。背景については Android / iOS の専用ポストを参照してください。
その他の Breaking Changes
- Animation: ループするアニメーションで React への状態更新送信を停止。ループ時の不必要な再レンダを防止。
- devtools: New Arch 下で Inspector パネル、perf + network タブを削除（RFC）。
- text engine: TextLayoutManager では
AttributedStringBox を常に使用し、AttributedString を使用しない。
- Android rendering: View の背景は直接
ReactViewBackgroundDrawable または CSSBackgroundDrawable ではなくなった。
- iOS turbomodule: autolinking 用の純粋な Cxx モジュール向けに
RCT_EXPORT_CXX_MODULE_EXPERIMENTAL マクロを削除。
謝辞
React Native 0.76 には156名のコントリビュータによる1,070以上のコミットが含まれています。皆さまの多大な貢献に感謝します！
追加で本リリース記事のドキュメント作成に貢献した著者（抜粋）:
- Joe Vilches と Nick Gerleman —
box-shadow と filter スタイルプロップ
- Alex Hunt — React Native DevTools
- Nicola Corti — Android を単一ライブラリとして出荷
0.76 へのアップグレード
既存プロジェクトの差分確認には React Native Upgrade Helper と Upgrading ドキュメントを利用してください。Expo を使用している場合、React Native 0.76 は Expo SDK 52 でサポートされます。
新プロジェクトを CLI で作成するには次のコマンドを実行してください:
npx @ react - native -community / cli @ latest init MyProject -- version latest
info: 0.76 は現在の最新の安定版であり、0.73.x はサポート対象外になります。詳細は React Native のサポートポリシーを参照してください。近いうちに 0.73 の最終 EOL アップデートを公開する予定です。