【随時更新】2018年にReact Nativeを始める人におすすめ26選

ちょうど1年くらいにReact Nativeでちょっとしたアプリを作っていたのですが、最近はめっきり離れてしまっていました。Reactもv16になり、少し開発環境も変化しているかなと思っていたら・・・結構変わっていました。
React Native Showcaseを見ると、FacebookやInstagramはもとよりAirbnb, Skype, Tesla, Walmart, Wix, UberEATSなど日本でも有名な企業やサービスの採用が目立っています。

* [showcase](https://facebook.github.io/react-native/showcase.html)

今回は良く使いそうなツール・コンポーネント・サービスを集めてみました。
随時更新もしていきたいと思います！

## 1. Expo

* https://expo.io/

ExpoはReact Nativeの開発をサポートするツールです。
主に以下を提供してくれています。

* Expo XDE、Expo exp
* Expo Module
* Create React Native App

### Expo XDE / Expo exp

Expo XDE、Expo expを使ってアプリの実機確認や公開ができます。便利なところは、QRコードを発行して、スマホにインストールしたExpo.ioのアプリからQRコードを読み取るとアプリを確認できます。
個人的にシミュレータは好きでなかった（自分のマシンスペック的に厳しい）ので、実機確認できるのはとても助かります。もちろんHot Reloadも可能です。

### Expo Module

Expoモジュールを使う事で、連絡先、カメラ、ソーシャルログインなどを手軽に扱う事ができます。
例えばSQLiteなどのモジュールがあります。

```js
// SQliteのサンプル
import { SQLite } from 'expo';

const db = SQLite.openDatabase({ name: 'example.db' });

const getItem = (id) => {
  return new Promise((resolve) => {
    db.transaction(tx => {
      tx.executeSql(`select * from items where id = ?;`, [id], (_, { rows: { _array } }) =>  {
        resolve(_array);
      });
    });
  });
}
```

### Create React Native App

`create-react-native-app`コマンドを使い、簡単にReact Native & Expoの開発環境を構築できます。
React-Nativeの公式チュートリアルのQuick Startで紹介されています。

* [React Native - Quick Start](https://facebook.github.io/react-native/docs/getting-started.html)


## 2. CodePush

* https://microsoft.github.io/code-push/

審査なしにコードの更新ができるという事です。
「そんな事して大丈夫なのか？」という感じだったんですが、jsbundleのデプロイについては問題ないとの事。ネイティブAPIの挙動を変更させる事がNGみたいなので、React Nativeについては影響がないと考えて問題ないみたいです。

> 参考：[AppleのHot Code Pushリジェクト問題、React Nativeへの影響は？ - 踊る犬.netブログ (旧)](https://blog.odoruinu.net/2017/03/09/apple-starts-rejecting-apps-with-hot-code-push-features/)

## 3. storybook

* https://storybook.js.org/

storybookはUIコンポーネントを管理できるツールです。
以前はreact-storybookでしたが、現在はstorybookとしてReact、React Native、Vue.jsに対応しています。

<img src="https://github.com/storybooks/storybook/raw/master/media/storybook-intro.gif" width=80%>

## 4. Realm

* https://realm.io/jp/

SQLiteに変わるデータベースで、パフォーマンスに関しても基本的にはSQLiteよりも良いとの事です。
他にも以下のような機能を提供してくれます。

* 双方向のデータ同期
* リアルタイム共同編集
* サーバープッシュ

自分もSQLiteからRealmに乗り換えました。

## 5. Auth0

* https://auth0.com/

ソーシャルログインのサービスでReact Nativeにも対応しています。
メジャーなものだけであれば良いのですが、普段見かけないログインの実装が必要な場合に使えると思います。
docomoのサポートはなかなか見かけないですね。下記が一例になります。

* salesforce
* fitbit
* shopify
* soundcloud
* wordpress
* docomo

## 6. React Native Navigation

* https://wix.github.io/react-native-navigation

Wixが作っているルーターです。
ルーターは他にも、

* React-Navigation
* react-native-router-flux

などもあります。

<img src="https://qiita-image-store.s3.amazonaws.com/0/54502/58629cd9-edb6-7702-fcf7-c597866093c7.gif" width=40%>


## 7. react-native-calendars

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

またしてもWix製のコンポーネントです。カレンダーは使いどころが多そう。

![react-native-calendars](https://github.com/wix-private/wix-react-native-calendar/raw/master/demo/calendar.gif?raw=true)

## 8. react-native-maps

* https://github.com/airbnb/react-native-maps

こちらはAirbnb製です。かなり多機能なので使える場面は多そう。

<img src="https://camo.githubusercontent.com/9b5fcde0cb8146672f54d39fc3c34bd2e1f7891f/687474703a2f2f692e67697068792e636f6d2f336f365542644751644d31476d566f4964712e676966" width=40%>

## 9. react-native-camera

* https://github.com/lwansbrough/react-native-camera

Cameraを扱えるコンポーネントです。onBarCodeReadというプロパティを持ち、QRコードなどのバーコードにも対応しています。

<img src="https://cloud.githubusercontent.com/assets/2302315/22190752/6bc6ccd0-e0da-11e6-8e2f-6f22a3567a57.gif" width=40%>

## 10. react-native-vector-icons

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

こちらもお馴染みのアイコンです。限られたiconではなく、複数のアイコンに対応しているので使いやすくおすすめです。
対応しているアイコンは以下になります。

* Entypo
* EvilIcons
* Feather
* FontAwesome
* Foundation
* Ionicons
* MaterialIcons
* MaterialCommunityIcons
* Octicons
* Zocial
* SimpleLineIcons

## 11. react-native-animatable

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

コンポーネントの設定だけで簡単にアニメーションを作成することができます。

<img src='https://cloud.githubusercontent.com/assets/378279/10590307/ef73b1ba-767d-11e5-8fb9-9779d3a53a50.gif' width=40%>

## 12. react-native-progress

* https://github.com/oblador/react-native-progress

プログレスバーのコンポーネントです。

<img src='https://cloud.githubusercontent.com/assets/378279/11212043/64fb1420-8d01-11e5-9ec0-5e175a837c62.gif' width=40%>

## 13. react-native-lightbox
* https://github.com/oblador/react-native-lightbox

lightboxのコンポーネントです。こういったのが動きがあるだけでアプリがリッチに見えます。

<img src='https://cloud.githubusercontent.com/assets/378279/9074360/16eac5d6-3b09-11e5-90af-a69980e9f4be.gif' width=40%>

### コラム

実は、react-native-vector-icons、react-native-animatable、react-native-progress、react-native-lightboxは同じ作者で、**Joel Arvidsson**という方が作っています。
彼の作った**Vogue**というアプリは、Appleが選ぶ2016年のBest Appsに選ばれており、React NativeのShowcaseにも掲載されています。
そして彼が作ったライブラリはReact Nativeのコミュニティの約35%で採用されているとの事です。

> 参考： https://oblador.se/

## 14. react-native-masonry

* https://github.com/brh55/react-native-masonry

pinterest風UIを実装する事ができます。

<img src='https://camo.githubusercontent.com/a0c35ff917e8fa940ee3633d99609993d6cccb7d/687474703a2f2f672e7265636f726469742e636f2f534c4176547a663948592e676966' width=40%>

## 15. react-native-blur

* https://github.com/react-native-community/react-native-blur

ブラーのエフェクトをかけてくれるコンポーネントです。

<img src='https://cloud.githubusercontent.com/assets/139536/25066337/3c9d44c0-224d-11e7-8ca6-028478bf4a7d.gif' width=40%>

## 16. react-native-keyboard-input

* https://github.com/wix/react-native-keyboard-input

keyboardを切り替えれるようにカスタマイズできます。画像やスタンプの投稿を意識して作られたみたいです。これもWix製です。

<img src='https://qiita-image-store.s3.amazonaws.com/0/54502/6a146144-09f6-aff9-baac-70ee8f57bbcd.gif' width=40%>

## 17. react-native-tinder-swipe-cards

* https://github.com/meteor-factory/react-native-tinder-swipe-cards

tinder風UIのコンポーネントです。

<img src='https://github.com/meteor-factory/react-native-tinder-swipe-cards/raw/master/screenshots/swiper-cards.gif' width=40%>

## 18. react-native-star-rating

* https://github.com/djchie/react-native-star-rating

ユーザーに評価してもらうときに使えそうなコンポーネントです。

<img src='https://github.com/djchie/react-native-star-rating/raw/master/assets/custom-star-demo.gif' width=40%>

## 19. react-native-swiper

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

よくあるスワイプです。拡張もできるのある程度自分の思ったようにカスタマイズできると思います。

<img src='https://camo.githubusercontent.com/67811c9b23719e308968ea425514edf85a0d36af/687474703a2f2f692e696d6775722e636f6d2f7a7273617a41472e6769663d33303078' width=40%>　　<img src='https://camo.githubusercontent.com/a2a53f24cb9e39c030cbaf519d7b3120e8ad5daf/687474703a2f2f692e696d6775722e636f6d2f68503366336f4f2e6769663d33303078' width=40%>

## 20. react-native-textinput-effects

* https://github.com/halilb/react-native-textinput-effects

inputに対してカスタマイズができるコンポーネントです。コンポーネントの名前が`<Sae>`（さえ）、`<Isao>`（いさお）、`<Madoka>`（まどか）など日本の人名になっているのが面白いです。

サンプルは`<Makiko>`（まきこ）です。

<img src='https://github.com/halilb/react-native-textinput-effects/raw/master/screenshots/makiko.gif' width=40%>

## 21. react-native-fbsdk

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

Facebook公式のアナリティクスです。しかしGoogle Analyticsに比べると機能や管理画面が貧弱みたいなので今後に期待という感じでしょうか。

> 参考：https://qiita.com/imaimiami/items/4071aecbe1a63106d8e3

## 22. react-native-swipeable

* https://github.com/jshanson7/react-native-swipeable

リストをスワイプするとしたから削除ボタンとかが出てくるあれです。

<img src='https://raw.githubusercontent.com/jshanson7/react-native-swipeable/master/demo.gif' width=40%>

## 23. lottie-react-native

* http://airbnb.io/lottie/

lottieはAirbnbが開発したアニメーションライブラリです。After Effectsで作ったアニメーションを取り込む事ができます。

<img src='http://airbnb.io/lottie/images/Introduction_01_sm.gif' width=60%>

## 24. react-native-action-button

* https://github.com/mastermoo/react-native-action-button

アニメーションのボタンのコンポーネントです。

<img src='https://camo.githubusercontent.com/0d71fda546fc0aabd5b9e6fa0ea0934dace2c085/687474703a2f2f692e67697068792e636f6d2f3236426b4d69723949634168716534454d2e676966' width=40%>

## 25. react-native-modal

* https://github.com/react-native-community/react-native-modal

モーダルを実装してくれるコンポーネントです。

<img src='https://raw.githubusercontent.com/mmazzarolo/react-native-tips/master/imgs/modal.gif' width=30%>

## 26. NativeBase

* https://nativebase.io/

NativeBaseはUIライブラリで様々なコンポーネントを提供してくれます。WebでいうところのBootstrapみたいなものですね。

<img src='https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/master/screenshots/Android.gif' width=40%>


## まとめ
開発環境もかなり変化していたり、便利そうなコンポーネントも増えているのでアプリの開発が捗りそうです。
調べているとWixがReact Nativeに対してかなり力を入れている印象でした。

ここにあるいくつかはExpoを使う事で代用できます。
しかしExpoを使うとNativeコードの編集が難しいので、Expoの機能をみて、自分の実装したいものがNativeコードの編集をしなくて完結できるか確認しましょう。
自分もこれが理由で、`create-react-native-app`を諦めました。

> 参考：https://qiita.com/gogotanaka/items/07f9f5ed8e93a47a8bcd#expo