Components

Progress

An indicator showing the completion status of a task, typically displayed as a horizontal bar that fills as the task progresses.

Source

Loading... 33%

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Install the component

Run the registry command below to add progress to your project.

watermelon add progress

Install manual dependencies

If you are wiring the component manually, install the package dependencies shown below.

npm install react-native

Import the component

Import Progress from your local UI registry output.

Import

import { Progress } from "@/components/ui/progress";

Import

import { Progress } from "@/components/ui/progress"

Usage

The Progress component uses React Native's Animated API to provide smooth, hardware-accelerated transitions. It is perfect for file uploads, download status, or multi-step onboarding flows.

Basic Usage

Progress bars accept a value and optional max (default is 100).

Full Width

The progress bar automatically fills the width of its container. Use className to adjust the track appearance.

API Reference

Progress extends all supported props from React Native View.

prop	type	default	description
value	number	0	The current progress value.
max	number	100	The maximum value of the progress bar.
className	string	-	Standard Tailwind classes for the track.

PreviousOTP Input

NextSeparator