【RN Update 2023年9月】React Native Vision Camera v3がリリース 他
はじめに
こんにちは！
犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です。
この記事では、今月のReact Nativeに関連するニュースを紹介します。
目次
- ライブラリ情報
- 【React Native Vision Camera】 v3がリリース
- 【react-native-permissions】 新たなiOS向けセットアップ方法を公開
- 【React Native Reanimated】 新しいドキュメントを公開
- React Native関連情報
- React Native EU 2023 開催
- Bun v1リリース
ライブラリ情報
【React Native Vision Camera】 v3がリリース
React Native Vision Cameraのv3がついにリリースされました！
v3ではAndroidでの全コードベースの書き直しとiOSでの大規模なリファクタリングが実施されています。主要な変更は以下の3つです。
- Androidのリライト
- 新機能の追加
- 新たなフレームプロセッサの採用
Androidのリライト
AndroidのコードベースをCameraXからより低レベルのCamera2ライブラリに完全に書き直されました。これによりパフォーマンスが向上し、起動時間の短縮やフレームレートの改善（60 FPS）、今までAndroidで使用できなかった機能（例：魚眼ズーム）が利用可能になったそうです。また、AndroidにてOpenGL VideoPipelineを構築したことにより、GPU上の処理が非常に高速になるそうです。
一方でAndroidの動作が一部破壊されている可能性も残されているので、利用には最善の注意が必要です。
新機能の追加
主要な新たな機能として、以下の2点があります。
- pixelFormat propの追加
- フレームプロセッサ内でのピクセルフォーマットを指定可能になりました
- enableShutterSoundの追加
- 写真をキャプチャする際に、音を再生するかミュートするかを選択するためのenableShutterSoundがtakePhoto()に追加されました。
これ以外にも多くの新たなフレームプロセッサの機能が追加されています。詳細はリリースノートを直接ご確認ください。
新たなフレームプロセッサの採用
フレームプロセッサは、今までReact Native Reanimatedのものが利用されてきましたが、今回新たなフレームプロセッサ（react-native-worklets-core）が作成されました。これによりReanimatedへの依存がなくなり、セットアップが非常に楽になります。またJSI HostObjectsとHostFunctionsがフレームプロセッサの外部から利用になりreact-native-tfliteのようなJSIライブラリをシームレスに使用できるようになりました。
React Native Skia統合せず
v3の更新状況をご確認されていた方なら心待ちにされていた機能である、React Native Skiaとの統合は断念されました。統合する場合としない場合の両方のコードを保持すると非常に複雑になったからだそうです。
これについては、非常に残念です。
【react-native-permissions】 新たなiOS向けセットアップ方法を公開
今年の3月に以下の記事でReact Native PermissionのiOS向けセットアップ方法が変更されたことを紹介しました。
が、それがさらに今回変更されました。
# with react-native >= 0.72
- # Resolve react_native_pods.rb with node to allow for hoisting
- require Pod::Executable.execute_command('node', ['-p',
- 'require.resolve(
- "react-native/scripts/react_native_pods.rb",
- {paths: [process.argv[1]]},
- )', __dir__]).strip
+ def node_require(script)
+ # Resolve script with node to allow for hoisting
+ require Pod::Executable.execute_command('node', ['-p',
+ "require.resolve(
+ '#{script}',
+ {paths: [process.argv[1]]},
+ )", __dir__]).strip
+ end
+ node_require('react-native/scripts/react_native_pods.rb')
+ node_require('react-native-permissions/scripts/setup.rb')
# …
platform :ios, min_ios_version_supported
prepare_react_native_project!
# ⬇️ uncomment wanted permissions (don't forget to remove the last comma)
setup_permissions([
# 'AppTrackingTransparency',
# 'BluetoothPeripheral',
# 'Calendars',
# 'Camera',
# 'Contacts',
# 'FaceID',
# 'LocationAccuracy',
# 'LocationAlways',
# 'LocationWhenInUse',
# 'MediaLibrary',
# 'Microphone',
# 'Motion',
# 'Notifications',
# 'PhotoLibrary',
# 'PhotoLibraryAddOnly',
# 'Reminders',
# 'SpeechRecognition',
# 'StoreKit'
])
内部的には、以前のreact-native setup-ios-permissionsと同じ挙動をするため、重大な変更ではないとのことです。
iOSに関することをPodfileにまとめたい、という要望が多かったんでしょうね。
【React Native Reanimated】 新しいドキュメントを公開
React Native Reanimatedのドキュメントページが更新されて、内容が新しくなりました！
個人的に、嬉しい変更点は、withTimingアニメーションの引数調整をドキュメント上で実施できるようになった点です。
一つ一つの変数をどのように変化させると思い通りのアニメーションになるのか、めちゃくちゃ視覚的でわかりやすくなりました。触って遊んでいるだけで楽しいです。
React Native関連情報
React Native EU 2023 開催
React Native EU 2023が9月 5, 6日で開催されました。
その様子が、以下のCallstackさんのYoutubeチャンネルで公開されています。
全ての動画を紹介するのは難しいので、少しピックアップします。
React Native EU 2023 Keynote
Keynoteでは、React Native v0.73から搭載されるDevXツールとRuntime Updateに関する説明がありました。
DevXツールはFlipperに変わる新たなデバッグツールで、よりWeb開発の体験に近いデバッカーのようです。
Runtime UpdateではNew ArchitectureとしてInterop Layerの追加が発表されました。この機能により、全てのライブラリがNew Architectureに対応していなくても部分的な移行が可能になるようです。
The day I broke React Native
React Native core teamのNicola Cortiさんから、ある日突然React NativeのAndroidビルドが破壊された出来事について振り返りがありました。
2022年11月4日あの日何があったのか、そしてメンテナーさんたちはどう対応したのか、それらについて詳細に語られていました。
本当にメンテナーさんには感謝しかありませんね。
Bun v1リリース
Bun v1がリリースされました！
それに伴い、React NativeのinitコマンドにもBunが追加されたようです。
$ bunx react-native init AwesomeProject
$ cd AwesomeProject
$ bunx react-native start
これで動かすことが可能です！
ちなみに手元で試してみた感想ですが、起動までの時間はyarnと体感変わらない気がしました。
最後に
ここまで読んでいただきありがとうございました。
もし犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください！
Discussion