【React Native】プログレスアイコンを実装できるライブラリ「react-native-progress」

React Native でプログレスバーやプログレスサークルが簡単に実装できるライブラリが便利だったのでご紹介。

ライブラリ名は「react-native-progress」で、GitHub のページはこちらです。

GitHub – oblador/react-native-progress: Progress indicators and spinners for React Native using ReactART
https://github.com/oblador/react-native-progress

導入て順ですが、まず下記のコマンドを実行してライブラリをインストールします。

npm install react-native-progress --save

なお、プログレスサークルなどの円形のローディングアイコンを表示したい場合は下記も併せて実行してください。

npm install @react-native-community/art --save

準備はこれだけ！

あとは任意の場所でライブラリをインポートして、プログレスサークルを表示させます。

import * as Progress from 'react-native-progress';

<Progress.CircleSnail
  indeterminate={true}
  color='F08300'
  duration={600}
  spinDuration={4000} />

私は円形のローディングアイコンしか使いませんでしたが、かなり細かい指定ができます！
色やサイズもそうですが、回転の速度なども指定できました。
回転速度の微調整は少々難しかったですが、ここまでカスタマイズできるのは良いですね。

以上、React Native でプログレスサークルなどのローディングアイコンを表示できるライブラリ「react-native-progress」のご紹介でした。
ご参考になれば幸いです。