AniUI

Progress

Progress bar indicating completion percentage.

Web preview — components render natively on iOS & Android
import { Progress } from "@/components/ui/progress";

export function MyScreen() {
  return (
    <Progress value={60} />
  );
}

Installation#

npx @aniui/cli add progress

Usage#

app/index.tsx
import { Progress } from "@/components/ui/progress";

export function MyScreen() {
  return (
    <Progress value={60} />
  );
}

Examples#

0%
25%
50%
75%
100%
Web preview — components render natively on iOS & Android
<Progress value={0} />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />

Props#

PropTypeDefault
value
number
0
className
string
—
indicatorClassName
string
—

Also accepts all View props from React Native. Value is clamped between 0 and 100.

Accessibility#

  • Uses @rn-primitives/progress for semantic progress reporting.
  • accessibilityRole="progressbar" with min/max/now values exposed to assistive technology.

Source#

components/ui/progress.tsx
import React from "react";
import { View } from "react-native";
import * as ProgressPrimitive from "@rn-primitives/progress";
import { cn } from "@/lib/utils";

export interface ProgressProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  value?: number;
  indicatorClassName?: string;
}

export function Progress({ value = 0, className, indicatorClassName, ...props }: ProgressProps) {
  const clampedValue = Math.min(100, Math.max(0, value));

  return (
    <ProgressPrimitive.Root value={clampedValue} asChild>
      <View
        className={cn("h-2 w-full overflow-hidden rounded-full bg-secondary", className)}
        accessibilityRole="progressbar"
        accessibilityValue={{ min: 0, max: 100, now: clampedValue }}
        {...props}
      >
        <ProgressPrimitive.Indicator asChild>
          <View
            className={cn("h-full rounded-full bg-primary", indicatorClassName)}
            style={{ width: `${clampedValue}%` }}
          />
        </ProgressPrimitive.Indicator>
      </View>
    </ProgressPrimitive.Root>
  );
}
Previous← PriceNextProgress Steps →