React Nativeでローディングインジケーターを表示する方法｜ActivityIndicatorの使い方を解説

ローディングインジケーターは、ユーザーがUI上で行ったリクエストに時間がかかることを伝えるための重要なUI要素です。たとえば、フォーム入力後の送信ボタンをクリックしたときや、検索ボタンを押してデータを取得する際などに表示することで、アプリが動作中であることをユーザーに明確に示せます。

React Nativeでは、標準搭載されているActivityIndicatorコンポーネントを使うだけで、簡単にローディングインジケーターを実装できます。

ActivityIndicatorの基本形

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

<ActivityIndicator animating={animating} color="#bc2b78" size="large" style={yourStyle} />

ActivityIndicatorを使用するには、react-nativeからインポートします。

import { ActivityIndicator } from 'react-native';

ActivityIndicatorの主なプロパティ

実装例：ローディングインジケーターの表示

まず、必要なコンポーネントをインポートします。

import { ActivityIndicator, View, StyleSheet } from 'react-native';

次に、ActivityIndicatorコンポーネントを配置します。

<ActivityIndicator
    animating={animating}
    color="#bc2b78"
    size="large"
    style={styles.activityIndicator} />

animatingにはstate変数を渡しており、初期値はtrueです。componentDidMount()内でcloseActivityIndicatorメソッドを呼び出し、60秒（60000ミリ秒）後にanimatingをfalseに切り替えることで、一定時間後にインジケーターが非表示になる仕組みです。

state = { animating: true }
closeActivityIndicator = () => setTimeout(() => this.setState({
    animating: false }), 60000)
componentDidMount = () => this.closeActivityIndicator()

完全なサンプルコード（クラスコンポーネント）

import React, { Component } from 'react';
import { ActivityIndicator, View, StyleSheet } from 'react-native';

class ActivityIndicatorExample extends Component {
    state = { animating: true }

    closeActivityIndicator = () => setTimeout(() => this.setState({
        animating: false }), 60000)

    componentDidMount = () => this.closeActivityIndicator()

    render() {
        const animating = this.state.animating;
        return (
            <View style={styles.container}>
                <ActivityIndicator
                    animating={animating}
                    color="#bc2b78"
                    size="large"
                    style={styles.activityIndicator} />
            </View>
        );
    }
}

export default ActivityIndicatorExample;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 70
    },
    activityIndicator: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 80
    }
});

関数コンポーネント＋フックでの実装例

近年のReact Native開発では、関数コンポーネントとHooksを使った書き方が主流です。同じ挙動をuseStateとuseEffectで実装すると、より簡潔になります。

import React, { useState, useEffect } from 'react';
import { ActivityIndicator, View, StyleSheet } from 'react-native';

const ActivityIndicatorExample = () => {
    const [animating, setAnimating] = useState(true);

    useEffect(() => {
        const timer = setTimeout(() => setAnimating(false), 60000);
        return () => clearTimeout(timer); // クリーンアップでタイマーを解除
    }, []);

    return (
        <View style={styles.container}>
            <ActivityIndicator
                animating={animating}
                color="#bc2b78"
                size="large"
                style={styles.activityIndicator} />
        </View>
    );
};

export default ActivityIndicatorExample;

実際のアプリ開発では、APIリクエスト開始時にsetAnimating(true)、完了時にsetAnimating(false)を呼び出すことで、通信中のローディング表示として活用できます。

実行結果