🛠️

僕の考える最強のReact Native開発ライブラリ等(2021年8月版)

2021/08/13に公開

こんにちは、HALです。
React Nativeを使ったスマホアプリ開発を個人でやっているサラリーマンSEです。

前回の記事からまぁまぁ時間が経ったので、新しく見つけたライブラリとかを載せてみようと思います。
前回の記事に載せたものは除いているので、前回記事を読んでない方は併せて読んでみてください。

https://zenn.dev/hal1986/articles/e7ed1579bd7ff73ee0ec

なお、最近はExpoで初期構築→Bare Workflowへ移行、という感じで開発することが多いので、Managed Workflowでは利用できないライブラリも使ってます。

UI系

react-native-image-crop-picker

https://github.com/ivpusic/react-native-image-crop-picker

高機能なImage Pickerです。
ExpoにもImage Pickerはあるんですが、こちらは以下のような機能が使えるので重宝しています。

  • 複数画像の選択
  • 画像選択時の切り抜き(Crop)が可能
  • カメラも利用可能

通常やりたいことならこれ一つで全部できてしまいます。
強いていうなら、自分の好きなデザインでは作れないので、そこが場合によっては問題でしょうか。

RevenueCat(react-native-purchases)

https://github.com/RevenueCat/react-native-purchases

ExpoをEjectして課金機能を実装する際には、 RevenueCatを利用しました。
これはライブラリが優れているというか、サービスが素敵ですね。

スマホアプリで課金系を実装しようとすると、どうしてもバックエンドでレシートの検証とかを実装しなければいけないんですが、RevenueCatを使えば、その辺は全てお任せできてしまいます。
また、iOS / Androidの両方の課金の状況がRevenueCatのDashboardで確認できるため、統合して確認するのにも便利です。

https://www.revenuecat.com/

売り上げがある程度以上になるまでは無料で使えます。
とりあえず課金の実装をするならRevenueCatに任せればいいかなぁと思います。

react-native-progress-steps

https://github.com/colbymillerdev/react-native-progress-steps

ステップ毎に手順を実施していってもらうようなUIを簡単に実現するやつです。
初期起動時に一通り実施しないといけない手順とかを、これを使って実施するといい感じですね。

Google Maps Search Component for React Native(react-native-google-places-autocomplete)

https://github.com/FaridSafi/react-native-google-places-autocomplete

Google Mapの住所検索用のコンポーネントです。
Tok...とか入力すると、候補を表示してくれたりします。

Mapを使用したアプリを作る際に、これを使用して住所の検索を可能とし、検索結果から座標が取れるので、それをMapに渡して表示、といったことができます。
地図系のアプリや住所検索などが必要な場合はこれが便利だと思います。

react-native-japanese-tokenizer

https://github.com/craftzdog/react-native-japanese-tokenizer

https://blog.craftz.dog/react-native-japanese-tokenizer-6e36f4b7ea39

日本語の形態素解析をしてくれるライブラリです。
日記アプリとかメモアプリで全文検索処理をしたい場合、形態素解析が必要になります。
その場合にこのライブラリで形態素解析を実施し、検索できる状態で保存する、ということが可能です。

ちなみに自分はこのライブラリとSQLiteの全文検索機能(FTS)を組み合わせて、検索処理を実現しています。
ローカルだけで完結できるのでとても助かってます。

react-native-thumbnail-grid

https://www.npmjs.com/package/react-native-thumbnail-grid

複数画像のリストを渡すと、とてもいい感じに配置して表示してくれるライブラリです。
自分は日記アプリに複数画像を添付した場合に、これを使って表示するようにしています。
全部で何枚添付されてるのかまで表示されるのでかなりいい感じです。

最後に

今回もいくつか自分が利用しているライブラリを載せてみました。
載せたライブラリについて、「使い方を詳しく知りたい」とか「こんな時はどうすればいいか」とかあれば、コメントやTwitterなどで聞いてください。

ではでは、良いReact Native Lifeを!

Discussion