Zenn
🔖

【RN Update 2023年3月】react-native-reanimatedがv3リリース 他

2023/03/29に公開
React Native
React
TypeScript
tech

はじめに

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

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

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

目次

  • ライブラリ情報
    • 【react-native-reanimated】 v3リリース
    • 【react-native-permissions】 新たなiOS向けセットアップ方法を公開
    • 【React Native Storybook】 v6がリリース間近
  • React Native関連情報
    • react-native-new-architectureへの3rd party対応状況

ライブラリ情報

【react-native-reanimated】 v3リリース

v3がリリースされました！
リリース記事は以下のとおりです。

https://blog.swmansion.com/releasing-reanimated-3-0-17fab4cb2394

目玉機能は、なんと言ってもShared Element Transitionsです！
詳細な説明は、以下にて詳細に説明しておりますが、是非使ってみたい機能です！

https://zenn.dev/ototrip/articles/tech-rn-reanimated-1

さて、react-native-reanimatedがv3になって大きく変化した点は他にもあります。
それが、react-native-skiaとの統合です。
SkiaとはGoogle Chromeなどに搭載されているCGエンジンのことで、高速に2Dアニメーションを描画することが可能です。
これらが統合されることで、より高速なアニメーション作成が可能になることでしょう。
どんどんキャッチアップしていきたいです！

ただし2023年3月末現在、react-native-vision-cameraにおいてエラーが発生することが報告されています。（該当Issue）
個人的にはreanimated - skia - vision camera連携を期待しているので、解消されることを願います。

【react-native-permissions】 新たなiOS向けセットアップ方法を公開

iOS向けの権限設定方法が、v3.7より大きく変更されました。
以前までPodfileに記載していた以下の内容が一切不要になりました。

-  permissions_path = '../node_modules/react-native-permissions/ios'

-  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
-  pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse"
-  pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications"
-  pod 'Permission-SpeechRecognition', :path => "#{permissions_path}/SpeechRecognition"

その代わりpackage.jsonに以下の内容を追加して、react-native setup-ios-permissionsとコマンド入力でOKだそうです。

{
  "reactNativePermissionsIOS": [
    "Camera",
    "LocationWhenInUse",
    "Notifications",
    "SpeechRecognition"
  ]
}

https://github.com/zoontek/react-native-permissions/releases/tag/3.7.0

【React Native Storybook】 v6がリリース間近

React Native Storybookがいよいよv6リリース間近になったそうです！
リリース記事は以下のとおりです。

https://dev.to/dannyhw/how-to-use-react-native-storybook-server-with-webpack-5-2g16

v6.0.1-alpha.0が出たのが2021年7月ですから、それから1年半以上経ってのRC突入です。
v6の嬉しさポイントとしては、新たな記法が導入されている点ですね。
どのタイミングでStorybook関連のコンポーネントを置き換えるかは、今後の悩みの種となるかもしれません。

React Native関連情報

react-native-new-architectureへの3rd party対応状況

React Nativeは1年以上前から、New Architectureへの対応を開始しています。
New Architecture対応とは、Nativeモジュールとの通信APIを大幅に書き換えるためのプロジェクトです。
そのため、ネイティブレイヤーを抱える3rd partyはNew Architectureを迫られているのです。

ライブラリ対応状況は以下で確認できます。

https://github.com/reactwg/react-native-new-architecture/discussions/6

例えば、画像キャッシュのためのライブラリとして有名なreact-native-fast-imageは、まだ対応が始まっていないようです。
最近リリースされたexpo-imageを比較検討してみてもいいかもしれません。

最後に

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

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

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

Discussion