Activity Rings
Apple-style concentric goal rings with a legend beside or below. Tap a ring to highlight it.
<ActivityRings />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.
ActivityRings.tsx
<ActivityRings rings={[ { label: "Move", value: 486, max: 600, unit: "kcal", color: "#FA114F" }, { label: "Exercise", value: 24, max: 30, unit: "min", color: "#A6FF00" }, { label: "Stand", value: 9, max: 12, unit: "hr", color: "#00F0FF" }, ]}/>Props
| Prop | Type | Default |
|---|---|---|
| rings Outer to inner. | { label, value, max, color?, unit? }[] | — |
| size / thickness / gap Geometry. | number | 220 / auto / 4 |
| legend Legend placement. | "right" | "bottom" | "none" | "right" |
| children Centre content. | ReactNode | — |
| onSelect Tap a ring. | (index, ring) => void | — |
| animate / accessibilityLabel Motion and screen-reader label. | boolean / string | true / generated |
Did you like the content?