Progress

Progress bar indicating completion percentage.

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

25%

50%

75%

100%

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

Source

components/ui/progress.tsx

import React from "react";
import { View } from "react-native";
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 (
    <View
      className={cn("h-2 w-full overflow-hidden rounded-full bg-secondary", className)}
      accessibilityRole="progressbar"
      accessibilityValue={{ min: 0, max: 100, now: clampedValue }}
      {...props}
    >
      <View
        className={cn("h-full rounded-full bg-primary", indicatorClassName)}
        style={{ width: `${clampedValue}%` }}
      />
    </View>
  );
}