Score Gauge
Credit score, health score, NPS: coloured bands, a marker that rides the arc and a counting score with the band name.
<ScoreGauge />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.
ScoreGauge.tsx
<ScoreGauge value={742} min={300} max={850} />Props
| Prop | Type | Default |
|---|---|---|
| value / min / max Score and range. | number | — / 0 / 100 |
| bands Coloured ranges (last ends at max). | { to, label?, color? }[] | 4 bands red to green |
| size / thickness / bandGap Geometry. | number | 300 / auto / 3 |
| label / showRange / formatValue Text. | string / boolean / (v) => string | band label / true / round |
| animate / accessibilityLabel Motion and screen-reader label. | boolean / string | true / generated |
Did you like the content?