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

Expo UI LinearProgress matches the official Jetpack Compose Progress Indicator API and displays progress in a horizontal bar 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 animating bar.

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

export default function IndeterminateLinearExample() {
  return (
    <Host matchContents>
      <LinearProgress />
    </Host>
  );
}

Determinate progress

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

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

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

Wavy progress

LinearWavyProgress renders a linear progress indicator with a wavy animation style.

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

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

API

import { LinearProgress, LinearWavyProgress } from '@expo/ui/jetpack-compose';

Components

Types

Components

Types