Zenn
🎉

React Native 0.76 の新機能まとめ

2024/11/19に公開
React Native
tech

https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture

新機能

新しいアーキテクチャ

Suspense, Transition, Automatic Batching, useLayoutEffect など、Reactの最新機能がフルサポートされます。
また、新しいNative Module, Native Component が追加されます。これらを使うことで、ネイティブインターフェースに直接アクセスでき、型安全なコードを書くことができるようになります。

React Native DevTools

React Native DevTools front-end

React Native Debugger に代わる新しいデバッグ用ツールです。
React DevToolsと統合された点や、アプリのリロード・リビルドをしても接続が維持されるようになった点は便利そうに思います。Performance, Network パネルの実装はまだとのことなので、今後の開発に期待したいですね。

Metroの高速化

Metroの改善により Warm Build が約4倍高速化したそうです。

Style Props の追加

boxShadow

New boxShadow style prop

Androidで影をつけるには elevation を使うしかなかったのが解決されます。

filter

Filters demonstration

Breaking Changes

@react-native-community/cli への依存の削除

今後も使い続ける場合は devDependencies への追加が必要です。

//…
  “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軽量化し, 起動時間が最大15ms短縮されるそうです。

MainApplication.kt の 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)
  }
}

Minimun SDKの変更

最低必要なSDKバージョンの要件が以下の通りに変更されます。

  • iOS - from 13.4 to 15.1
  • Android - from SDK 23 to SDK 24 (Android 7)

その他の変更

  • ループするアニメーションで React に状態更新を送信しないようになりました。

  • 新しいアーキテクチャにおいて、 DevToolsのApp Element Inspectorから perf, network タブが削除されました。(RFC)

  • TextLayoutManager で AttributedString の代わりに AttributedStringBox を常に使うようになりました。

Android

  • ビューの背景は直接 ReactViewBackgroundDrawable または CSSBackgroundDrawable とはならなくなりました。

iOS

  • 純粋な Cxx モジュールを自動リンクするための RCT_EXPORT_CXX_MODULE_EXPERIMENTAL マクロが削除されました。

0.76へのアップデート方法

React Native Upgrade Helper を使えば各バージョンからのアップデートに必要な対応がわかります。
Expoの場合は同様に Native Project upgrade Helper を使って Expo SDK 52 にアップデートしてください。

感想

Reactの新機能が使えたり、型安全なネイティブモジュールを書けたりと、新しいアーキテクチャを導入するメリットはかなり大きそうです。なるべく早めにアップデートしたいところですね。
また、フレームワークの開発を奨励していくとのことで、今後Expo以外の選択肢が出てくるかもしれないので、それも楽しみです。

Discussion