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

A SwiftUI Gauge component for displaying progress with visual indicators.

A gauge component for displaying values within a range using visual indicators like circular or linear gauges.

Installation

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

Usage

Preview

Code

import { Gauge, Host } from "@expo/ui/swift-ui";

<Host matchContents>
  <Gauge
    max={{ value: 1, label: '1' }}
    min={{ value: 0, label: '0' }}
    current={{ value: 0.5 }}
    color={[
      PlatformColor('systemRed'),
      PlatformColor('systemOrange'),
      PlatformColor('systemYellow'),
      PlatformColor('systemGreen'),
    ]}
    type="circularCapacity"
  />
</Host>

See Official SwiftUI documentation for more information.

API

Component

Types