Der klassische, sich drehende Lade-Kreis – die eingebaute, plattformgerechte Art, React Native "etwas lädt gerade" anzeigen zu lassen, ohne selbst eine Animation bauen zu müssen.

1. Beschreibung

ActivityIndicator zeigt automatisch den NATIVEN Lade-Indikator der jeweiligen Plattform an (auf iOS und Android leicht unterschiedlich gestaltet) – Größe und Farbe lassen sich über Props anpassen, das Drehen selbst übernimmt die Komponente komplett.

2. Kurzes Beispiel

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

3. Komplettes Projekt: simulierter Ladevorgang

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 [ladend, setLadend] = useState(true);

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

  if (ladend) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#2563eb" />
        <Text style={styles.hinweis}>Daten werden geladen...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.erfolg}>✓ Fertig geladen!</Text>
    </View>
  );
}

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

4. Erklärung

• size – "small" oder "large" (bzw. eine konkrete Pixelzahl unter Android).
• color – Farbe des Drehkreises, als Hex-Wert oder benannte Farbe.
• setTimeout(..., 3000) simuliert hier eine 3 Sekunden dauernde Netzwerk-Anfrage – in einer echten App würden Sie stattdessen den Ladezustand einer fetch()-Anfrage abbilden (siehe Thema "Axios in React Native").
• return () => clearTimeout(timerId) – Aufräumfunktion: verhindert, dass der Timer noch feuert, falls die Komponente vorher verschwindet.

5. Ausgaben