Progress Rings
Apple-style rings with a legend; tap a ring to focus it.
<ProgressRings />1 variant
Live — the real React Native component rendered with react-native-web. Tap, drag and scrub it.
Installation
terminal
npx expo install expo-charts react-native-svgUsage
Import the component and pass your data. Width defaults to the parent, so it adapts to phones, tablets and rotation.
ProgressRings.tsx
<ProgressRings rings={[{ label: "Move", value: 420, max: 600 }]}/>Props
| Prop | Type | Default |
|---|---|---|
| rings Rings. | { label, value, max?, color? }[] | — |
| size / strokeWidth / gap Geometry. | number | 220 / 16 / 5 |
Did you like the content?