iOS Progress and Gauges

ProgressView and Gauge under One.iOS

One.iOS ProgressView and Gauge in linear and circular styles

Progress and measurement views under One.iOS, drawn by SwiftUI.

ProgressView shows a determinate bar or an indeterminate spinner.
Gauge shows a value in a range, with optional labels.
Out-of-range values throw during render.
Both throw on web and Android. Keep them in an iOS branch or an .ios.tsx file.

Usage

import { One } from 'one'

<One.iOS.ProgressView label="Download" value={downloaded} total={size} />
<One.iOS.ProgressView label="Loading" />
<One.iOS.Gauge
  label="Speed"
  value={speed}
  maximumValue={120}
  currentValueLabel={`${speed}`}
  gaugeStyle="accessoryCircular"
/>

Both also accept accessibilityLabel, accessibilityHint, accessibilityValue, testID, style, onLayout, and swiftStyle.

ProgressView

Props	Type	Description
`value`numberWork done. Leave it unset for a spinner.	number	Work done. Leave it unset for a spinner.
`total`number = 1Work in all. Must be above zero.	number = 1	Work in all. Must be above zero.
`label`string = ""Text shown with the bar.	string = ""	Text shown with the bar.
`progressViewStyle`ProgressViewStyle = "automatic"automatic, linear, or circular.	ProgressViewStyle = "automatic"	automatic, linear, or circular.
`disabled`boolean = falseDims the view.	boolean = false	Dims the view.

value must lie between 0 and total, or the view throws.

Gauge

Props	Type	Description
`value`number = 0The current value.	number = 0	The current value.
`minimumValue`number = 0The low end of the range.	number = 0	The low end of the range.
`maximumValue`number = 1The high end of the range.	number = 1	The high end of the range.
`label`string = ""What the gauge measures.	string = ""	What the gauge measures.
`currentValueLabel`string = ""Text for the current value.	string = ""	Text for the current value.
`minimumValueLabel`string = ""Text at the low end.	string = ""	Text at the low end.
`maximumValueLabel`string = ""Text at the high end.	string = ""	Text at the high end.
`gaugeStyle`GaugeStyle = "automatic"automatic, linearCapacity, accessoryLinear, accessoryLinearCapacity, accessoryCircular, or accessoryCircularCapacity.	GaugeStyle = "automatic"	automatic, linearCapacity, accessoryLinear, accessoryLinearCapacity, accessoryCircular, or accessoryCircularCapacity.
`disabled`boolean = falseDims the gauge.	boolean = false	Dims the gauge.

The value must lie within the range, and the minimum must be below the maximum, or the gauge throws.

PreviousPickers

Media and Empty States

Edit this page on GitHub.