Building Custom Activity Indicators

In this lesson, you will learn how to move beyond generic spinners by designing branded, custom activity indicators that maintain user engagement during asynchronous tasks.

Why Custom Matters

While React Native provides a default ActivityIndicator component, it is often too rigid for modern brand guidelines. A custom indicator transforms a "waiting" state into a moment of brand personality, making your app feel polished rather than generic.

The Anatomy of a Custom Indicator

At its core, a custom activity indicator is simply a component that uses an Animated value to rotate or scale an element (like a logo or a brand icon) while a process—like fetching list data or uploading a photo—is running.

To build one, you need three ingredients:

1. The Visual: A component (like an Image or Svg) that represents your brand.
2. The Animation: An Animated.Value that drives a continuous loop.
3. The State Control: A boolean flag (e.g., isLoading) that determines if the animation should be running.

Example: A Rotating Logo Spinner

Here is how you can create a simple branded spinner:

import React, { useEffect, useRef } from 'react';
import { Animated, Easing, Image, View } from 'react-native';

const BrandedLoader = ({ isLoading }) => {
  const rotateValue = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (isLoading) {
      Animated.loop(
        Animated.timing(rotateValue, {
          toValue: 1,
          duration: 1000,
          easing: Easing.linear,
          useNativeDriver: true,
        })
      ).start();
    }
  }, [isLoading]);

  const spin = rotateValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  return (
    <Animated.View style={{ transform: [{ rotate: spin }] }}>
      <Image source={require('./my-brand-logo.png')} />
    </Animated.View>
  );
};

Integrating into Your App

You can trigger this component whenever your asynchronous operations begin. Whether you are refreshing a list or fetching media, displaying a custom spinner provides immediate visual feedback. It tells the user that the app is active and performing work, reducing the perceived waiting time.

Key Takeaway: Custom activity indicators replace generic spinners with branded visuals, turning functional loading states into essential touchpoints for your brand identity.