Accessible circular progress with a distinct unknown state and optional center content

ProgressRing displays a fraction from 0 to 1, or a dashed ring when the target is unknown. It can contain any React content and can optionally respond to presses.

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>

<ProgressRing accessibilityLabel="Daily goal unavailable" />

When progress is omitted or null, the ring uses a dashed indicator and does not announce an empty value. Finite values are clamped to 0–1. Set onPress to make the ring a button; otherwise it exposes progress-bar accessibility semantics. Provide an accessibilityLabel appropriate to the host app's language and context.

Prop	Type	Default	Description
`progress`	`number \| null`	unknown	Fraction from 0 to 1; omitted or `null` means unknown.
`children`	`ReactNode`	-	Optional content centered inside the ring.
`size`	`number`	`48`	Width and height in points.
`strokeWidth`	`number`	`4`	Ring thickness in points.
`color`	`string`	theme primary	Progress indicator color.
`trackColor`	`string`	theme gray 300	Background ring color.
`onPress`	`PressableProps['onPress']`	-	Makes the ring tappable.

Other supported accessibility and pressable props are forwarded to the root component. Render it below the SDK ThemeProvider so default colors come from the active theme.