ProgressDialog

The ProgressDialog component displays a modal dialog with a loading indicator and optional label text. It's ideal for showing progress during operations that require user attention, such as file uploads, downloads, or processing tasks.

It provides:

• Modal dialog with loading indicator
• Optional label text for operation description
• Customizable backdrop and animation
• Surface-based design that respects theme colors

Usage Playground

Show Component

Visible

Label

Code Snippet

import { ProgressDialog } from "@react-native-blossom-ui/overlays";

    function Usage() {
        return (
            <ProgressDialog/>
        );
    }

Usage

The basic usage shows a progress dialog with a loading indicator. This is useful for short operations where you want to inform the user that something is happening.

Show Progress Dialog

function ProgressDialogUsage() {
  const [visible, setVisible] = useState(false)

  const showProgress = () => {
    setVisible(true)
    setTimeout(() => setVisible(false), 3000)
  }

  return (
    <View>
      <Button onPress={showProgress}>Show Progress Dialog</Button>
      <ProgressDialog visible={visible} />
    </View>
  )
}

With Label

Add descriptive text to inform users about the current operation. The label appears next to the loading indicator, providing context for what's being processed.

Show with Custom Label

function ProgressDialogLabel() {
  const [visible, setVisible] = useState(false)

  const showProgress = () => {
    setVisible(true)
    setTimeout(() => setVisible(false), 3000)
  }

  return (
    <View>
      <Button onPress={showProgress}>Show with Custom Label</Button>
      <ProgressDialog visible={visible} label="Please wait, processing..." />
    </View>
  )
}

Custom

Customize the progress dialog with different label styles, activity indicator props, and dialog appearance. You can match the theme with status colors and adjust the visual presentation.

Custom Progress Dialog

function ProgressDialogCustom() {
  const [visible, setVisible] = useState(false)

  const showProgress = () => {
    setVisible(true)
    setTimeout(() => setVisible(false), 3000)
  }

  return (
    <View>
      <Button onPress={showProgress}>Custom Progress Dialog</Button>
      <ProgressDialog
        visible={visible}
        label="Deleting files..."
        labelStyle={{color: 'red', fontSize: 20, fontWeight: '600'}}
        activityIndicatorProps={{status: 'error', size: 'large'}}
      />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	Partial<ModalProps	--	Inherits properties from Partial<ModalProps
visible	boolean	--	Whether the ProgressDialog is visible or not.
label	string	Loading...	The label to be displayed next to the ActivityIndicator. If not provided, it will default to "Loading...".
labelStyle	StyleProp<TextStyle>	--	Style for the label text
activityIndicatorProps	ActivityIndicatorProps	--	Customize the activity indicator shown in the progress dialog