Progress ring

Use ProgressRing when a compact circular indicator fits a tile, card, or task summary. It accepts a progress fraction from 0 to 1, can center app-owned content, and has a distinct unknown state for work whose completion cannot be measured.

import { ProgressRing } from "@ovok/native/progress-ring";
import { Text } from "react-native";

<ProgressRing progress={0.65} accessibilityLabel="Daily goal" size={64}>
  <Text>65%</Text>
</ProgressRing>

progress is a fraction, so 0.65 means 65 percent. Finite values are clamped to the 0–1 range. When progress is unavailable, omit the prop or pass null; the ring renders a dashed indicator and exposes no current value to assistive technology.

Keep the accessible value meaningful

Give each ring a localized accessibilityLabel that describes what is progressing. The component exposes progress-bar semantics by default. Passing onPress makes the root a button instead, so provide a clear button label and use that behavior only when pressing the ring performs an action.

If the center text communicates progress, keep it consistent with the progress fraction. For example, pass 0.65 for 65%; do not pass a percentage value such as 65.

Style the indicator

Use size and strokeWidth to fit the surrounding layout. color controls the active arc and trackColor controls the background track; by default they use the app theme's primary and gray colors. children are positioned in the center, and style applies to the root pressable.

<ProgressRing
  progress={0.4}
  size={56}
  strokeWidth={5}
  color="#176B5B"
  trackColor="#D8E4E1"
  accessibilityLabel="Upload progress"
>
  <Text>40%</Text>
</ProgressRing>

For a linear indicator, use ProgressBar. See the ProgressRing component reference for the complete prop contract.