React NativeでProgressBar（プログレスバー）を表示する方法

ProgressBar（プログレスバー）は、コンテンツがまもなく利用可能になることをユーザーに伝えるためのUIコンポーネントです。特に、サーバーへデータを送信してレスポンスを待っている間などに表示すると、ユーザー体験の向上に大きく役立ちます。

React NativeでProgressBarを使用するには、まずreact-native-paperモジュールをnpm経由でインストールする必要があります。

react-native-paperのインストールコマンドは以下のとおりです。

npm install --save-dev react-native-paper

ProgressBarの基本的な記述方法は以下のとおりです。

<ProgressBar progress={progress_number} color="progresscolorbar" />

ProgressBarを実際に使うには、react-native-paperからインポートします。インポート文は次のように記述します。

import { ProgressBar } from 'react-native-paper';

ProgressBarの主なプロパティ

ProgressBarには、表示をカスタマイズするために便利なプロパティがいくつか用意されています。主なプロパティは以下のとおりです。

実装例：ProgressBarを表示してみる

ProgressBarの表示はとてもシンプルです。まず、react-native-paperからインポートしましょう。

import { ProgressBar } from 'react-native-paper';

続いて、プログレスバーを表示するコードは以下のようになります。

<ProgressBar style={{ marginTop: 200 }} progress={0.5} color="#00BCD4" />

progressに0.5を指定しているので、半分（50%）まで進んだ状態のプログレスバーが表示されます。実際のアプリ開発では、この値をstateで管理し、処理の進行に合わせて動的に更新するのが一般的です。

完全なサンプルコードは以下のとおりです。

import * as React from 'react';
import { ProgressBar } from 'react-native-paper';

const MyComponent = () => (
   <ProgressBar style={{ marginTop: 200 }} progress={0.5} color="#00BCD4" />
);

export default MyComponent;

実行結果

上記のコードを実行すると、画面上端から200px下の位置に、水色（#00BCD4）のプログレスバーが50%の進捗状態で表示されます。