0
# Progress & Status
1

2
Components for showing loading states, progress, and status information.
3

4
## Capabilities
5

6
### ActivityIndicator
7

8
Loading spinner component with customizable size and color.
9

10
```typescript { .api }
11
function ActivityIndicator(props: ActivityIndicatorProps): JSX.Element;
12

13
interface ActivityIndicatorProps {
14
  animating?: boolean;
15
  color?: string;
16
  size?: number | 'small' | 'large';
17
  hidesWhenStopped?: boolean;
18
  style?: StyleProp<ViewStyle>;
19
  theme?: ThemeProp;
20
}
21
```
22

23
### ProgressBar
24

25
Horizontal progress indicator for showing task completion.
26

27
```typescript { .api }
28
function ProgressBar(props: ProgressBarProps): JSX.Element;
29

30
interface ProgressBarProps {
31
  progress: number;
32
  color?: string;
33
  indeterminate?: boolean;
34
  visible?: boolean;
35
  style?: StyleProp<ViewStyle>;
36
  theme?: ThemeProp;
37
}
38
```
39

40
### Banner
41

42
Information banner for displaying important messages.
43

44
```typescript { .api }
45
function Banner(props: BannerProps): JSX.Element;
46

47
interface BannerProps {
48
  children: React.ReactNode;
49
  visible: boolean;
50
  actions: Array<{
51
    label: string;
52
    onPress: () => void;
53
    mode?: 'text' | 'outlined' | 'contained';
54
    loading?: boolean;
55
    disabled?: boolean;
56
  }>;
57
  icon?: IconSource;
58
  onShowAnimationFinished?: () => void;
59
  onHideAnimationFinished?: () => void;
60
  contentStyle?: StyleProp<ViewStyle>;
61
  style?: StyleProp<ViewStyle>;
62
  theme?: ThemeProp;
63
}
64
```
65

66
**Usage Examples:**
67

68
```typescript
69
import React, { useState } from 'react';
70
import { ActivityIndicator, ProgressBar, Banner } from 'react-native-paper';
71

72
// Activity Indicator
73
<ActivityIndicator animating={true} size="large" />
74
<ActivityIndicator animating={loading} color="#6200EE" />
75

76
// Progress Bar
77
<ProgressBar progress={0.5} color="#6200EE" />
78
<ProgressBar indeterminate color="red" />
79

80
// Banner
81
function BannerExample() {
82
  const [visible, setVisible] = useState(true);
83

84
  return (
85
    <Banner
86
      visible={visible}
87
      actions={[
88
        {
89
          label: 'Fix it',
90
          onPress: () => setVisible(false),
91
        },
92
        {
93
          label: 'Learn more',
94
          onPress: () => setVisible(false),
95
        },
96
      ]}
97
      icon="alert"
98
    >
99
      There was a problem processing a transaction on your credit card.
100
    </Banner>
101
  );
102
}
103
```