Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Progress
Progress is used to display the progress status for a task that takes a long time or consists of several steps.
Import
Copy
import { Progress } from 'native-base';
Examples
Basic
Playground
Progress colorScheme
Playground
Sizes
Playground
Flat Progress
Playground
Custom Track Color
Playground
Props
value
Value of Progress.
Type: number
Default: 0
size
Defines height of Progress
Type: ResponsiveValue<number | "px" | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "0" | "container" | "3xs" | "1.5" | ... 29 more ... | (string & {})>
Default: sm
colorScheme
The color scheme of the progress. This should be one of the color keys in the theme (e.g."green", "red").
Type: string
Default: primary
_filledTrack
Pseudo prop to give Prop to filled track
Type: IBoxProps<IProgressProps>
min
Min progress value
Type: number
Default: 0
max
Max progress value
Type: number
Default: 100
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of progress.
Info: We can easily extend the progress component theme using extendTheme function as described in the documentation .
Accessibility
Adheres to the progressbar
On web, aria-valuenow, aria-valuemin and aria-valuemax to ensure the progress percent is visible to screen readers.
On mobile, is used to ensure it's announced by Talkback and VoiceOver.
Nativebase logo
MadeWithNativeBase