This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

Progress indicators

Jetpack Compose progress indicator components for displaying operation status.

Android

Included in Expo Go

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

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun 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>
  );
}

Wave configuration

Use amplitude to set the wave height, from 0 for a flat line to 1 for the full height. Use wavelength to set the length of a single wave in dp, and waveSpeed to set how fast the wave travels in dp per second. waveSpeed defaults to wavelength. Set waveSpeed={0} to render a static wave.

WaveConfigExample.tsx

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

export default function WaveConfigExample() {
  return (
    <Host matchContents>
      <LinearWavyProgressIndicator
        progress={0.6}
        amplitude={0.4}
        wavelength={24}
        waveSpeed={18}
      />
    </Host>
  );
}

API

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

No API data file found, sorry!