Progress

iOSAndroidTry it (web)

iPhone 17 Pro · iOS 27

Copy Text

import { Progress } from "@terratcg/ui";
import { View } from "react-native";

export default function ProgressTones() {
  return (
    <View style={{ width: 280, gap: 16 }}>
      <Progress value={0.62} />
      <Progress tone="muted" value={1} />
    </View>
  );
}

ImportCopy Anchor Link

import { Progress } from "@terratcg/ui";

UsageCopy Anchor Link

<Progress value={uploaded / total} />

The track is a well cut into the surface, 12 pt tall by default. The bar rides in it as a raised accent face with a key's gloss and shadow, under the groove's lip. value runs from 0 to 1; anything outside is clamped. The track fills its parent's width, so size it with the parent or style. When value changes, the bar springs to it.

ExamplesCopy Anchor Link

ReachCopy Anchor Link

reach draws a faint second fill under the bar, for progress that counts toward a goal but not the headline.

iOSAndroidTry it (web)

iPhone 17 Pro · iOS 27

Copy Text

import { Progress } from "@terratcg/ui";
import { View } from "react-native";

export default function ProgressReach() {
  return (
    <View style={{ width: 280 }}>
      <Progress value={0.35} reach={0.7} />
    </View>
  );
}

With a counterCopy Anchor Link

Counter writes the numbers beside a bar: a bold numerator against a muted total.

iOSAndroidTry it (web)

iPhone 17 Pro · iOS 27

Copy Text

import { Counter, Progress } from "@terratcg/ui";
import { View } from "react-native";

export default function ProgressCounter() {
  return (
    <View style={{ width: 280, gap: 10, alignItems: "flex-start" }}>
      <Counter value={142} total={200} size="lg" />
      <Progress value={142 / 200} style={{ alignSelf: "stretch" }} />
    </View>
  );
}

To write the numbers beside a bar, use Counter, which has its own page.

PropsCopy Anchor Link

Progress also accepts React Native's View props. It draws no children.

AccessibilityCopy Anchor Link

• Role: progressbar, with accessibilityValue from 0 to 100 holding the rounded percentage of value. reach is not announced: say it in a nearby label if it matters.
• Label: give the track an accessibilityLabel that says what is progressing, such as "Upload progress".
• Reduce Motion: the bar jumps to its new value instead of springing.

Platform differencesCopy Anchor Link

• iOS and Android: the same groove and bar. On iOS the bar is rasterized while it rests and redrawn only while it moves.
• Web: Progress renders through react-native-web for these docs, but the web is not a supported target.

RulesCopy Anchor Link

• Show Progress for work with a known end. For a wait without one, use a Spinner.
• Switch tone to muted once the work is done, so a finished bar stops calling for attention.
• Use reach for a second measure that counts toward a goal, never for a buffer or an estimate.