# ProgressRing

Canonical page: https://docs.ovok.com/native-sdk/guide/components/progress-ring

`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.

```tsx
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.