Segmented Bar
Phone storage, budget split, macros: one bar with coloured parts and a legend with values or percentages. Pass `total` to show the unused part. Bars move and fade on the native UI thread, so they stay smooth on iOS and Android even while your app is busy.
<SegmentedBar />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.
SegmentedBar.tsx
<SegmentedBar data={[ { label: "Photos", value: 48.2 }, { label: "Apps", value: 31.5 }, ]} total={128} formatValue={(v) => `${v} GB`}/>Props
| Prop | Type | Default |
|---|---|---|
| data Parts, left to right. | { label, value, color? }[] | — |
| total / remainingLabel Capacity; the rest shows as a muted part. | number / string | sum / "Free" |
| height / gap / roundSegments Bar look. | number / number / boolean | 14 / 3 / false |
| showLegend / legendValue Legend under the bar. | boolean / "value" | "percent" | "both" | "none" | true / "value" |
| formatValue Legend values. | (v, datum) => string | compact |
| selectedIndex / defaultIndex Controlled or initial selection. | number | null | — / null |
| onSelect Tap or drag (haptics via ChartProvider). | (index, datum) => void | — |
| animate / emptyText / accessibilityLabel Motion, empty state, screen-reader label. | boolean / string / string | true / "No data" / generated |
Did you like the content?