【React Native】ライブラリ選定で悩んでる全ての人へ【2022年版】

こんにちは。株式会社インプルの平澤です。
React nativeのライブラリ選定で迷われたこと、迷っていることはありませんでしょうか？
そんな方々へ私の選ぶベストライブラリセットご提供します。

※ExpoではなくReact native CLIで開発する前提です。

画面遷移

画面遷移は正直React navigationの圧勝です。
npm trendを見てもそうですし、何よりインターネットの記事がかなり豊富です。
他にreact native navigationなど画面遷移ライブラリはありますが、React navigationでどうしても再現できない機能がない限りはReact navigationで決まりでしょう。

React navigation

React native navigation

状態管理

状態管理はReduxがかなり強いです。
歴史が長い。記事も多い。gitのスターやダウンロード数何を見ても1位です。

が、学習コストが高いです。
うまく扱えないと不要なレンダーの原因になったりします。

そこで私がおすすめしたいのがRecoilです。
RecoilはFacebook製です。React nativeもFacebook製です。
相性悪いわけがない。。。。！！
RecoilはReduxに比べると大きいプロジェクトには向いてませんが、実装が簡単で個人開発であればRecoilで十分です。

私が実務1ヶ月くらいの時に書いた記事なので甘々ですがRecoilとReduxについて書いたものがあります。
初心者がReduxToolkitを使ってみた。
ReactNativeでログイン機能を実装してみた。
ReactNativeでRecoilを使ってState管理してみた。（Redux vs Recoil）

Redux

Recoil

バリデーション

React nativeでバリデーションをかける場合にはReact hook formで決まりでしょう。

React hook form

others

限定的ではありますが、私が各場面使用するライブラリもご紹介します。

カメラ

今まではReact native開発でカメラを使用する場合はReact native cameraが第一候補に上がっていましたが、現在React native cameraはメンテナがいないので新しいプロジェクトでは他のライブラリを使う方が安全です。

私のおすすめはreact native vision cameraです。
ビルドに癖があって、何回かreact native vision camera起因でのビルドエラーで悩みました。
しかし、それでも入れたくなるくらい高性能です。
またライブラリでは珍しくswiftとkotlinで実装されているライブラリです。今風ですね。

それ以外の選択肢としては
expo unimodules + expo camera も候補に入るかもしれません。

react native camera

react native vision camera

動画・音楽再生

react native videoという名前のライブラリですが、音楽再生アプリを作るのも当ライブラリで賄えます。
ただiOSだと当ライブラリだけでOSの動画コントロールを使用できますが、Android場合は他ライブラリを必要とする場合があります。（詳しくはGithubに書いてあります）

react native video

Push通知

Push通知であればreact native push notificationで決まりでしょう。
通知配信にFirebase cloud messagingを使うのであれば、react native firebaseも選択肢に入ってきますが、それも結局はreact native push notificationでも対応できるので問題ありません。

react native push notification

UI

UIに関しては完全に好みです。
私はそもそもあまり使うことが多くありませんが、仮に使うのであれば下記2つのどちらかを使用します。

react native paper

Native base

画像アップロード

端末に保存されている画像をアップロードする際に使うライブラリはreact native image pickerがいいと思います。
扱う方もさほど難しくなく、割とお手軽に実装できます。
当ライブラリはカメラ機能もありますが、カスタマイズの幅が狭くあまりおすすめしません。

react native image picker

他

typesync

@types/{package名}を自動でインストールしてくれます。
typescriptを使用するなら是非とも入れておきたいライブラリです。

[https://github.com/jeffijoe/typesync]

swr

データをフェッチする際のhooksを提供してくれるライブラリです。

SWR は、まずキャッシュからデータを返し（stale）、次にフェッチリクエストを送り（revalidate）、最後に最新のデータを持ってくるという戦略です。

機能としては、引用文の通りです。便利です。(激推しです

[https://swr.vercel.app/ja]

まとめ

今回ご紹介したライブラリは私が普段多用しているものをまとめました。
大規模開発となればまた色々な選択肢があると思いますが、個人開発で悩まれている方は上記のライブラリを一度試してみてはいかがでしょうか。