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

Expo UI CircularProgress matches the official Jetpack Compose Progress Indicator API and displays progress in a circular format.

Installation

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

Usage

Indeterminate progress

When no progress is provided, the progress indicator displays an indeterminate spinning animation.

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

export default function IndeterminateCircularExample() {
  return (
    <Host matchContents>
      <CircularProgress />
    </Host>
  );
}

Determinate progress

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

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

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

Wavy progress

CircularWavyProgress renders a circular progress indicator with a wavy animation style.

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

export default function CircularWavyExample() {
  return (
    <Host matchContents>
      <CircularWavyProgress progress={0.6} />
    </Host>
  );
}

API

import { CircularProgress, CircularWavyProgress } from '@expo/ui/jetpack-compose';

Components

Types

Components

Types