僕の考える最強のReact Native開発ライブラリ等（2020年11月末版）
こんにちは、HALです。
React Nativeを使ったスマホアプリ開発を個人でやっているサラリーマンSEです。
空き時間のみを使った開発しかしていませんが、React Nativeを使い初めて1年半くらい経ったので、今の時点で１から開発を始めるならこの辺のライブラリを使うかな、と言うのを整理してみようと思います。
React Nativeのライブラリもたくさんあるので、これから開発はじめたいけどどのライブラリ使えば良いの？みたいな悩みを持たれている方の参考になれば幸いです。
追記
2021年8月版を追加で執筆しています。
そちらも併せてどうぞ。
開発補助系
Expo
これはやっぱり外せないかなぁと思います。
React Nativeの開発環境をサクッと整備してくれて、さらに良く使われるライブラリ類をまとめてくれている。
しかもiOSやAndroid独自の設定をラッピングしてくれるので、すぐに開発を始められるのが便利です。
Expoを使うメリットは
- expo init ProjectName だけですぐ開発を始められる
- Expoのアプリを使って手軽に実機デバッグができる
- 良く使うライブラリを用意してくれていて情報も結構あるので初心者に優しい
と言ったあたりがあります。
デメリットとしては、Nativeでしか使えない機能を使いたい場合にどうしようもない、と言うところがあります。
特に課金機能は実装できないので、課金を使う場合は選択肢から外れるのですが、その場合でも最初はExpoで作って、ExpoからEjectして素のReact Nativeとして開発を継続したりもできるので、最初はExpoで問題ないのでは？と思います。
Expoで開発開始→ある程度形が出来てNative機能が必要なところにきたらEject、みたいな進め方が楽かなぁと思っています。
Sentry
リリース後のクラッシュログなどを取るならSentryを使用します。
expoが推奨しているので使ってる、と言ったくらいで特に思い入れはありません。
Firebase Crashlyticsでも良さそうなので、今度はこちらを使ってみようかなと思っていますが。
UI系
React Native Paper
UI系ライブラリだと、今はReact Native Paperが良いかなと思います。 React Native Paperのメリットは
- マテリアルデザイン準拠（好みですが）
- テーマへの対応
- ダークモードへの対応
あたりがあります。
同様にUI系ライブラリでNativeBaseもあるんですが、こちらはテーマを使用しようとするとEjectしないといけないので、ちょっとハードルが上がります。
Expoでもテーマ切り替えに対応できるのは良いですね。
あとは、比較的開発が活発でちゃんと更新されている点もあります。
以前はNative Baseを使用していたのですが、どうも更新があまりされていない？ようで最新のReact Nativeと合わせると不具合が出たりします・・・。
React Native Super Grid
Grid表示をさせるならこちらを使います。
フォトアルバムみたいな機能を作ろうとすると、どうしてもグリッド表示が必要になるんですが、1から実装しようとするとなかなか大変で、パフォーマンスも出なくなりがちなんですよね。
その点こちらはFlatListやSectionListみたいな使い勝手で簡単です。
あと、地味に使うのがタブレットを意識した場合ですね。
タブレットはどうしても横幅が広くなるので、スマホだと当たり前の縦一列のリストだと見栄えが悪くなります。
そんな時にこれを使うと、スマホだと１列、タブレットだと３〜４列、みたいなことも簡単に実装できます。
react-native-drag-sort
ただのGrid表示ではなく、表示されたものをドラッグで並べ替えたい、と言った場合はこちらを使います。
Gridでもリストでも並べ替えできるので便利ですね。
ただ、使い方にちょっと癖があるので、あんまり使いたくないです。
とはいえ、他に選択肢があまりないのですが・・・。
react-native-image-progress
画像表示時の読み込み中表示を良い感じにやってくれます。
アルバム機能＋firebase Storageみたいな時に、ダウンロード待ちが発生すると思うのですが、そんな時に良いですね。
大した機能ではないので自分で実装も可能ですが、手間をかけたい機能でもないので使ってます。
react-native-keyboard-accessory
キーボード入力時に、キーボードのすぐ上に「閉じる」ボタンや「次・戻る」ボタンを付けたい時に使います。
特に１行入力では困らないのですが、複数行入力可能なコンポーネントがあった場合、キーボードを閉じる操作が標準キーボードではできないので(iOSの場合)、「閉じる」ボタンがあった方がいいです。
データストア系
mobx & mobx-persist
データストアの有名どころだとReduxだと思いますが、あれはちょっと大袈裟すぎるな、と言う印象なので、今はmobxを使用しています。
Reduxのdispatchだのactionだのって、個人開発だとかったるくてやってられないんですよね・・・。
比較的規模の小さいアプリであれば、mobxがちょうど良い気がします。
永続化もmobx-persistを入れれば勝手にやってくれますので。
ただ、１点気をつけなければいけないのは、mobx-persistを使って手軽に永続化して、アプリの再起動後も前の値を使ったりできるんですが、再起動時の読み出しに一瞬タイムラグがあるようで、読み出される前にstoreを呼び出したらundefinedでエラーになる、とか言うことがあります。
初期化処理の中でstoreを使うようなことがある場合はご注意を。
ちなみに、unstatedと言うのも気になってます。
こちらも軽量なGrobal State管理が可能なようですので、検討されても良いかもしれません。
自分はmobxで必要十分ですので、しばらく使わない予定ですが。
次期バージョンがある模様。
SQLite
mobx&mobx-persistは手軽なんですが、データを大量に保存しようとすると遅いです。
なので、ローカルにたくさんデータ保存がしたい場合はSQLiteを使います。
mobxかSQLiteか、みたいな二択ではなく、各画面で持ち回るデータ量が増えない設定値みたいなものはmobx、ユーザーが増やすことができるデータはSQLite、みたいな使い分けをすると良いかなと思います。
Cloud Firestore(Firebase)
React Nativeはクロスプラットフォームが売りなので、iOSとandroidでデータを共有したい、みたいなこともあると思います。
そんな時はFirestoreですね。
ちなみにReact Nativeでfirebaseを使おうとするとライブラリが二つあるんですが、Expoの場合はこちらです。
以下のものはExpoをEjectしないと使えない・・・と昔読んだ気がするのですが、その後調べてないので不明です。
いずれにせよ、クラウドDB使うなら、Firestoreが便利かなと思います。
AWSはやっぱり個人開発には大袈裟でかったるいのです・・・。
最後に
つらつらと、今後も使っていくだろうなと思うライブラリを書き連ねてみました。
強いてあげませんでしたが、ExpoのDocumentを見るといろいろなライブラリがあるのでその辺も結構使ってます。
ライブラリを探す時はExpo Doc→Googleって感じで探す方が、Expoとの相性に悩まなくて良いので楽です。
ただ、Expoのライブラリは痒いところに手が届かないことも多いので悩ましいです。
上であげたようなライブラリを駆使していくと、車輪の再発明を防いで開発効率もアップできます。
逆に、細かいところで使い勝手が悪く、思った機能が作れない、と言った制約も生まれたりします。
どこまで作らずに実現し、どこからは自分で作り込むのか、と言ったあたりを見極めながら、良い感じにアプリを作っていきたいですね。
「こんなことをしたい時には何使ってる？」などあれば、お気軽にコメントなど下さい。
Discussion
同じくReactNativeで開発しています。
触ったことのないライブラリも多いので大変参考になりました。
一点質問なのですが、画面遷移はどういったライブラリを使用されていますか？
ありがとうございます。
大事なものを書き忘れてましたね・・・。
画面遷移はReact Navigationを使用してます。
バージョン４を使ってましたが、最近すべてのアプリでバージョン５に切り替えました。
返信ありがとうございます。
同じくReact Navigationを使用しています。
やはり画面遷移に関しては頭ひとつ抜き出ていますよね。
※随分前にv3→v4の切り替えに苦労した記憶があるので、自分はまだv5には手を出していませんが・・・
情報も多いですから、現状はReact Navigation一択かな、という感じですね。
自分はv4からしか使っていないので比較はできませんが、v5は定義の仕方などが静的になってとても「React的」だなぁと感じるので、むしろ分かりやすくなったように思います。
TypeScriptの恩恵も受けやすくなっているので、v5はお勧めです。
ただまぁ、v4もしばらくメンテナンス続くようですから、今動いているものをあえてv5に置き換える必要があるかというと、絶対的に必要な理由はないかなぁというところですよね。
React Native(expo)で本を読むことができるアプリを作りたいと思っています。
アプリインストール時にスマホのローカルに保存（オフラインでも読めるように）されるようにしたい場合どうすば良いでしょうか？
HomeScreenに
[ 1 ] [ 2 ] [ 3 ] [ 4 ]
[ 5 ] [ 6 ] [ 7 ] [ 8 ]
[ 9 ] [10] [11] [12]
↑Gridが並んでいて[1]をonPressすると1章が表示され、[3]だと3章が表示されるような感じのものです。
App.jsやpackage.jsonがある階層に ./data/ フォルダを作成して、動的に読み込むようにしたいです。
expo-file-systemなどを使って読み込むことは可能でしょうか?
もしくは、expo-sqliteのようなDBを使ってDBにデータが入った状態でデプロイすることができれはその方がいいのでしょうか
本のデータはテキストデータで用意するようなイメージですかね。
どれくらいファイルが分かれるのかによって適切な実装は変わるような気がします。
ファイル数が少なければ、expo-file-systemを使って読み込むような仕組みでもいけると思いますし、jsonファイルとして用意して動的にrequireして読み込むような形でもできそうな気がします。
DBにデータを詰め込んだ状態でデプロイすることも擬似的には可能ですが、結局外部ファイルとしてデータを持つことになります。
ただ、ある程度まとまったテキストデータを読み込みたいような場合は、サーバからダウンロードするような形式にしておくのが望ましいかなと思います。
その方が、データに誤りがあった場合も修正のためにリリースが不要になりますし。
返信ありがとうございます。
動的に読み込んでみようと思います。