【浦島太郎さん必見】2022年にReactNativeでアプリ作うべきライブラリ5選
ReactNativeといえば検索サジェストで『オワコン』とでてしまう事で開発界隈の中で話題ですが、個人的には未だにベストプラクティスだと考えております。
その理由はいくつかありますが、それについてはまた別の機会でお話しするとして、今回はそんな2022年の今でも一戦級で使えるReactNativeを久々にやってみたい人や新しいライブラリの発見をしたい人のために、まとめを作ったので是非みてください
読者の対象はクロスプラットフォームが向いているであろう、個人開発〜中小規模の開発している方を想定しています。
時代と勢いを感じたライブラリ5選
1.react-native-purchase
今でもReactNativeでIAPを実装しようとすると、react-native-iap
(https://github.com/dooboolab/react-native-iap)というライブラリが有力候補に出てくると思います。
しかし、サブスクやレシート検証などは正直ストレスの塊だと思います。そこで登場するのが『RevenueCat』というIAP向けのSaaSです。
こちらを使用すると、めんどくさいことは全部丸投げでOK、そしてコードもめちゃくちゃ簡単になります。
$10000までは、無料で使用することができるSaaSで、以降の料金設定も個人的には良心的だと感じました。
特にReactNativeで開発を進めている人はスピード感を持ってPDCAを回したい人だと思いますので、相性が良いかなと思います。
特徴
- InAppPurchaseの実装が鬼簡単になる
- IAPの検証サーバーがいらなくなる
- サブスク実装で初回○○のような条件分岐も簡単にできる
- SaaSとしての値段設定も良心的
2.react-native-google-mobile-ads
ReactNativeでadmobを表示させる手段について、昔はreact-native-firebase/admobを使用する方法や、react-native-admobを使う方法が多かったかと思います。
現在、react-native-firebaseはadmobの提供をやめているようで、react-native-admobはほぼ更新されていませんでした。上記ライブラリは活発に更新されており、ドキュメントもしっかりしています。
意外とハマりどころになりがちなので、記憶の片隅に入れておくと良いと思います。
特徴
- ドキュメントがしっかりしている
- https://docs.page/invertase/react-native-google-mobile-ads
- 現状、このライブラリじゃない別の有力な選択肢が見つからない
- Hooksを提供している
3.ui-kitten
ReactNativeのUIライブラリでは、こちらのライブラリも使いやすく、世界観によっては高品質なUIを作成できると感じました
特徴
- Eva Design Systemを採用しており、色味も細かく世界観を作り込める。
- こちらでカラーの作成を行うことができます
- light/darkのテーマが簡単に分岐できる
- それぞれのcomponentのクオリティも高く、便利性の高いものが多い
- NativeBaseとの使い分けはそのアプリの世界観次第な気がします
4.react-navigation
僕がアプリをたくさん作っていた2018~2020年頃はreact-native-router-fluxを使っていたのですが、あまり更新されておらずこちらに移行しました。使用感はかなり良く、ui-kittenもreact-navigationを推している印象を受けました。
特徴
- stack, tabs, drawerなど、ナビゲーションの基本形は全て抑えられている
- modal transitionなどの細かい部分も実装できる
- 今はreact-native-navigationかこちらが大多数を占めているみたいです
5.react-native-gifted-charts
ReactNativeでのグラフの描写はいくつかやり方があり、ライブラリもいくつかの派閥がありますが、現在最も活動的でおすすめなのがこのライブラリになります。ReactNative向けのグラフライブラリの多くは制約が多い or 開発者のエゴを感じました。中でも、このライブラリはドキュメントが充実しており、細かく設定できるので良いと思いました。
本当に細かいグラフを作りたい場合にはWebViewにホスティングされたchart.jsを読み込むhtmlファイルを読み込ませて、JSをinjectするなどすることも最終手段で考えておくと良いと思います
特徴
- グラフの種類は王道なものを抑えている
- グラフ選択時にTooltipを表示することができる
- データの書きやすさも優れている
- ドキュメントが充実している
- ニッチなグラフは含まれていないので、その場合は代案が必要
番外: 当たり前系
lottie
どのプラットフォームでも、ちょっとしたアニメーションをいれるだけでユーザーがワクワクします。
ユーザーがワクワクすると購買意欲が上がったり、シェアしてくれるモチベーションに繋がるので是非入れておきたいですね
react-native-linear-gradient
グラデーションの背景などに使います
@react-native-clipboard
クリップボードにコピーする際などに使います
@react-native-async-storage/async-storage
アプリ内DBで使います
react-native-fs
CSVをゴニョゴニョするアプリを作りたい時など、ファイルを触る系の際にはよく使います。
react-native-firebase
もはや当たり前になっているmBaaS
react-native-svg & react-native-vector-icon
アイコンやSVGを描写するときに使います
redux-thunk & redux-toolkit & redux-persist & redux & react-redux
この辺は僕の開発する上での当たり前キットです
Discussion