Stat Card
A ready-made dashboard tile: icon, title, big value, a green/red change pill and a mini line or bar trend (or any chart you pass as children).
<StatCard />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.
StatCard.tsx
<StatCard icon="💰" title="Revenue" value="$48.2k" delta={12.4} trend={[22, 28, 26, 34, 31, 39, 44, 48]}/>Props
| Prop | Type | Default |
|---|---|---|
| title / value Label and big number. | string / string | number | — |
| delta / invertDelta Change in percent; invert when down is good. | number / boolean | — / false |
| caption / icon / color Extras and tint. | string / ReactNode / string | — / — / theme |
| trend / trendType Built-in mini chart. | number[] / "line" | "bars" | "none" | — / "line" |
| children Any chart instead of `trend`. | ReactNode | — |
| variant / size / onPress Surface, size, tap. | "card" | "plain" / "sm" | "md" / () => void | "card" / "md" / — |
| animate / accessibilityLabel Motion and screen-reader label. | boolean / string | true / generated |
Did you like the content?