Zenn
🔖

【RN Update 2024年4月】React Native v0.74がリリース 他

2024/04/30に公開
React Native
React
TypeScript
tech

はじめに

こんにちは！
犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です。

https://www.oto-trip.com/

この記事では、今月の React Native に関連するニュースを紹介します。

目次

  • ライブラリ情報
    • 【React Native】 v0.74 がリリース
    • 【React Native Vision Camera】 v4 がリリース
    • 【React Native Screen】 カスタム遷移アニメーションをサポート
  • React Native 関連情報
    • App Center の終了

ライブラリ情報。

【React Native】 v0.74 がリリース

React Native v0.74 がリリースされました！

https://reactnative.dev/blog/2024/04/22/release-0.74

主なアップデートは以下のとおりです。

  • Yoga 3.0
  • New Architecture - Bridgeless モードサポート

Expo SDK 51 のベータ版でも React Native v0.74 に対応しているようなので、Expo の追随もすぐのようです。

Yoga 3.0

Yoga 3.0 では、align-content: 'space-evenly'やposition: 'static'などがサポートされました。またabsolute下の子要素のJustifyやAlignのバグが修正されています。
詳しくは、公式リリースをご覧ください。

New Architecture - Bridgeless モードサポート

Bridgeless モードは New Architecture の最後の重要な要素だそうです。React Native v0.74 以降、New Architecture を On にするとデフォルトで Bridgeless モードが On になります。
Bridgeless モードは、React Native v0.72 の頃から導入が進められていた Interop Layer をさらに進めた物で、すべてのコンポーネントが New Architecture に対応していなくても移行可能にするためのモード、だと思います。（私の環境で試せていないので、確証はありません。。。）

こちらの discussionsにて想定通りではない動きに対する意見を求めているようですので、もしご意見ある方はどうぞ。また、ライブラリに関する情報については、こちらの discussionsにて意見を求めているようで、new-arch-helperというライブラリを利用すると自分が利用してるライブラリの対応状況が一覧できるみたいです。

【React Native Vision Camera】 v4 がリリース

React Native Vision Camera の v4 がリリースされました！

https://github.com/mrousavy/react-native-vision-camera/releases/tag/v4.0.0

主なアップデートとして、v3 にて諦められていた Skia フレームプロセッサが導入されました！
これによりフレーム上に 2D 描画が React Native Skia を用いてより簡便になりました。

利用方法は簡単で、useSkiaFrameProcessorを呼び出すだけのようです。

const frameProcessor = useSkiaFrameProcessor((frame) => {
  'worklet';

  // draw frame itself
  frame.render();

  // draw red rectangle into center of frame
  const centerX = frame.width / 2;
  const centerY = frame.height / 2;
  const rect = Skia.XYWHRect(centerX, centerY, 150, 150);
  const paint = Skia.Paint();
  paint.setColor(Skia.Color('red'));
  frame.drawRect(rect, paint);
}, []);

Skia フレームプロセッサは現在プレビュー段階ですので、キャプチャ写真を保存することができないなど、まだ開発途上のようです。
詳細は、公式ドキュメントに情報更新されていますので、そちらをご覧ください。

また v4 では、Skia フレームプロセッサ以外にも CameraX の書き換えによる Android での動作安定性向上や GPS 位置タグ機能の追加など、大幅にアップデートしています。

【React Native Screen】 カスタム遷移アニメーションをサポート

React Native Screen でカスタム遷移アニメーションをサポートされました！
これによりジェスチャーによる遷移アニメーションに新たな機能が追加されました。

デモ動画がありますので、そちらをご覧ください。

https://www.youtube.com/watch?v=UYhOULSwjAg&t=4523s

React Native Reanimated では、2024 年 4 月 30 日現在 v3.9.0-rc.0 のみで利用可能なようです。
Reanimated への統合を首を長くして待ちましょう。

React Native 関連情報

App Center の終了

Microsoft の App Center が 2025 年 3 月 31 日に終了するようです。

https://learn.microsoft.com/en-us/appcenter/retirement

App Center とは、React Native に限らず iOS、Android など多くのアプリを配信するための CI/CD サービスです。
CodePush という JavaScript Layer を審査なしで配信するための over the air (OTA) と呼ばれる仕組みがあるのが特徴です。それが来年に廃止されるようです。
OTA が必要な場合は、Expo が提供する EAS に移行する必要があります。

React Native における Expo の役割は、ますます大きくなりそうですね。

最後に

ここまで読んでいただきありがとうございました。

もし犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください！

https://www.oto-trip.com/

Discussion