React Native Mantine › Feedback
Progress
Progress bar with animations
Import: import { Progress } from 'react-native-mantine';
Usage
import { Progress } from 'react-native-mantine';
// Basic progress
<Progress value={60} color="blue" />
// Large progress bar
<Progress
value={75}
color="green"
size="lg"
radius="xl"
/>
// Multi-section progress
<Progress
sections={[
{ value: 30, color: 'green' },
{ value: 20, color: 'orange' },
{ value: 15, color: 'blue' },
]}
size="lg"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Progress value from 0 to 100. Animated with smooth transition when changed |
color | MantineColor | "blue" | Progress bar color from theme (e.g., "blue", "red", "green", "teal") |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | "md" | Progress bar height as predefined size or custom number in pixels |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Key of theme.radius or any valid number to set border-radius |
striped | boolean | false | Adds diagonal stripes pattern to the progress bar for visual interest |
animate | boolean | false | Whether to animate striped progress bars (requires striped=true) |
sections | ProgressSection[] | Array of sections to create multi-segment progress bar. Each section has value (0-100), color, and optional label. When provided, the value prop is ignored | |
style | ViewStyle | Additional styles to apply to the progress bar container |