Component
Gauge
A half-circle arc that fills toward a value, optionally split into colored zones, useful for any score that has good, caution, and bad ranges.
The primitive
68%Risk score
gauge.tsx
<NativeGauge value={68} label="Risk score" />Example
Summarizes a counterparty's reliability score on their profile, with the arc's fill and color doing the explaining before any number is read.
92%Reliability
gauge-example.tsx
<NativeGauge value={92} label="Reliability" zones={zones} />Capabilities
| Prop | Type | Description |
|---|---|---|
| valuerequired | number | 0–100 |
| zones | { from: number; to: number; color: string }[] | Optional zones for coloring — e.g. [{from:0,to:33,color:IOS_GREEN},{from:33,to:66,color:IOS_ORANGE},{from:66,to:100,color:IOS_RED}] |
| size | number | — |
| strokeWidth | number | — |
| label | string | — |
| valueLabel | string | — |
| className | string | — |