ServiceHealthList

Per-service status rows: a status dot (down > degraded > operational), the service name, an optional right-aligned detail such as an uptime percentage, and, when the item carries periods, an embedded mini uptime strip on a second line.

It shares its strip renderer with UptimeBar, so the two never drift. onPressItem turns rows into drill-in buttons; compact hides the strips and tightens the rows; plain strips the card surface for nesting.

System status

API

99.98%

Dashboard

99.92%

Webhooks

97.10%

iOS

System status

API

99.98%

Dashboard

99.92%

Webhooks

97.10%

Android

System status

API

99.98%

Dashboard

99.92%

Webhooks

97.10%

Web

tsx

<ServiceHealthList

title="System status"

items={[

{ label: "API", detail: "99.98%", periods: Array.from({ length: 45 }, () => ({})) },

{ label: "Dashboard", detail: "99.92%", periods: Array.from({ length: 45 }, (_, i) => (i === 30 ? { degraded: true } : {})), degraded: true },

{ label: "Webhooks", detail: "97.10%", periods: Array.from({ length: 45 }, (_, i) => (i > 40 ? { down: true } : {})), down: true }

]}

Default

Compact

Drill-in rows

Plain, inside a card

Props

Prop

Description

items

required

ServiceHealthItem[]

The services to render, in order.

title

string

Optional heading shown above the rows.

compact

boolean

Density (omit for the default rows with embedded strips).

plain

boolean

Strip the card surface for nesting inside an existing card (mirrors Stats).

onPressItem

(index: number) => void

Rows become tappable drill-in targets (open the service) 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