昨日はReact Nativeやってるよーな話を書きました。今日超具体的なライブラリの小ネタを書きます。長いのはたまにしか書けないね。

読み込み時のクルクルについてです。React Nativeには標準でローディングインジケーターが用意されています。

ActivityIndicator · React Native

Displays a circular loading indicator.

reactnative.dev

なんだけど、色や大きさなどちょっとしたオプションしかなく、テキストと一緒に表示させることができません。もちろんTextと一緒に使えばいいし、コンポーネントを作ってもいいし。

でもまあ、これだけ汎用的なコンポーネントはさっさとパッケージを使うのが良いと思います。個人的には部品になるようなUIコンポーネントは積極的に使う派です。

ざっくり探すと2つのライブラリが見つかりました。

1つ目が、react-native-loading-spinner-overlay

GitHub - joinspontaneous/react-native-loading-spinner-overlay: React Native loading spinner overlay

:barber: React Native loading spinner overlay. Contribute to joinspontaneous/react-native-loading-spinner-overlay development by creating an account on GitHub.

github.com

2つ目は、react-native-busy-indicator

GitHub - RealOrangeOne/react-native-busy-indicator: A simple, event controlled, busy indicator for react-native

A simple, event controlled, busy indicator for react-native - GitHub - RealOrangeOne/react-native-busy-indicator: A simple, event controlled, busy indicator for react-native

github.com

前者のほうが2018/04/09時点でスター数が700近くと、後者の8倍近くのスター数です。前者のほうが最終更新が古いもののスター数を考えるとこちらでいいかな。react-native-loading-spinner-overlayを試します。

コード

GitHubのREADMEにあるアニメーション画像では、テキストが入っていないので雰囲気がわかりません。そこで文字ありの雰囲気がわかるようにしてみます。

何はともあれインストールとインポート。

$ npm install --save react-native-loading-spinner-overlay@latest

import Spinner from 'react-native-loading-spinner-overlay';

そして、ひとまず常に表示する形でコンポーネントを追加してみましょう。

class MyComponent extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'space-around' }}>
        <Button title="ボタン" onPress={() => console.log('ボタン')} />
        <Spinner
          visible
          textContent="読み込み中"
          textStyle={{ color: 'white' }}
          />
      </View>
    );
  }
}

すると、このように表示されます。

背後にボタンを置いていますが、ローディングインジケータのオーバーレイがあるためボタンをタップすることはできません。ユーザーに操作させずに待たせることができます。

オーバーレイの色が薄いと白文字や白インジケータが見にくいかもしれません。

overlayColor="rgba(0, 0, 0, 0.5)"

// デフォルトは
// overlayColor="rgba(0, 0, 0, 0.25)"

ちょっと暗くするといい感じです。

簡易に使うには便利です。

（まあ、React NativeのUIライブラリ系は簡易に使うのは便利だけど、ちょっと凝りたくなると結局自前コンポーネントにせざるを得ないってことが多いんですけどね。）