A progress bar shows either determinate or indeterminate progress of an operation over time.
import { ProgressBar } from 'heroui-native-pro';<ProgressBar>
<ProgressBar.Label>...</ProgressBar.Label>
<ProgressBar.ValueLabel />
<ProgressBar.Track>
<ProgressBar.Fill />
</ProgressBar.Track>
</ProgressBar>value, minValue, maxValue, and formatOptions. When plain string children are provided, they auto-expand into Label, ValueLabel, Track, and Fill.glass). Replace or remove it via the background prop.isIndeterminate prop.Compose the label row and the track with fill manually for full control.
<ProgressBar value={60}>
<View className="flex-row items-center justify-between">
<ProgressBar.Label>Loading</ProgressBar.Label>
<ProgressBar.ValueLabel />
</View>
<ProgressBar.Track>
<ProgressBar.Fill />
</ProgressBar.Track>
</ProgressBar>Pass a string as children to auto-render the label row, track, and fill.
<ProgressBar value={60}>Loading</ProgressBar>Switch the track height with the size prop.
<ProgressBar value={40} size="sm">...</ProgressBar>
<ProgressBar value={60} size="md">...</ProgressBar>
<ProgressBar value={80} size="lg">...</ProgressBar>Switch the fill color with the color prop.
<ProgressBar value={50} color="default">...</ProgressBar>
<ProgressBar value={50} color="accent">...</ProgressBar>
<ProgressBar value={50} color="success">...</ProgressBar>
<ProgressBar value={50} color="warning">...</ProgressBar>
<ProgressBar value={50} color="danger">...</ProgressBar>Set isIndeterminate to render a looping sweep animation when progress is unknown. The value label is hidden in this mode.
<ProgressBar isIndeterminate>
<ProgressBar.Label>Loading...</ProgressBar.Label>
<ProgressBar.Track>
<ProgressBar.Fill />
</ProgressBar.Track>
</ProgressBar>Omit ProgressBar.Label and ProgressBar.ValueLabel to render only the track. Provide accessibilityLabel for screen readers.
<ProgressBar value={45} accessibilityLabel="Loading progress">
<ProgressBar.Track>
<ProgressBar.Fill />
</ProgressBar.Track>
</ProgressBar>Set isDisabled to lower the opacity and mark the component as disabled for accessibility.
<ProgressBar value={60} isDisabled>
...
</ProgressBar>Set minValue and maxValue to use a custom progress range.
<ProgressBar value={3} minValue={0} maxValue={5}>
...
</ProgressBar>Pass formatOptions to format the displayed value with Intl.NumberFormat options.
<ProgressBar value={60} formatOptions={{ style: 'currency', currency: 'USD' }}>
...
</ProgressBar>Apply a gradient background to ProgressBar.Fill via the style prop.
<ProgressBar value={70}>
<View className="flex-row items-center justify-between">
<ProgressBar.Label>Sunset</ProgressBar.Label>
<ProgressBar.ValueLabel />
</View>
<ProgressBar.Track>
<ProgressBar.Fill
style={{
experimental_backgroundImage:
'linear-gradient(to right, #f97316, #ec4899, #8b5cf6)',
}}
/>
</ProgressBar.Track>
</ProgressBar>Use a render function to access progress state for custom layouts.
<ProgressBar value={60}>
{({ percentage, valueText, isIndeterminate }) => (
<>
<ProgressBar.Track>
<ProgressBar.Fill />
</ProgressBar.Track>
</>
)}
</ProgressBar>import { ProgressBar } from 'heroui-native-pro';
import { View } from 'react-native';
export default function ProgressBarExample() {
return (
<View className="flex-1 px-5 items-center justify-center">
<View className="w-64">
<ProgressBar value={60} color="accent" size="md">
<View className="flex-row items-center justify-between">
<ProgressBar.Label>Loading</ProgressBar.Label>
<ProgressBar.ValueLabel />
</View>
<ProgressBar.Track>
<ProgressBar.Fill />
</ProgressBar.Track>
</ProgressBar>
</View>
</View>
);
}| prop | type | default | description |
|---|---|---|---|
children | ReactNode | ((props: ProgressBarRenderProps) => ReactNode) | - | Children elements or render function with access to progress state. String children auto-expand sub-parts |
size | ProgressBarSize | "md" | Size of the progress track |
color | ProgressBarColor | "accent" | Color of the fill bar |
value | number | 0 | The current progress value |
minValue | number | 0 | The minimum value of the progress range |
maxValue | number | 100 | The maximum value of the progress range |
isIndeterminate | boolean | false | Whether progress is indeterminate (unknown duration) |
isDisabled | boolean | false | Whether the component is disabled |
className | string | - | Additional CSS classes for the root container |
formatOptions | Intl.NumberFormatOptions | { style: 'percent' } | Number format options for the value display |
animation | ProgressBarRootAnimation | - | Animation configuration for the root component |
...ViewProps | ViewProps | - | All standard React Native View props are supported |
| type | description |
|---|---|
'sm' | 'md' | 'lg' | Size variants of the progress track |
| type | description |
|---|---|
'default' | 'accent' | 'success' | 'warning' | 'danger' | Color variants of the fill bar |
| prop | type | description |
|---|---|---|
percentage | number | Computed percentage (0–100) |
valueText | string | Formatted value text |
isIndeterminate | boolean | Whether progress is indeterminate |
Animation configuration for the ProgressBar root. Can be:
"disable-all": Disable all animations including children (cascades down)undefined: Use default animations| prop | type | default | description |
|---|---|---|---|
children | ReactNode | - | Content to display inside the track (typically ProgressBar.Fill) |
className | string | - | Additional CSS classes for the track container |
background | ReactNode | - | Background layer behind the track surface. undefined renders the theme-aware default; custom node replaces it; null removes it |
...ViewProps | ViewProps | - | All standard React Native View props are supported |
Absolute-fill container rendered behind the track surface. With no children, the active library theme decides the default content (e.g. a glass blur layer); pass children to host custom content with the same positioning and clipping.
| prop | type | default | description |
|---|---|---|---|
children | ReactNode | - | Custom content inside the background container |
className | string | - | Additional CSS classes |
...ViewProps | ViewProps | - | All standard React Native View props are supported |
Note:
widthandtransform(translateX) are occupied by animations and cannot be set viaclassName. To fully control the fill, setisAnimatedStyleActive={false}.
| prop | type | default | description |
|---|---|---|---|
isAnimatedStyleActive | boolean | true | When false, animated styles (width / translateX) are not applied, allowing full control via className/style |
className | string | - | Additional CSS classes for the fill element |
animation | ProgressBarFillAnimation | - | Animation configuration for the fill element |
...ViewProps | ViewProps | - | All standard React Native View props are supported |
Animation configuration for ProgressBar.Fill. Can be:
false or "disabled": Disable fill animationstrue or undefined: Use default animationsobject: Custom animation configuration| prop | type | default | description |
|---|---|---|---|
fillTimingConfig | AnimationValue<WithTimingConfig> | { duration: 300 } | Timing configuration for the determinate fill width transition |
indeterminateFillTimingConfig | AnimationValue<WithTimingConfig> | { duration: 1500, easing: Easing.bezier(0.65,0,0.35,1) } | Timing configuration for the indeterminate sweep animation |
| prop | type | default | description |
|---|---|---|---|
children | ReactNode | - | Text content for the label |
className | string | - | Additional CSS classes for the label text |
...TextProps | TextProps | - | All standard React Native Text props are supported |
| prop | type | default | description |
|---|---|---|---|
children | ReactNode | - | Custom content to override the formatted value text. Defaults to the formatted value |
className | string | - | Additional CSS classes for the value label text |
...TextProps | TextProps | - | All standard React Native Text props are supported |
Hook to access the ProgressBar context. Must be used within a ProgressBar component.
import { useProgressBar } from 'heroui-native-pro';
const {
percentage,
valueText,
isIndeterminate,
isDisabled,
size,
color,
trackWidth,
onTrackLayout,
} = useProgressBar();| property | type | description |
|---|---|---|
percentage | number | Computed percentage (0–100) of current progress |
valueText | string | Formatted value text (e.g. "60%") |
isIndeterminate | boolean | Whether progress is indeterminate |
isDisabled | boolean | Whether the component is disabled |
size | ProgressBarSize | Current size variant |
color | ProgressBarColor | Current color variant |
trackWidth | number | Measured track width in pixels |
onTrackLayout | (width: number) => void | Callback for Track to report its measured width |