Stats

Single value, grouped row, with sparkline, with comparison. Used for dashboards and overview pages.
Under the value each tile can draw one strip: its trend (spark) or its composition (share). Both reserve the same height, so a row that mixes them keeps one card height and no tile is left half empty. framed puts every strip on a muted track, which is what makes a ROW of them scan evenly.
Active users
71,897
+12.3% vs. last 30 days
iOS
Active users
71,897
+12.3% vs. last 30 days
Android
Active users
71,897
+12.3% vs. last 30 days
Web
tsx
<Stats
items={[
{ label: "Active users", value: "71,897", delta: "+12.3% vs. last 30 days" }
]}
/>

Props

Prop
Description
items
required
StatItem[]
The metrics to render, in order.
plain
boolean
Borderless metric stacks on a shared surface, for nesting inside a card.
title
string
Optional heading shown above the metrics (mainly for the plain surface).
framed
boolean
Draw every metric's strip on a muted track, in one bounded band. For a ROW of metrics, where the strips are read against each other. Without it each strip draws only its marks, so a metric with a quiet series shows a near-empty band beside one with a full bar and the row's densities range from blank to solid with nothing tying them together; the eye lands on the fullest tile rather than scanning the row. The track gives every strip the same frame whatever its data, so a flat series reads as a chart sitting at zero and the fill is the only thing that varies.
onPressItem
(index: number) => void
Make each metric a tappable target (drill into the underlying detail). When set, every metric renders as a Pressable with a button role and a pressed affordance, so a tappable stat needs no hand-rolled Pressable.
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

Single

Don’t
Active users
71,897
+12.3%
A bare delta with no baseline leaves the reader asking: up against what, and over what window?
Do
Active users
71,897
+12.3% vs. last 30 days
Name the comparison and the period so the delta is unambiguous.

Group

Don’t
Revenue
$48,250.00
+12.5%
Orders
842
+3.2%
Conversion
3.6%
+0.4%
A fixed flex row of full-precision numbers overflows on narrow viewports and crowds the cards.
Do
Revenue
$48.2k
+12.5%
Orders
842
+3.2%
Conversion
3.6%
+0.4%
Use the auto-fit grid and round headline numbers so cards wrap and stay scannable.

Plain (no border)

Don’t
Revenue
$48.2k
Orders
842
Bordered cards inside a card surface double the chrome: a box drawn around boxes.
Do
Revenue
$48.2k
Orders
842
On a parent surface drop the border and radius; let the number stacks stand on their own.

With sparkline

Don’t
Requests
24.5k
A trend line with no current delta makes you eyeball the slope to guess the direction.
Do
Requests
24.5k
+8.2%
Pair the sparkline with an explicit delta so the headline reads without decoding the curve.

A strip on every tile in a row

Don’t
Requests
24.5k
+8.2%
Cache hit rate
94.1%
23.5k of 25k served warm
Give one tile a strip and leave its neighbour without: cards stretch to the tallest sibling, so the bare tile ends up with a band of blank space that reads as unfinished.
Do
Requests
24.5k
+8.2%
Cache hit rate
94.1%
23.5k of 25k served warm
Give every tile in a row a strip: the trend where one exists, the composition where it does not, and frame them so the row reads as one finished set.
← StackedList
ActionSheet →