LoadingIndicator

用于显示加载状态的 Jetpack Compose 加载指示器组件。

Android

Included in Expo Go

Recommended version:

~57.0.3

Expo UI 加载指示器与官方 Jetpack Compose 加载指示器 API 匹配。

🌐 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

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

用法

🌐 Usage

加载指示器

🌐 Loading indicator

来自 Material 3 Expressive 的变形形状加载动画。

🌐 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

省略 progress 属性以实现连续动画，而不指示特定的完成度。

🌐 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

将 useNativeState 的可观察状态作为 progress 传递。在 0 和 1 之间更新 progress.value。

🌐 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';

Components

`ContainedLoadingIndicator`

Type: React.Element<ComponentType<ContainedLoadingIndicatorProps>>

A loading indicator that displays loading using morphing shapes inside a container.

Matches the Jetpack Compose ContainedLoadingIndicator.

Common props shared by loading indicator variants.

ContainedLoadingIndicatorProps

`containerColor`

Optional • Type: ColorValue

Loading indicator's container color

Inherited Props

LoadingIndicatorCommonConfig

`LoadingIndicator`

Type: React.Element<ComponentType<LoadingIndicatorCommonConfig>>

A loading indicator that displays loading using morphing shapes.

Matches the Jetpack Compose LoadingIndicator.

Types

`LoadingIndicatorCommonConfig`

Common props shared by loading indicator variants.

Property	Type	Description
color(optional)	`ColorValue`	Loading indicator color.
modifiers(optional)	`ModifierConfig[]`	Modifiers for the component.
progress(optional)	`ObservableState<number \| null>`	An observable state that holds the current progress value. Create one with `useNativeState(0)`. Omit for indeterminate loading.

`ObservableState`

Observable state shared between JavaScript and native views (Jetpack Compose on Android and SwiftUI on iOS).

Type: SharedObject extended by:

Property	Type	Description
onChange	`[listener] \| null`	A single listener invoked on the native UI runtime whenever the value changes (after iOS `didSet` and Android's setter). Assigning replaces the previous listener; assign `null` to clear. The initial value does not fire `onChange`. The callback must be a worklet so it can run synchronously on the UI thread. Attach it inside `useEffect` and clear it in the cleanup so the listener lifecycle matches the component lifecycle. Example `const state = useNativeState(0); useEffect(() => { state.onChange = (value) => { 'worklet'; console.log('changed to', value); }; }, []);`
value	`T`	The current value. Writes from a UI worklet are synchronous and immediately readable. Writes from the JS thread are scheduled to the UI thread asynchronously, the new value is not readable until the update has been applied. Prefer writing from a worklet when you need synchronous updates
get	`() => T`	Reads the current value. A React Compiler compliant alternative to reading `.value`
set	`(value: T) => void`	Writes a new value. A React Compiler-compliant alternative to assigning `.value`