Skip to main content

Progress bars

Use ProgressBar to communicate determinate progress, such as a multi-step form or an upload whose completion percentage is known. It animates the value; your application supplies the progress and decides when the task is complete.

import { ProgressBar } from "@ovok/native/progress-bar";

<ProgressBar progress={completedSteps / totalSteps} />

Pass a normalized value from 0 to 1; the component multiplies it by 100 to set the fill width. You can also pass a Reanimated SharedValue<number>. For work with no measurable completion, show an indeterminate loading state instead of presenting a misleading percentage. Provide accompanying text or accessibility semantics in the screen so the value is available without relying on color or animation alone.

References​