Progress & Status

function ActivityIndicator(props: ActivityIndicatorProps): JSX.Element;

interface ActivityIndicatorProps {
  animating?: boolean;
  color?: string;
  size?: number | 'small' | 'large';
  hidesWhenStopped?: boolean;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

function ProgressBar(props: ProgressBarProps): JSX.Element;

interface ProgressBarProps {
  progress: number;
  color?: string;
  indeterminate?: boolean;
  visible?: boolean;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

function Banner(props: BannerProps): JSX.Element;

interface BannerProps {
  children: React.ReactNode;
  visible: boolean;
  actions: Array<{
    label: string;
    onPress: () => void;
    mode?: 'text' | 'outlined' | 'contained';
    loading?: boolean;
    disabled?: boolean;
  }>;
  icon?: IconSource;
  onShowAnimationFinished?: () => void;
  onHideAnimationFinished?: () => void;
  contentStyle?: StyleProp<ViewStyle>;
  style?: StyleProp<ViewStyle>;
  theme?: ThemeProp;
}

import React, { useState } from 'react';
import { ActivityIndicator, ProgressBar, Banner } from 'react-native-paper';

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

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

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

  return (
    <Banner
      visible={visible}
      actions={[
        {
          label: 'Fix it',
          onPress: () => setVisible(false),
        },
        {
          label: 'Learn more',
          onPress: () => setVisible(false),
        },
      ]}
      icon="alert"
    >
      There was a problem processing a transaction on your credit card.
    </Banner>
  );
}