BarList

Ranked label and value rows, each with a color swatch, a truncating label, a right-aligned value, an optional delta, and a proportional track bar.
Bars size against the largest row by default (the ranking idiom); share sizes them against the sum of the rows and appends percent readouts (the composition idiom). Rows become drill-in buttons with onPressItem. For comparing magnitudes on a shared axis without deltas or shares, reach for the bar Chart and its horizontal mode instead.
Top pages
iOS
Top pages
Android
Top pages
Web
tsx
<BarList
title="Top pages"
items={[
{ label: "/pricing", value: 18400, delta: "+12%" },
{ label: "/docs", value: 12100, delta: "+4%" },
{ label: "/blog/launch", value: 8700, delta: "-2%", down: true },
]}
/>

Props

Prop
Description
items
required
BreakdownRow[]
The rows to render, in order.
title
string
Optional heading shown above the rows.
share
boolean
Bars proportional to the sum of all rows, with percent readouts, instead of relative to the largest row.
success
boolean
Tone (single-hue lists; pick one; default is the ramp by index). Precedence: success > destructive; a row's chartN slot beats the tone.
destructive
boolean
Tone (single-hue lists; pick one; default is the ramp by index). Precedence: success > destructive; a row's chartN slot beats the tone.
compact
boolean
Density (omit for the default row spacing).
plain
boolean
Strip the card surface for nesting inside an existing card (mirrors Stats).
formatValue
(v: number) => string
Formats row values (data formatting, not styling).
onPressItem
(index: number) => void
Rows become tappable drill-in targets when set.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

BarList

Don’t
/pricing
18.4k
A hand-rolled row of Text and colored Views splits the anatomy, drifts from the type scale, and hides its share from assistive tech.
Do
Top pages
Let the component own the whole row anatomy: swatch, label, value, delta, and the proportional bar.
← AreaChart
BoxPlot →