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

Gauge

A SwiftUI Gauge component for displaying progress with visual indicators.

iOS

GitHub

npm

Changelog

Expo UI Gauge matches the official SwiftUI Gauge API and supports styling via the gaugeStyle modifier.

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

Basic gauge

BasicGaugeExample.tsx

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

export default function BasicGaugeExample() {
  return (
    <Host matchContents>
      <Gauge value={0.5} />
    </Host>
  );
}

With label

You can pass custom components as children to provide a label for the gauge.

LabelExample.tsx

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

export default function LabelExample() {
  return (
    <Host matchContents>
      <Gauge value={0.7}>
        <Text>Progress</Text>
      </Gauge>
    </Host>
  );
}

With value labels

Use the currentValueLabel, minimumValueLabel, and maximumValueLabel props to display value information.

ValueLabelsExample.tsx

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

export default function ValueLabelsExample() {
  return (
    <Host matchContents>
      <Gauge
        value={50}
        min={0}
        max={100}
        currentValueLabel={<Text>50%</Text>}
        minimumValueLabel={<Text>0</Text>}
        maximumValueLabel={<Text>100</Text>}>
        <Text>Usage</Text>
      </Gauge>
    </Host>
  );
}

Gauge styles

Use the gaugeStyle modifier to change the gauge's appearance. Available styles are: automatic, circular, circularCapacity, linear, and linearCapacity.

GaugeStylesExample.tsx

import { Host, Gauge, Text, VStack } from '@expo/ui/swift-ui';
import { gaugeStyle } from '@expo/ui/swift-ui/modifiers';

export default function GaugeStylesExample() {
  return (
    <Host matchContents>
      <VStack spacing={16}>
        <Gauge value={0.5} modifiers={[gaugeStyle('circular')]}>
          <Text>Circular</Text>
        </Gauge>
        <Gauge value={0.5} modifiers={[gaugeStyle('circularCapacity')]}>
          <Text>Circular Capacity</Text>
        </Gauge>
        <Gauge value={0.5} modifiers={[gaugeStyle('linear')]}>
          <Text>Linear</Text>
        </Gauge>
        <Gauge value={0.5} modifiers={[gaugeStyle('linearCapacity')]}>
          <Text>Linear Capacity</Text>
        </Gauge>
      </VStack>
    </Host>
  );
}

Tinted gauge

Use the tint modifier to change the gauge's color.

TintedGaugeExample.tsx

import { Host, Gauge, VStack } from '@expo/ui/swift-ui';
import { gaugeStyle, tint } from '@expo/ui/swift-ui/modifiers';

export default function TintedGaugeExample() {
  return (
    <Host matchContents>
      <VStack spacing={16}>
        <Gauge value={0.7} modifiers={[gaugeStyle('circular'), tint('green')]} />
        <Gauge value={0.3} modifiers={[gaugeStyle('linear'), tint('red')]} />
      </VStack>
    </Host>
  );
}

API

Component

`Gauge`

iOS

Type: React.Element<GaugeProps>

Renders a SwiftUI Gauge component.

GaugeProps

`children`

iOS

Optional • Type: React.ReactNode

A label describing the gauge's purpose.

`currentValueLabel`

iOS

Optional • Type: React.ReactNode

A label showing the current value. Use Text or Label to display the value.

`max`

iOS

Optional • Type: number • Default: 1

The maximum value of the gauge range.

`maximumValueLabel`

iOS

Optional • Type: React.ReactNode

A label showing the maximum value. Use Text or Label to display the value.

`min`

iOS

Optional • Type: number • Default: 0

The minimum value of the gauge range.

`minimumValueLabel`

iOS

Optional • Type: React.ReactNode

A label showing the minimum value. Use Text or Label to display the value.

`value`

iOS

Type: number

The current value of the gauge.

Inherited Props

CommonViewModifierProps