REACT-NATIVES
WIRED FOR SPEED
react-natives v2.1.2
Theme
Light
Dark
Get Started
Menu
Components
Feedback & Overlay
Progress
A compound progress bar component that visually indicates the completion percentage of an operation.
Example
Preview
Code
Props
Progress Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the progress bar container.
value
number
0
The current progress value.
min
number
0
The minimum value of the progress range.
max
number
100
The maximum value of the progress range.
size
'xs' | 'sm' | 'md' | 'lg'
'md'
Controls the height of the progress bar.
colorScheme
'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'warning' | 'info'
'primary'
The semantic color scheme for the filled track.
ProgressFilledTrack Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes for the filled portion of the progress bar.
Usage Guidelines
When to use
Use Progress to show determinate progress for operations like file uploads, form completion, or loading.
Best practices
•
Use for determinate operations where completion percentage is known.
•
Update the value prop smoothly to avoid jarring jumps.
•
Pair with text showing the percentage for additional clarity.
Accessibility
Progress bar includes ARIA progressbar role with min, max, and current value attributes.
Related Components
Spinner
An animated loading indicator to communicate that an operation is in progress.
Slider
A compound range slider component with track, filled track, and thumb sub-components for selecting numeric values.
Badge
A compound component for displaying short status labels, counts, or tags with semantic color and variant options.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.