2018年 React Nativeで真剣なアプリを開発するなら、絶対使うライブラリー！

ここで、私が、React Nativeでアプリを開発する際に、実際に使っているライブラリーと「この機能でしたら、絶対これでしょう」というライブラリーをご紹介していきたいと思います。

React Nativeの開発で、全ての機能を全部自分で書くわけにも行きませんので

コミュニティが開発している優秀なものがあれば、どんどん活用すべきですね。

しかし、オープンソースになっている以上

品質も自分で、しっかり見極めて、選別しないと

後になって、大変なことになります。

途中から、別のライブラリーに乗り換えもできますが、プログラムの修正、テストなどで大変な工数を消耗してしまいます。

なので、この文章を通して、みなさんライブラリー選別の際に、ご参考になれば嬉しいです！

React.js

https://reactjs.org/

https://github.com/facebook/react/

これがないと

React Native

https://facebook.github.io/react-native/

https://github.com/facebook/react-native

これもないと！笑

Redux

https://redux.js.org/

私が実際にこれを使っています。

アプリのステート管理フレームワークがいくつかがありますが

https://github.com/aksonov/react-native-router-flux

中規模ぐらいのアプリでしたら、これがおすすめです

最初は多少戸惑いもありましたが、動きが理解すると

あとは、規約通りに部品を用意するだけで、うまく行きます。

一番大きな貢献は、やはり、アプリのプログラムの構造化が簡単にできて

アプリの全体のステートが一箇所でしっかり管理してもらうことで

それぞれもコンポーネントの責任もはっきりなります。

今が小規模でも、将来少し大きくなる可能性があれば

最初から、少し学習のコストをかけても導入すべきだと思います。

redux-persist

https://github.com/rt2zz/redux-persist

ほぼReduxとセットで使います。

アプリの状態を記憶してくれるものです！

redux-saga

https://github.com/redux-saga/redux-saga/

これは、非同期処理をしたいなら

これを使うのが一番良いですね！

別のプロセスで、並列して他の何かの処理をしたい時、これを思い出してくださいね。

rn-splash-screen

https://github.com/mehcode/rn-splash-screen

意外と、Splash screenを作るとき、Xcodeを弄ったりすると、くじけそうになる時があります！泣

そういうあなたは、このライブラリーを使うと幸せになれるかもしれません！

react-native-fbsdk

https://github.com/facebook/react-native-fbsdk

最近、FacebookのIDでログインできるアプリが多いですね

このライブラリーはそれを実現してくれます。

ただ、Firebaseと連携するなら

Firebaseも充実したAuthentication機能を用意してくれていますので

それもおすすめです！

react-native-fcm

https://github.com/evollu/react-native-fcm

Push通知でしたら

このライブラリーですね。

セットアップはやや手数がかかる印象ですが

実際にこれを使っている人が知っています！笑

react-native-gifted-chat

https://github.com/FaridSafi/react-native-gifted-chat

chatの機能を実装するなら、もうこれしかないでしょう！

aurora-imui

https://github.com/jpush/aurora-imui

こちらもとても綺麗で有望です。

チャットのUIのコンポーネントを提供しています。

ドキュメントが中国語で、読める自信のある方はぜひ！

lottie-react-native

https://github.com/airbnb/lottie-react-native

いけているアニメーションをあなたのReact Nativeアプリに実装するなら、これがおすすめですね！

react-native-scrollable-header

https://github.com/janicduplessis/react-native-scrollable-header

ビューを下に引っ張ると

アニメーションになるヘッダーでしたら

こちらを使ってください！

react-native-scrollable-tab-view

https://github.com/skv-headless/react-native-scrollable-tab-view

これ、私が使っています！

前は色々試していましたが、最終的にこれに落ち着きました。

使い方も簡単ですし、とてもレスポンスもよくてサクサク動きますし

タブになっていて、タブをクリックするのも当然画面の切り替えができますし、スワイプの動作も画面間で切り替えができますから、今風です！笑

おすすめです！

react-native-swiper

https://github.com/leecade/react-native-swiper

これはタブビューではありませんが

画像などを左右にスワイプするようなものでしたら

これしかないでしょう！

react-native-snap-carousel

https://github.com/archriss/react-native-snap-carousel

こっちもいいですね

とても綺麗なカードのスワイプ演出ができるはず！

react-native-simple-modal

https://github.com/bodyflex/react-native-simple-modal

githubのスターが少ないです！

しかし、本当に一番シンプルなモーダルを使いたい時は、非常に簡単に導入できます！

私のアプリでも実際にこれを使っています！

react-native-modalbox

https://github.com/maxs15/react-native-modalbox

上のモーダルライブラリーが物足りないのであれば

これをおすすめです！

少し、高機能でおしゃれなモーダルを導入できます！

下にスワイプしたら、クローズすることもできます！素敵！

react-native-action-sheet

https://github.com/expo/react-native-action-sheet

外部へファイルの共有とか

Slackに投稿するとか

何かしらアクションを実行したい時の、メニューのようなものですね。

react-native-image-picker

https://github.com/react-community/react-native-image-picker

カメラロールから写真を選んで、アップロードするとか

そういう機能のあるアプリは、これを使うしかないですね！

実際に、私の知っている方も二つのプロジェクトでこれを使っています！大好評です！笑

react-native-animatable

https://github.com/oblador/react-native-animatable

私のアプリで実際に使っています！

格好いいアニメーションをつけるのがとても簡単にできます！

ボタンがふわふわ浮遊感を出しているアニメーションもこれで実現しています！

react-native-collapsible

https://github.com/oblador/react-native-collapsible

タッチして、クローズしたり、開いたりするエリアを作る時は

重宝するライブラリーです！

githubのスター数も割と多いです！

react-native-datepicker

https://github.com/xgfe/react-native-datepicker

日付の入力などが必要なアプリは

これを使わない手がありません！

AndroidとiOSのNativeのFeelもしっかり実現できていますので

使い勝手が良いはずです！

react-native-vector-icons

https://github.com/oblador/react-native-vector-icons

React Nativeの中に、アイコンを使うなら、これがほぼ定番ですね。

私のアプリでも実際に使っています！

react-native-elements

https://github.com/react-native-training/react-native-elements

私が使っていますが

少し触ったことがあります。

部品がほぼ完成していて、簡単に導入できます。

自分でカスタマイズがしたくない、あるいはする予定がない

機能すれば良いだけでしたら、おすすめです！

面倒なStyleの設定とかも劇的に減るはずです！

NativeBase

https://github.com/GeekyAnts/NativeBase

こちらも上のreact-native-elementsと同様、部品が用意してくれています！

react-native-maps

https://github.com/react-community/react-native-maps

地図の出るアプリでしたら

ほぼ、これしかない状態です！

私も実際にアプリでこれを使っています！

最近こんな記事も書きました。ご参考ください。

ReactNativeの定番Mapコンポーネント react-native-maps

React-Native-Mapsのちょっとした癖（v0.21.0 Dragレスポンスの問題）

react-native-camera

https://github.com/react-native-community/react-native-camera

スマホのカメラを使って何かをする時は

このライブラリーですね！

写真アプリとかもうこれしかないじゃないかと。

react-native-video

https://github.com/react-native-community/react-native-video

カメラの次、ビデオ

ビデオの再生や制御などがこれですね！

流石にビデオの編集などの機能が無いようです。

将来あると強いですね！

react-native-material-kit

https://github.com/xinthink/react-native-material-kit

materialデザインが好きな方どうぞ！

react-native-firebase

https://github.com/invertase/react-native-firebase

Firebaseとうまく連携するなら、このライブラリーですね。

ReactNative + Firebase定番開発チュートリアル（１ インストール編）

私の中では結構注目しているライブラリーの一つです！

realm-js

https://github.com/realm/realm-js

あなたのアプリで、データの処理が多いのなら

これを使うのが必須になってくるでしょうね！

react-native-calendars

https://github.com/wix/react-native-calendars

カレンダーが必要なアプリは

これが鉄板ですね！

期間の選択などもできます！

react-native-device-info

https://github.com/rebeccahughes/react-native-device-info

デバイスの様々な情報をとって

それにより分岐処理をするとかの応用では

これがとっておきのライブラリーですね！

react-native-app-intro

https://github.com/fuyaode/react-native-app-intro

アプリの初回の起動の時で

アプリの簡単な説明があると、おしゃれです、丁寧ですよね。

そのイントロを手助けしてくれるライブラリーです！

react-native-billing

https://github.com/idehub/react-native-billing

Androidのアプリ内課金機能

これしかないぐらいです！

私のアプリで実際に使っています！

react-native-in-app-utils

https://github.com/chirag04/react-native-in-app-utils

iOSのアプリ内課金機能

私のアプリで実際に使っています！

私がコントリビュータにちょっぴりなっています！

react-native-background-timer

https://github.com/ocetnik/react-native-background-timer

本体のintervalの機能がうまく機能しないため

代わりに、このライブラリーが作られています！

実際に使っています！

react-native-loading-spinner-overlay

https://github.com/joinspontaneous/react-native-loading-spinner-overlay

データを取得する時にぐるぐる回るやつですね

ローディングしていますという時に

一回画面をブロックして

ユーザーに操作をしてほしく無い時に使う便利なUIライブラリーです！

私のアプリで実際に使っています！

 

まとめ

他にも本当にちょー使いやすい、大事なライブラリー、コンポーネントいっぱいあります。

これからも少しずつ、この記事をコーナーストーンとして

内容をしっかり増やして、メンテナンスしていきたいと思います。

これもいいよというのがあれば、ぜひお教えいただければと思います！

Twiiterもやっていますのでフォローなどお気軽にどうぞ！