Bar List
Top countries, spending by category, most-used apps: rows sorted by value with a capsule bar, optional emoji/icon and rank. Bars move and fade on the native UI thread, so they stay smooth on iOS and Android even while your app is busy.
<BarList />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.
BarList.tsx
<BarList data={[ { label: "India", value: 8420, icon: "🇮🇳" }, { label: "United States", value: 6130, icon: "🇺🇸" }, ]}/>Props
| Prop | Type | Default |
|---|---|---|
| data Rows. `icon` takes an emoji or any element. | { label, value, icon?, color? }[] | — |
| variant Bar behind the label, or a thin bar under it. | "fill" | "track" | "fill" |
| sort Order of the rows. | "desc" | "asc" | "none" | "desc" |
| showRank 1, 2, 3… before each label. | boolean | false |
| max / color / barHeight / gap Scale and look. | number / string / number / number | largest / theme / 36 / 8 |
| formatValue Value text. | (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?