Progress

Determinate and indeterminate progress bars: a rounded bar that reports how far a task has gotten, or that work is underway.
The bar fills the parent it is given; a step of its own (xs, lg, …, with start to pin it to the leading edge) or a Container step sets its measure.
Name the task with string children, or pass accessibilityLabel when the visible title is omitted or contains rich content.
iOS
Android
Web
tsx
<Progress accessibilityLabel="Uploading files" value={0.6} />

Props

Prop
Description
value
number
Completion as a 0..1 fraction (clamped). Ignored when `indeterminate`. Defaults to 0.
indeterminate
boolean
Indeterminate mode: ignore `value` and animate a sliding bar (a spinner on iOS).
children
ReactNode
Optional title line rendered ABOVE the bar. Supplying it (with or without a `description`/`showValue`) builds the stacked header inside the control, so the caller never hand-composes a Row/Column + Typography around the bar. This is the "components own their label anatomy" contract, mirroring Checkbox/Radio/Switch's `description` slot.
description
ReactNode
Optional muted secondary line rendered under the title.
showValue
boolean
Render the percent (derived from `value`) as a right-aligned readout on the title line. Indeterminate has no measurable value, so this renders nothing then.
warning
boolean
Tone axis (the active fill color; pick one, default is the call-to-action fill). `warning` paints the bar in the warning color, `danger` in the destructive color, for a metric over a soft threshold or a hard limit (a WIP meter over its cap); the track stays neutral. Pair with copy: the tone adds no accessible value.
danger
boolean
Tone axis (the active fill color; pick one, default is the call-to-action fill). `warning` paints the bar in the warning color, `danger` in the destructive color, for a metric over a soft threshold or a hard limit (a WIP meter over its cap); the track stays neutral. Pair with copy: the tone adds no accessible value.
small
boolean
Size axis (track thickness; pick one, default is the medium track).
large
boolean
Size axis (track thickness; pick one, default is the medium track).
accessibilityLabel
string
Accessible description of what is progressing.
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.
xxxs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
sm
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
md
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
lg
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxxl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
wide
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
wider
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
widest
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
page
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
start
boolean
Pin a capped component to the leading edge instead of centering it in its column.

Do & Don’t

Determinate

Don’t
Section
Don't park a determinate bar at a hard-coded value as a decorative divider; a frozen fill reads as a stalled task.
Do
Uploading…
72%
Use a determinate bar when you know the share of work done, and pass showValue so the control renders the percent on the label line; the number and the bar always agree.

Indeterminate

Don’t
Step 3 of 4
Don't fake indeterminate progress when you do have a measurable value; hiding a known value behind a sweep (or a spinner on iOS) hides information you could show.
Do
Connecting…
Reach for indeterminate only when the duration is genuinely unknown. Pass the label as children; on the web and Android a short bar sweeps the track; on iOS the control renders the kit Spinner, the platform's unknown-duration idiom (iOS has no linear indeterminate bar).

Context

Don’t
Don't hand-roll a bar from raw views; the kit's Progress already adapts its thickness, ends, and track anatomy per platform and stays themed.
Do
Importing contacts
Give the bar a label through its own children; it fills the parent it is given, and a Container step sets its measure when the layout calls for it.
← Pressable
QRCode →