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

LoadingIndicator

Jetpack Compose loading indicator components for displaying loading state.

Android

Included in Expo Go

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

Default and contained loading indicators in indeterminate mode

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

Loading indicator

A morphing-shape loading animation from Material 3 Expressive.

LoadingIndicatorExample.tsx

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

export default function LoadingIndicatorExample() {
  return (
    <Host matchContents>
      <LoadingIndicator />
    </Host>
  );
}

Contained loading indicator

A loading indicator inside a colored background.

ContainedLoadingIndicatorExample.tsx

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

export default function ContainedLoadingIndicatorExample() {
  return (
    <Host matchContents>
      <ContainedLoadingIndicator />
    </Host>
  );
}

Indeterminate

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

IndeterminateExample.tsx

import {
  ContainedLoadingIndicator,
  Host,
  LoadingIndicator,
  Row,
} from '@expo/ui/jetpack-compose';

export default function IndeterminateExample() {
  return (
    <Host matchContents>
      <Row horizontalArrangement={{ spacedBy: 16 }}>
        <LoadingIndicator />
        <ContainedLoadingIndicator />
      </Row>
    </Host>
  );
}

Determinate

Pass an observable state from useNativeState as progress. Update progress.value between 0 and 1.

DeterminateExample.tsx

import {
  ContainedLoadingIndicator,
  Host,
  LoadingIndicator,
  Row,
  useNativeState,
} from '@expo/ui/jetpack-compose';
import { useEffect } from 'react';

export default function DeterminateExample() {
  const progress = useNativeState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      progress.value = (progress.value + 0.05) % 1;
    }, 500);
    return () => clearInterval(interval);
  }, [progress]);

  return (
    <Host matchContents>
      <Row horizontalArrangement={{ spacedBy: 16 }}>
        <LoadingIndicator progress={progress} />
        <ContainedLoadingIndicator progress={progress} />
      </Row>
    </Host>
  );
}

API

import {
  LoadingIndicator,
  ContainedLoadingIndicator,
} from '@expo/ui/jetpack-compose';

No API data file found, sorry!