Gauge

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

Usage

Basic gauge

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

export default function BasicGaugeExample() {
  // A linear gauge stretches to the width it is given, so give the host a size.
  return (
    <Host style={{ flex: 1 }}>
      <Gauge value={0.5} />
    </Host>
  );
}

With label

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

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

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

With value labels

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

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

export default function ValueLabelsExample() {
  return (
    <Host style={{ flex: 1 }}>
      <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.

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

export default function GaugeStylesExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={16}>
        <Text>Circular</Text>
        <Gauge value={0.5} modifiers={[gaugeStyle('circular')]}>
          <Text>Circular</Text>
        </Gauge>
        <Text>Circular Capacity</Text>
        <Gauge
          value={0.5}
          modifiers={[gaugeStyle('circularCapacity')]}>
          <Text>Circular Capacity</Text>
        </Gauge>
        <Text>Linear</Text>
        <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.

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

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

API

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

Component

`Gauge`

Type: React.Element<GaugeProps>

Renders a SwiftUI Gauge component.

GaugeProps

`children`

Optional • Type: ReactNode

A label describing the gauge's purpose.

`currentValueLabel`

Optional • Type: ReactNode

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

`max`

Optional • Type: number • Default: 1

The maximum value of the gauge range.

`maximumValueLabel`

Optional • Type: ReactNode

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

`min`

Optional • Type: number • Default: 0

The minimum value of the gauge range.

`minimumValueLabel`

Optional • Type: ReactNode

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

`value`

Type: number

The current value of the gauge.

Inherited props

CommonViewModifierProps

Modifiers

Use these modifiers in the modifiers prop of the SwiftUI version.

Modifiers for Gauge

Modifiers for any view

Sources

The original Expo docs for this page:

Gauge (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/gauge.md)

On this page