ダメなライブラリ。
redux
reduxはstate管理の素晴らしいライブラリだ。
世界で一番愛用され、情報量も多く、大規模システムに向いている。
しかし、react nativeを採用するのはほとんどがスタートアップだ。
学習コストが高い＋プロトタイプ制作が苦手なreduxはスタートアップにははっきり適さない。
reduxの代わりにcontext Api/MobXを使おう。Expo＋contextApi or MobX+web版のfirebaseがスタートアップでの最適解だと思う。
react-native-cli
cliでなくExpoを使おう。cliはライブラリのアップデートの際に莫大な手間がかかる。要するにnativeライブラリのメンテナンスに手間がかかりすぎるので、Expoをオススメする。(スタートアップでは特に)私はcliもexpoも現在実務で使っているが、体感expoのが２倍早く開発出来る。androidやios経験がない人は、expoを選択
AsyncStorage
react native標準のkey valueデータベース。
公式はなぜかこのライブラリを推しているが、このライブラリには、致命的な欠点がある。
それは、stringしか保存できないこと。つまり、boolean, integer, arrayなどを保存しようとすると、自分でJSON.stringifyを使って文字列に変換してから保存する必要がある。
なので大抵の場合、react-native-storageまたはRealm-jsを使った方が幸せになれる。
単純なものには、recat-native-storage
クエリが必要ならrealm-jsがおすすめ(ただしreact-native linkが必要)。
react-native-router-flux
お手軽さが人気のルーティングライブラリ。
様々な独自ルールがあり、ドキュメントが充実していないためハマりやすい。
何より、ルーティングをJSXで管理するためコードが肥大化しやすい。
が、小規模なら割と適していて、ルーティングライブラリの中でアニメーションは一番好き。
公式のドキュメントが貧弱なことを除けば実務で全然使える。
react-navigationのがいいけど。
JSXでルーティングを記述するといえば、冗長さが伝わるだろうか？
react-native-fcm
お手軽にfcmを実装する。
単純にライブラリの品質が低い。
react-native-firebaseと言う、使い方が一緒でよりメジャーなライブラリを使おう。
atom
エディタ
遅い。とにかく遅い。
性能はいい。しかし、勉強会に来るReactNativeを書く人の７割はvscodeを使っている。
nuclideは正直言ってゴミ。（使い込まなかったけど）
react-native-vector-icon
かなりバグりやすい。いつもなんらかのバグを抱えている。しかし、他のライブラリにとてもよく使われるため、必ず使うことになるライブラリの一つ。小規模開発なら使わないことを検討したいが、無理そう。
問題が発生したらissueを見る。世界中の悲鳴がそこには書き込まれている。
vscodeのdebugger
vsceodeにはreact-native-toolsというエクステンションがあり、その中の機能のdebuggerは、
単純に、重い、安定しない、使いにくいの三重苦。しかし、多くのエンジニアがこれを使うことを推奨している。（機能は素晴らしいが、debuggerとしては重すぎる。）正真正銘の使えないデバッガ
chrome-devtoolを使おう。
react-native-debugger
React Nativeの一番有名なデバッガ。設定がいらず、お手軽にデバッグ出来る。が、出来ることはchromeのdev toolと全く同じ。chromeの方が軽いので、react-native-debuggerを使うのはやめよう。
react-native-device-info
react-native-vector-iconほどではないが、エラーの元。Dimensionを使い、縦横比で、機種を特定できないか試してみよう。しかし、大抵の場合はこのライブラリを入れる必要がある。
react-native-motion
マテリアルデザインのTransitionライブラリ。
Flutterとかで使われるにゅっとしたアニメーションが可能に。
ただ、このライブラリはreact-navigationと使えないので産業廃棄物
react-navigation-fluid-transitionsというドキュメントが充実していて、react-navigationと一緒に使えるライブラリを使おう。
素晴らしいライブラリ
UI
react-native-responsive-screen
レスポンシブデザインを導入する。
レスポンシブなcssが書けるようになるライブラリ。実はiosとandroidで、１ピクセルの差異があり、どうしてもデザインが崩れてしまう。
上記の理由から
width: width * 0.5
という書き方をしてもどうしてもデザインが崩れる。
だが、このライブラリを使うと、１ソースで、全く同じ見た目のUIが作れるようになる。１ピクセルにこだわるデザイナーがいる場合は、必須ライブラリ。
native base
最も有名なUIライブラリ。デザインは悪くないと見せかけて、ラジオボタンなどがとてもダサい。
以前は、コードの品質が低かったが、最近色々な問題が解決され、人に進められるようになった。
native-baseを使っておけば間違いはない。
react-native-elements
素晴らしいUIライブラリ。
react-native-trainingと言うReactNative最大コミュニティが作っている。
そのシンプルさとelementsと言う名の通り、ちょっとだけUIライブラリを使いたいと言う時にとても重宝する。
エンジニア向けに作られていて、カスタマイズすることを前提に作られているためデザインはシンプル。
native baseよりスターが多い。
shoutem
素晴らしいUIライブラリだが割と知名度がない。シンプルでおしゃれなUIが簡単に出来る。新しいアプリを作る時はぜひ使ってみよう。画像を大量に見せるアプリと相性が良さそう。逆にボタンとかが多いと相性が悪そう。
react-native-paper
マテリアルデザインのライブラリ。expo snack標準搭載。
react nativeでmaterial designを実装するにはこれ一択。
なぜならreact naitve linkしないで使える唯一のmaterial designライブラリだから（泣）
フッターはとても素晴らしい。
...フッターだけが素晴らしい。そもそもreact nativeでmaterial designは早いかもしれない。
追記 時が経ち、かなり使いやすいです。マテリアルデザインを使う時はこれを使いたい(使うしかない?) ただ、若干native base, react-native-elementと比べるとデザインが残念だし使いづらい。
例えば、ヘッダーにタイトル以外の文字列が入れられない。フォームをタップした後他の箇所をタップしてもフォームが選択されたままになる。など細かいバグも多い。(使い勝手はかなり悪いがlinkせずにすむmaterial designのライブラリがこれしかない)
react-native-material-ripple
materialデザインのタップアニメーションを実装
react-native-paperのTouchableRippleはゴミなのでこちらを使う。
react-native-animatable
とにかくお手軽にanimationを実装するときはこれ。お手軽なので性能もそこそこと思いきや、かなり複雑なアニメーションを作れる。学習コストはかなり低く、アニメーションの動作は素晴らしい。
react-native make it rainで検索するとそのすごさが分かる。
react-native-modal
モーダルを実装する。
ReactNativeTrainingが作っている。
標準のmodalと使い方が一緒だが、こちらのが表示速度が早い。
安定感もあり、標準のモーダルを使うくらいならこのライブラリでモーダルを作りたい。
react-native-animatableを内部利用しているので、ゴリゴリのアニメーションも出来る。
デバッガ
reactotron
設定が複雑と言うことを除けば最高のデバッグツール。
実機テストや、sagaなどライブラリを追加するごとに設定が必要になるが、
やはり使いやすく、開発速度が上がる。
chromeのdeveloper tool
React Nativeの標準debugger。やはり使いやすい。web出身の人は、変にサードパーティーのdebuggerを使わずにこれ一つでいいと思う。
どのデバッガより軽くて、性能がいい。最近react-native-debuggerから乗り換えた。
データベース
react-native-storage
AsyncStorageのラッパー
キャッシュ、インデックス貼り、バッジ読み込みなどをサポート。
AsyncStorageは、低レベルなAPIで、生で扱うのが辛い。そこで、ラッパーライブラリを導入して書き心地をよくする。
どうせ、生AsyncStorageを使うと、int, booleanあたりを自作しなければならないので、react-native-storageは導入したい。
ライブラリの品質はそこそこだが、とにかくお手軽なので人に勧めている。
周辺ツール
Prettier
コード自動成形ツール
vscodeにいれて使う。
これがあればeslintがいらなくなる。
standard版もあり、学習コスト０なので即導入したい。
vscode
microssoft製エディタ
typeScript/Flowと相性がいいので、js忍者ならこのエディタ。
なのでReactNativerも必然的にvscodeを使い始める。
Flowかtypescriptみんな使うでしょw
fastlane
react-nativeでも証明書は必要になる。
state管理
unstated-next
超軽量state管理ライブラリ。学習コストめちゃくちゃ低い。
2019年のstate管理はこれだ。
わずか 40行で書かれたreact context APiの薄い拡張だ。
テストもしやすくベテランエンジニアにこそオススメしたい。
後redux-persistの代わりのunstated-persistが性能が悪いので、素のAsyncStorageを使う必要があること。
mobx
state管理のnpmライブラリ
Reduxより遥かに良い。context-apiまたはunstated-nextで辛くなってきたら乗り換えるのはあり。
パフォーマンスはreduxよりいい。
データベース
react-native-storage
react-native公式のAsyncStorageの薄いラッパー
多分、2019年で、react-nativeでのデータベースのデファクタスタンダード
AsyncStorageは扱いにくいことで有名。（number、配列、objectは保存できず、文字列のみ保存できるなど）
ちょっと大きいデータを保存するときは、react-native-storageを使おう。
androidとiosに対応しているのがポイント
必須ライブラリ
Expo
OSS化されたことで大幅に性能が向上した。基本的にexpoを使った方がいい。
ただejectの壁が辛すぎる。
現時点ではflutterの上位互換。
大規模でも行けるか？というとこまで来ている。
react-navigation
facebookおすすめのルーティングライブラリ。低レベルなvavigationライブラリ。react色が強く学習コストが高い。
とにかく公式の情報が豊富。（ios Xの対応について既に公式ドキュメントがある！）
堅牢で、reduxと使いやすいので大規模に向いている。
迷ったらコレ。ただRNRFも悪くない。(小規模なら)
大規模向け。小規模開発でこれを使う意味はない。（だいぶ癖がある。）
例えば、Container の中のcomponentの中で、navigationしたい時は、navigate propsをcontainerからcomponentに渡さないとnavigate出来ないなど。
jsだけで書かれておりnativeコードを一切使っていないのもポイント
axios
http通信ライブラリ
http通信を「よきにはからえ」してくれる。正直使わない理由はない。reactotronの作者が作った拡張番のapisauceもおすすめ
genymotion
軽量androidエミュレータ
expo公式がオススメしている。android studio付属のエミュレータはゴミすぎるのでさっさと乗り換えよう。とにかく軽い。
flow language Support
vscodeのflowのextension。
stgingの掛け算など、ちょっとした間違いをエディタ上で表示してくれる。
// @flow
と書かなくても動作するのが気に入っている。
型の定義をcode上で書かなくてもOcamelのように型推論してくれるので、入れておいて特に損はない。
型を書いていないプロジェクトでこそ使うべき。
テスト
jest
テストツール
react nativeに標準で付いてくる。snapshotテストは革命。テストにかけるコストを大きく減らすことができる。ただ別のテストツールになれている人は、わざわざ乗り換えるほどでもないかも。
正直react nativeのviewのテストは、メンテナンスコストと学習コストが高く辛い。
私はビジネスロジックの単体テストとapiのスナップショットテストのみ行なっている。
apiのスナップショットテストはとても便利。以下の記事が参考になる。
https://daveceddia.com/snapshot-testing-apis-with-jest/
オススメはtoJsonではなく、JSON.stringifyを使うこと。JSONをワンライナーでスナップショットとして保存してくれる。
最近はexpoに標準で付属してくるのでテストはjestを使っておけば間違いがない。
ただ、react-native-cliを使うなら、jestのセットアップは大変なので、avaを使って楽したい。
ava
セットアップがいらないtestツール。
jestって、セットアップ難しいよね。avaは標準でbabel7に対応しているのでsetupなしにテストを書き始められる。
シンプル、高速、学習コストが低いと三拍子揃っている。
jestほど高機能ではないが、必要十分。
小規模アプリならjestよりavaの方が、テストを書きやすいよ。
ただ、テストの結果は、jestの方が見やすい。