Tick Ring
Steps, focus minutes, savings: a ring of ticks that light up to a goal with a colour blend and a counting number. Optional drag to set the value. Bars move and fade on the native UI thread, so they stay smooth on iOS and Android even while your app is busy.
<TickRing />2 variantsNew in 2.0.1
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.
TickRing.tsx
<TickRing value={7480} max={10000} label="steps" sublabel="of 10,000"/>Props
| Prop | Type | Default |
|---|---|---|
| value / max Progress. | number | — / 100 |
| ticks / sweep Tick count; 270 leaves a gap at the bottom. | number | 60 / 360 |
| colors / trackColor Lit ticks blend from → to. | [from, to] / string | theme / muted |
| size / tickLength / thickness Geometry. | number | parent (≤240) / 0.2 / auto |
| label / sublabel / formatValue Centre text. | string / string / (v, max) => string | — / — / number |
| onChange / step Drag around the ring to set the value. | (v) => void / number | — / 1 |
| animate / emptyText / accessibilityLabel Motion, empty state, screen-reader label. | boolean / string / string | true / "No data" / generated |
Did you like the content?