React Native 0.77 - New Styling Features, Android’s 16KB page support, Swift Template

本日、React Native 0.77のリリースを発表できることを嬉しく思います！このリリースでは、display: contents、boxSizing、mixBlendMode、outline関連プロパティのサポートなど、より強力なレイアウトオプションを提供する新しいスタイリング機能、新しいAndroidデバイスとの互換性のためのAndroid 16KBページサポートなど、いくつかの機能が提供されます。また、コミュニティテンプレートをSwiftに移行してモダン化しつつ、Objective-Cを好む開発者のために引き続きObjective-Cのサポートと互換性を維持します。

ハイライト

• より良いレイアウト、サイジング、ブレンディングのための新しいCSS機能
• Android version 15サポート & 16KBページサポート
• コミュニティCLIとテンプレートの更新

破壊的変更

• Metroでのconsole.log()ストリーミングの削除

ハイライト

より良いレイアウト、サイジング、ブレンディングのための新しいCSS機能

React Native 0.77は、React NativeをWebと整合させるという目標をさらに推進します。アプリのレイアウト、サイジング、ブレンディングをより細かく制御できるよう、新しいCSSプロパティのサポートを追加しました。これらの変更により、複雑なレイアウトの簡素化、テクスチャの追加、アプリのアクセシビリティ向上に役立ちます。

注意 これらの新機能はすべて、New Architectureでのみ利用可能です。

display: contentsによるシンプルなレイアウト

display: contentsプロパティを使用すると、要素をレイアウト構造から消失させながら、その子要素は親要素の直接の子要素であるかのようにレンダリングされます。これは、レイアウトに影響を与えることなく子要素にスタイルを適用したい場合、イベントを処理する必要があるラッパーコンポーネントを構築する場合、またはShadowTreeと相互作用する必要がある場合に便利です。

技術的には、display: contentsは、レイアウトボックスを生成せずに要素をレンダリングしますが、要素の子のレイアウトボックスは保持されます。display: contentsを持つ要素は、ビュー階層から効果的にフラット化されます。

ボックスサイジング

boxSizingプロパティは、要素の様々なサイジングプロパティ（width、height、minWidth、minHeightなど）がどのように計算されるかを定義します。boxSizingがborder-boxの場合、これらのサイズは要素のボーダーボックスに適用されます。content-boxの場合、コンテンツボックスに適用されます。デフォルト値はborder-boxで、これはWebでのデフォルト値とは異なります。

警告 border-boxは長い間デフォルトであり、content-boxを追加するまでは唯一のboxSizing値でした。デフォルトを変更することは、突然いくつかのレイアウトを破壊する破壊的変更になったでしょう。後方互換性を確保するため、border-boxをデフォルト値として保持することにしました。

CSS mixBlendMode

mixBlendModeプロパティを使用すると、要素がそのスタッキングコンテキスト内の他の要素とどのように色をブレンドするかを制御できます。各ブレンディング機能の完全な概要については、MDNドキュメントを確認してください。

ブレンドされるものをより細かく制御するために、isolationプロパティも追加しました。Viewにisolation: isolateを設定すると、スタッキングコンテキストを強制的に形成します。

mixBlendMode値

• normal: 要素はブレンドなしで背景の上に描画されます
• multiply: ソースカラーがデスティネーションカラーで乗算され、デスティネーションを置き換えます
• screen: バックドロップとソースカラー値の補色を乗算し、結果を補色化します
• overlay: バックドロップカラー値に応じて、色を乗算またはスクリーンします
• darken: バックドロップとソースカラーの暗い方を選択します
• lighten: バックドロップとソースカラーの明るい方を選択します
• color-dodge: ソースカラーを反映するようにバックドロップカラーを明るくします
• color-burn: ソースカラーを反映するようにバックドロップカラーを暗くします
• hard-light: ソースカラー値に応じて、色を乗算またはスクリーンします
• soft-light: ソースカラー値に応じて、色を暗くまたは明るくします
• difference: 2つの構成色の暗い方を明るい色から減算します
• exclusion: Differenceモードに似た効果を生成しますが、コントラストが低くなります
• hue: ソースカラーの色相とバックドロップカラーの彩度と輝度で色を作成します
• saturation: ソースカラーの彩度とバックドロップカラーの色相と輝度で色を作成します
• color: ソースカラーの色相と彩度、バックドロップカラーの輝度で色を作成します
• luminosity: ソースカラーの輝度とバックドロップカラーの色相と彩度で色を作成します

Outlineプロパティ

outlineWidth、outlineStyle、outlineSpread、outlineColorも導入しました。これらのoutlineプロパティは、それぞれのborderプロパティと非常に似た動作をしますが、パディングボックスの周りではなく、ボーダーボックスの周りにレンダリングされます。これらのプロパティにより、レイアウトに影響を与えることなく、アウトラインを描画して要素をハイライトできます。

Android version 15サポート & 16KBページサポート

Android 15での強制エッジツーエッジ

前回のリリースでAndroid 15をサポートするための作業をすでに行いました。Android 15の注目すべき変更の1つは、targetSdk 35でアプリを構築する際の強制エッジツーエッジ表示です。まだこれを検討していない場合は、これを無視するとアプリのUIが破損する可能性があるため、これをどのように処理すべきかについての以前の推奨事項を参照してください。

注意 アプリでreact-native-safe-area-contextを使用している場合、ライブラリがすでに強制エッジツーエッジを処理しています。

Android用16KBページサイズサポート

Android 15では、16KBメモリページサイズのサポートが導入され、アプリのパフォーマンス向上などが可能になりますが、以前の4KBベースのアプリが将来のデバイスで互換性がない可能性があります。現在、開発者が16KBページサイズがOSのデフォルトになることに備えて、選択されたデバイスでテストするためのオプトイン機能です。

0.77リリースにより、React Nativeは16KBページサイズを完全にサポートする準備が整い、開発者はそれを使用して16KBデバイス用のアプリをテストおよび出荷できるようになります。

コミュニティCLIとテンプレートの更新

コミュニティCLI: react-native init の非推奨化

このバージョンでは、React Native 0.75で導入されたreact-native initコマンドの非推奨化が完全に完了しました。念のため、react-native initコマンドはもう使用できませんが、以下のいずれかを使用する必要があります：

• 新しいプロジェクトを作成するための専用コマンドを持つExpoなどのフレームワークを使用：npx create-expo-app
• コミュニティCLIを直接呼び出し：npx @react-native-community/cli init

コミュニティCLI: Metroからの「iOS/Androidで実行」キーハンドラーの削除

このバージョンでは、Metroから'a'と'i'のキーボードショートカットを削除しました。これらのショートカットは、run-androidとrun-iosコミュニティCLIコマンドを呼び出すために使用されていました。これらのキーボードショートカットは開発者体験が悪く、ほとんど使用されていませんでした。さらに、フレームワークがターミナル出力を調整するのにより適していると考えています。

コミュニティテンプレート: iOSアプリのプログラミング言語としてのSwift

注意 Expoを使用するプロジェクトは、この変更の影響を受けません。

この変更により、3つのファイル（main.m、AppDelegate.h、AppDelegate.mm）を単一の新しいAppDelegate.swiftに置き換えることで、コミュニティテンプレートをスリム化できました。

これは技術的には破壊的変更です。アップグレードヘルパーでObjective-CからSwiftへの変更を確認できます。

Swiftに移行する必要はありません。iOSコミュニティテンプレートのObjective-C++バリアントは引き続きサポートされています（ただし、RCTAppDependencyProviderを統合する必要があります）。

新しいプロジェクトは、iOSアプリ言語としてSwiftを使用して生成されますが、必要に応じていつでもObjective-Cに戻すことができます。

制限事項

アプリにC++で書かれたローカルモジュールがある場合、このガイドで示されているようにSwiftでそれらを登録することはできません。アプリがこのカテゴリに該当する場合は、AppDelegateのSwiftへの移行をスキップし、アプリでObjective-C++を使い続けてください。

React Nativeコアは、iOSとAndroidおよび他のプラットフォーム間でのコード共有を促進するために、主にC++を使用して開発されています。SwiftとC++間の相互運用性はまだ成熟しておらず、安定していません。このギャップを埋めて、Swiftへの移行も可能にする方法を検討しています。

RCTAppDependencyProvider

React Native 0.77では、アプリがサードパーティの依存関係を読み込む方法が若干変更されます。これは、見逃すとランタイムの問題を引き起こす可能性があるコミュニティテンプレートの新しい行です。必ずアプリに追加してください。

同等のObjective-Cの行は以下の通りです：

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <ReactAppDependencyProvider/RCTAppDependencyProvider.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"";
  self.dependencyProvider = [RCTAppDependencyProvider new];
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

// remaining of the AppDelegate

破壊的変更

Metroでのconsole.log()ストリーミングの削除

React Nativeデバッグのすべての側面が確実に動作し、現代的な機能と一致することを望んでいます。