Mini Ring
Calories, water, goals: a rounded progress ring for 2-up stat tiles, with optional content in the middle.
<MiniRing />1 variantNew 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.
MiniRing.tsx
<MiniRing value={72} color="#E4572E" accessibilityLabel="Calories, 72% of goal"/>Props
| Prop | Type | Default |
|---|---|---|
| value / max Progress. | number | — / 100 |
| size / thickness Geometry. | number | 56 / 7 |
| color / trackColor Colours. | string | theme / tinted |
| children Centre content (icon or number). | ReactNode | — |
Did you like the content?