ActivityIndicator

ActivityIndicator

ActivityIndicator draws the platform's circular spinner. It inherits every View prop and adds four of its own: animating (default true) shows or stops it; color defaults to the system accent color on Android and to #999999 on iOS; size takes 'small' (20 points, the default) or 'large' (36 points), and on Android also any number; and hidesWhenStopped (iOS only, default true) decides whether a stopped spinner stays visible.

IndicatorDemo.tsx: the three sizes and a start/stop toggleTSX

import { useState } from 'react';
import { ActivityIndicator, Button, View } from 'react-native';
export default function IndicatorDemo() {
  const [busy, setBusy] = useState(true);
  return (
    <View style={{ flex: 1, justifyContent: 'center', gap: 32 }}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
        <ActivityIndicator animating={busy} />
        <ActivityIndicator animating={busy} size="large" color="#ef6c00" />
        <ActivityIndicator animating={busy} size={72} color="#2e7d32" />
      </View>
      <Button title={busy ? 'Stop' : 'Start'} onPress={() => setBusy(!busy)} />
    </View>
  );
}

Stop sets animating to false, which hides all three; the figure in Loading States in BookNest shows a large one at work in BookNest.

MENU