Progress Indicators

Jetpack Compose progress indicator components for displaying operation status.

Android

Included in Expo Go

GitHub

npm

Changelog

Bundled version:

~57.0.1

Expo UI Progress Indicators match the official Jetpack Compose Progress Indicator API.

Indeterminate circular progress indicator with two determinate linear progress bars at 30% and 75%

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Linear progress

A horizontal bar that fills to indicate progress. Provide a progress value between 0 and 1 for determinate mode.

LinearExample.tsx

import { Host, LinearProgressIndicator } from '@expo/ui/jetpack-compose';

export default function LinearExample() {
  return (
    <Host matchContents>
      <LinearProgressIndicator progress={0.5} />
    </Host>
  );
}

Circular progress

A spinning circle whose stroke grows to indicate progress.

CircularExample.tsx

import { Host, CircularProgressIndicator } from '@expo/ui/jetpack-compose';

export default function CircularExample() {
  return (
    <Host matchContents>
      <CircularProgressIndicator progress={0.75} />
    </Host>
  );
}

Indeterminate

Omit the progress prop to animate continuously without indicating a specific completion level.

IndeterminateExample.tsx

import {
  CircularProgressIndicator,
  CircularWavyProgressIndicator,
  Column,
  Host,
  LinearProgressIndicator,
  LinearWavyProgressIndicator,
} from '@expo/ui/jetpack-compose';

export default function IndeterminateExample() {
  return (
    <Host matchContents>
      <Column verticalArrangement={{ spacedBy: 16 }}>
        <LinearProgressIndicator />
        <CircularProgressIndicator />
        <CircularWavyProgressIndicator />
        <LinearWavyProgressIndicator />
      </Column>
    </Host>
  );
}

Custom colors

Use color for the indicator and trackColor for the background track.

ColorsExample.tsx

import { Host, CircularProgressIndicator } from '@expo/ui/jetpack-compose';

export default function ColorsExample() {
  return (
    <Host matchContents>
      <CircularProgressIndicator progress={0.6} color="red" trackColor="#cccccc" />
    </Host>
  );
}

Wavy variants

LinearWavyProgressIndicator and CircularWavyProgressIndicator add an expressive wave animation from Material 3 Expressive.

WavyExample.tsx

import {
  Host,
  LinearWavyProgressIndicator,
  CircularWavyProgressIndicator,
  Column,
} from '@expo/ui/jetpack-compose';

export default function WavyExample() {
  return (
    <Host matchContents>
      <Column verticalArrangement={{ spacedBy: 16 }}>
        <LinearWavyProgressIndicator progress={0.6} />
        <CircularWavyProgressIndicator progress={0.6} />
      </Column>
    </Host>
  );
}

API

import {
  LinearProgressIndicator,
  CircularProgressIndicator,
  LinearWavyProgressIndicator,
  CircularWavyProgressIndicator,
} from '@expo/ui/jetpack-compose';

Components

`CircularProgressIndicator`

Type: React.Element<ComponentType<CircularProgressIndicatorProps>>

A circular progress indicator that displays progress in a circular format.

Matches the Jetpack Compose CircularProgressIndicator.

Common props shared by all progress indicator variants.

CircularProgressIndicatorProps

`gapSize`

Optional • Type: number

Gap size between the indicator and track in dp.

`strokeCap`

Optional • Type: StrokeCap • Default: 'round'

Stroke cap style for the indicator ends.

`strokeWidth`

Optional • Type: number

Width of the circular stroke in dp.

Inherited Props

ProgressCommonConfig

`CircularWavyProgressIndicator`

Type: React.Element<ComponentType<CircularWavyProgressIndicatorProps>>

A circular progress indicator with wavy animation style.

Matches the Jetpack Compose CircularWavyProgressIndicator.

Common props shared by all progress indicator variants.

CircularWavyProgressIndicatorProps

Inherited Props

ProgressCommonConfig

`LinearProgressIndicator`

Type: React.Element<ComponentType<LinearProgressIndicatorProps>>

A linear progress indicator that displays progress in a horizontal bar.

Matches the Jetpack Compose LinearProgressIndicator.

Common props shared by all progress indicator variants.

LinearProgressIndicatorProps

`drawStopIndicator`

Optional • Type: DrawStopIndicatorConfig

Configuration for the stop indicator dot at the end of the determinate progress track.

`gapSize`

Optional • Type: number

Gap size between the indicator and track in dp.

`strokeCap`

Optional • Type: StrokeCap • Default: 'round'

Stroke cap style for the indicator ends.

Inherited Props

ProgressCommonConfig

`LinearWavyProgressIndicator`

Type: React.Element<ComponentType<LinearWavyProgressIndicatorProps>>

A linear progress indicator with wavy animation style.

Matches the Jetpack Compose LinearWavyProgressIndicator.

Common props shared by all progress indicator variants.

LinearWavyProgressIndicatorProps

`stopSize`

Optional • Type: number

Size of the stop indicator in dp at the end of the determinate progress track.

Inherited Props

ProgressCommonConfig

Types

`DrawStopIndicatorConfig`

Configuration for the stop indicator dot at the end of the determinate linear progress track. When provided, draws a stop indicator with the given options. Omit to use the Compose default.

Property	Type	Description
color(optional)	`ColorValue`	Color of the stop indicator. Defaults to the indicator's color.
stopSize(optional)	`number`	Size of the stop indicator in dp. Defaults to the Material 3 default.
strokeCap(optional)	`StrokeCap`	Stroke cap style for the stop indicator. Defaults to the indicator's strokeCap.

`ProgressCommonConfig`

Common props shared by all progress indicator variants.

Property	Type	Description
color(optional)	`ColorValue`	Progress indicator color.
modifiers(optional)	`ModifierConfig[]`	Modifiers for the component.
progress(optional)	`number \| null`	The current progress value between `0` and `1`. Omit for indeterminate.
trackColor(optional)	`ColorValue`	Track (background) color.

`StrokeCap`

Literal Type: string

Stroke cap style for progress indicators.

Acceptable values are: 'round' | 'butt' | 'square'