The classic, spinning loading circle – React Native's built-in, platform-appropriate way to show "something is loading" without building an animation yourself.

1. Description

ActivityIndicator automatically shows the platform's NATIVE loading indicator (styled slightly differently on iOS and Android) – size and color can be customized via props, the spinning itself is fully handled by the component.

2. Short example

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

3. Complete project: a simulated loading process

npx create-expo-app activityindicator-demo
cd activityindicator-demo

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

export default function App() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timerId = setTimeout(() => setLoading(false), 3000);
    return () => clearTimeout(timerId);
  }, []);

  if (loading) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#2563eb" />
        <Text style={styles.hint}>Loading data...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.success}>✓ Done loading!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  hint: { marginTop: 12, color: '#6b7280' },
  success: { fontSize: 20, color: '#16a34a', fontWeight: 'bold' },
});

4. Explanation

• size – "small" or "large" (or a specific pixel number on Android).
• color – color of the spinner, as a hex value or named color.
• setTimeout(..., 3000) simulates a 3-second network request here – in a real app you'd instead reflect the loading state of a fetch() request (see the "Axios in React Native" topic).
• return () => clearTimeout(timerId) – cleanup function: prevents the timer from still firing if the component disappears beforehand.

5. Outputs