ProgressBar Component

progressBar displays direct progress or derives it from an item array.

component: progressBar
props:
  label: Moves
  items: '{{ row.items }}'
  completedPath: orderMove.orderMoveStatus.statusStage
  completedValue: Completed

Direct value and max take precedence. With items, max is the array length and value counts items whose completedPath matches completedValue (or is truthy when the comparison value is omitted). showValue defaults to true; valueFormat is count or percent. variant is linear, circular, or segmented; use height for linear and segmented bars and size for circular bars. color defaults to primary and becomes success at 100%. An explicit max: 0 renders an empty bar and count; zero derived from empty items, a missing max, or a negative max renders nothing.

Mobile behavior

The native renderer supports all three variants. segmented draws one segment per unit of max, using activeColor for completed segments and trackColor for the remainder. Linear and circular variants also accept trackColor; theme names, Tamagui tokens, and literal colors are supported. tooltip is exposed to screen readers rather than as a hover tooltip. Values and item expressions are resolved from component variables and the screen store.

For very large totals, prefer linear or circular: segmented mode renders one native segment per unit. The component clamps the visual percentage to 0–100, while the displayed count preserves the supplied values.