ProgressView

Expo UI ProgressView matches the official SwiftUI ProgressView API and supports styling via the progressViewStyle modifier.

Usage

Note: When using the linear style (which is the default for determinate progress), ProgressView is a flexible-width component, it expands to fill available horizontal space. When using matchContents on the Host, you should apply a frame modifier on the ProgressView to give it an explicit width. Alternatively, give the Host an explicit size using style (for example, style={{ width: 300 }} or style={{ flex: 1 }}). The circular style and indeterminate spinner have a fixed size and work with matchContents.

Indeterminate progress

When no value is provided, the progress view displays an indeterminate indicator (spinner).

import { Host, ProgressView } from '@expo/ui/swift-ui';

export default function IndeterminateExample() {
  return (
    <Host matchContents>
      <ProgressView />
    </Host>
  );
}

Determinate progress

Provide a value between 0 and 1 to show determinate progress.

import { Host, ProgressView } from '@expo/ui/swift-ui';

export default function DeterminateExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ProgressView value={0.5} />
    </Host>
  );
}

Progress view styles

Use the progressViewStyle modifier to change the progress view's appearance. Available styles are: automatic, linear, and circular.

import {
  Host,
  ProgressView,
  Text,
  VStack,
} from '@expo/ui/swift-ui';
import { progressViewStyle } from '@expo/ui/swift-ui/modifiers';

export default function ProgressViewStylesExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={16}>
        <Text>Linear</Text>
        <ProgressView
          value={0.5}
          modifiers={[progressViewStyle('linear')]}
        />
        <Text>Circular</Text>
        <ProgressView
          value={0.5}
          modifiers={[progressViewStyle('circular')]}
        />
      </VStack>
    </Host>
  );
}

With label

You can pass custom components as children to provide a label for the progress view.

import { Host, ProgressView, Text } from '@expo/ui/swift-ui';

export default function LabelExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ProgressView value={0.25}>
        <Text>Loading...</Text>
      </ProgressView>
    </Host>
  );
}

Tinted progress view

Use the tint modifier to change the progress view's color.

import { Host, ProgressView } from '@expo/ui/swift-ui';
import { tint } from '@expo/ui/swift-ui/modifiers';

export default function TintedExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ProgressView value={0.7} modifiers={[tint('red')]} />
    </Host>
  );
}

Timer-based progress

Use the timerInterval prop to create a progress view that automatically animates over a time range. This is useful for showing countdown timers or timed operations.

Note: Timer-based progress is only available on iOS 16+ and tvOS 16+.

import {
  Host,
  ProgressView,
  Text,
  VStack,
} from '@expo/ui/swift-ui';

export default function TimerExample() {
  const startDate = new Date();
  const endDate = new Date(Date.now() + 10000); // 10 seconds from now

  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={16}>
        <ProgressView
          timerInterval={{ lower: startDate, upper: endDate }}
        />
        <ProgressView
          timerInterval={{ lower: startDate, upper: endDate }}
          countsDown={false}>
          <Text>Counting up</Text>
        </ProgressView>
      </VStack>
    </Host>
  );
}

API

import { ProgressView } from '@expo/ui/swift-ui';

Component

ProgressView

Type: React.Element<ProgressViewProps>

Renders a SwiftUI ProgressView component.

ProgressViewProps

children

Optional • Type: ReactNode

A label describing the progress view's purpose.

countsDown

Optional • Type: boolean • Default: true

A Boolean value that determines whether the view empties or fills as time passes. If true, which is the default, the view empties.

timerInterval

Optional • Type: ClosedRangeDate

The lower and upper bounds for automatic timer progress.

value

Optional • Literal type: union

The current progress value. A value between 0 and 1. When undefined, the progress view displays an indeterminate indicator.

Acceptable values are: number | null

Inherited props

• CommonViewModifierProps