ActivityIndicator Component in React Native

ActivityIndicator displays a circular loading animation. It is commonly used when an application is waiting for an asynchronous operation to finish.

import { ActivityIndicator } from 'react-native';

It is useful for API requests, authentication, file uploads and other operations that take time.

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

ActivityIndicator can be combined with other components to create a complete loading screen.

<ActivityIndicator />

This displays a loading spinner using the default settings of the current platform.

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

export default function App() {

    return (
        <View>
            <ActivityIndicator />
        </View>
    );

}

View is commonly used as the container for positioning the loading indicator.

The size prop controls the size of the spinner.

<ActivityIndicator
    size="small"
/>

<ActivityIndicator
    size="large"
/>

The standard size values are small and large.

<ActivityIndicator
    size="small"
/>

A small spinner is useful inside compact loading areas, such as buttons, cards and smaller screen sections.

<ActivityIndicator
    size="large"
/>

A large spinner is commonly used for full-screen loading indicators.

The color prop changes the spinner color.

<ActivityIndicator
    size="large"
    color="blue"
/>

You can use supported color values, including hexadecimal color codes.

<ActivityIndicator
    size="large"
    color="#007BFF"
/>

<ActivityIndicator
    size="large"
    color="#28A745"
/>

Custom colors help maintain a consistent appearance throughout the application.

The animating prop controls whether the loading indicator should animate.

<ActivityIndicator
    animating={true}
/>

By default, ActivityIndicator animates.

<ActivityIndicator
    animating={false}
/>

Setting animating to false stops the animation. For conditional loading interfaces, rendering the indicator only while loading is often clearer.

React state can control whether a loading indicator is displayed.

import { useState } from 'react';

const [loading, setLoading] =
    useState(true);

{loading && (
    <ActivityIndicator
        size="large"
    />
)}

The spinner appears only when loading is true.

{loading ? (

    <ActivityIndicator
        size="large"
        color="blue"
    />

) : (

    <Text>
        Data Loaded Successfully
    </Text>

)}

Conditional rendering allows the application to display either the spinner or the completed content.

<View
    style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }}
>

    <ActivityIndicator
        size="large"
    />

</View>

Flexbox properties can position the spinner in the center of the screen.

<View>

    <ActivityIndicator
        size="large"
        color="blue"
    />

    <Text>
        Loading...
    </Text>

</View>

Adding loading text provides additional information about the current operation.

const [loading, setLoading] =
    useState(false);

<Button
    title="Load Data"
    onPress={() => {
        setLoading(true);
    }}
/>

{loading && (
    <ActivityIndicator
        size="large"
    />
)}

This example starts the loading indicator when the button is pressed. In a real application, stop loading when the operation finishes.

A timer can simulate an asynchronous operation for learning purposes.

const [loading, setLoading] =
    useState(false);

function loadData() {

    setLoading(true);

    setTimeout(() => {

        setLoading(false);

    }, 3000);

}

This example stops the spinner after three seconds. Real applications should stop loading when the actual operation completes.

A common use of ActivityIndicator is showing loading feedback while requesting data from an API.

async function fetchData() {

    setLoading(true);

    try {

        const response = await fetch(
            'https://jsonplaceholder.typicode.com/users'
        );

        if (!response.ok) {
            throw new Error('Request failed');
        }

        const data = await response.json();

        console.log(data);

    } catch (error) {

        console.log(error);

    } finally {

        setLoading(false);

    }

}

The finally block ensures that loading stops after the request succeeds or fails.

const [loading, setLoading] =
    useState(false);

async function handleLogin() {

    setLoading(true);

    try {

        // Perform login request here.

    } catch (error) {

        console.log(error);

    } finally {

        setLoading(false);

    }

}

A loading indicator can inform users that their login request is being processed.

<Button
    title={
        loading
            ? 'Please Wait...'
            : 'Submit'
    }
    disabled={loading}
    onPress={handleSubmit}
/>

Disabling the button during an operation helps prevent accidental repeated submissions.

<Pressable
    disabled={loading}
    onPress={handleSubmit}
    style={{
        backgroundColor: 'blue',
        padding: 15,
        borderRadius: 8,
        alignItems: 'center'
    }}
>

    {loading ? (

        <ActivityIndicator
            color="white"
        />

    ) : (

        <Text
            style={{
                color: 'white'
            }}
        >
            Submit
        </Text>

    )}

</Pressable>

Pressable provides more styling flexibility than the built-in Button component.

function LoadingScreen() {

    return (

        <View
            style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center'
            }}
        >

            <ActivityIndicator
                size="large"
                color="blue"
            />

            <Text>
                Please wait...
            </Text>

        </View>

    );

}

A full-screen loading indicator is useful when an entire screen is waiting for essential data.

{loading ? (

    <ActivityIndicator
        size="large"
    />

) : (

    <FlatList
        data={students}
        keyExtractor={(item) =>
            String(item.id)
        }
        renderItem={({ item }) => (

            <Text>
                {item.name}
            </Text>

        )}
    />

)}

This pattern can display a spinner until list data becomes available.

const styles = StyleSheet.create({

    loader: {
        marginTop: 30
    }

});

<ActivityIndicator
    size="large"
    color="blue"
    style={styles.loader}
/>

StyleSheet can help organize layout and spacing properties.

<View
    style={{
        padding: 30,
        backgroundColor: '#F1F5F9',
        borderRadius: 12
    }}
>

    <ActivityIndicator
        size="large"
        color="#2563EB"
    />

</View>

A container can provide background color, spacing and other visual properties.

The following example simulates loading data when a button is pressed.

import React, { useState } from 'react';

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

export default function App() {

    const [loading, setLoading] =
        useState(false);

    const [message, setMessage] =
        useState('');

    function loadData() {

        setLoading(true);

        setMessage('');

        setTimeout(() => {

            setLoading(false);

            setMessage(
                'Data loaded successfully!'
            );

        }, 3000);

    }

    return (

        <View style={styles.container}>

            <Text style={styles.title}>
                ActivityIndicator Example
            </Text>

            <Button
                title="Load Data"
                onPress={loadData}
                disabled={loading}
            />

            {loading ? (

                <View style={styles.loader}>

                    <ActivityIndicator
                        size="large"
                        color="#2563EB"
                    />

                    <Text style={styles.text}>
                        Loading data...
                    </Text>

                </View>

            ) : (

                <Text style={styles.text}>
                    {message}
                </Text>

            )}

        </View>

    );

}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        padding: 20
    },

    title: {
        fontSize: 24,
        fontWeight: 'bold',
        textAlign: 'center',
        marginBottom: 25
    },

    loader: {
        marginTop: 30,
        alignItems: 'center'
    },

    text: {
        marginTop: 20,
        textAlign: 'center',
        fontSize: 16
    }

});

When the user presses the button, the loading indicator appears. After three seconds, the application displays a success message.

• Forgetting to import ActivityIndicator.
• Not managing the loading state properly.
• Forgetting to stop loading after an operation finishes.
• Displaying a spinner without providing useful feedback.
• Not handling API errors.
• Allowing repeated submissions during loading.
• Using a loading spinner when measurable progress would be more informative.

• Use ActivityIndicator for operations with unknown completion times.
• Use React state to control loading.
• Show meaningful loading messages when appropriate.
• Use suitable spinner colors and sizes.
• Handle successful and failed asynchronous operations.
• Use finally to reset loading when appropriate.
• Prevent repeated form submissions during loading.
• Keep loading indicators accessible and easy to understand.
• Avoid displaying a spinner indefinitely when an operation fails.

User Action
    |
    v
Start Operation
    |
    v
Set Loading = true
    |
    v
Display ActivityIndicator
    |
    v
Perform Async Operation
    |
    v
Handle Success or Error
    |
    v
Set Loading = false
    |
    v
Hide ActivityIndicator
    |
    v
Display Result

ActivityIndicator provides useful feedback while an application performs an operation. When combined with React state and asynchronous functions, it becomes an important part of responsive mobile interfaces.