Progress | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Progress
Progress helps show the progress status for a time-consuming task that consists of several steps.
Show Code
Playground
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: ThemeComponentSizeType<"Progress">
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: ColorSchemeType
Default: primary
_filledTrack
Pseudo prop to give Prop to filled track
Type: InterfaceBoxProps<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. Check out the default theme of the 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 is used to ensure the progress percent is visible to screen readers.
On mobile, is used to ensure it is announced by Talkback and VoiceOver.
Nativebase logo
MadeWithNativeBase