Version: 3.0.7

Progress

Progress is used to display the progress status for a task that takes a long time or consists of several steps.

Import#

import { Progress } from 'native-base';

Examples#

Basic#

Progress colorScheme#

Sizes#

Flat Progress#

Custom Track Color#

Props#

Name	Type	Description	Default
value	number	Value of Progress.	0
size	string	Defines height of Progress	sm
colorScheme	string	The color scheme of the progress. This should be one of the color keys in the theme (e.g."green", "red").	primary
isIndeterminate	any	Whether progress is indeterminate	false
min	number	Min progress value	0
max	number	Max progress value	100

Progress implements Box

Styling#

NativeBase ships with a default theme for each component.

Checkout the default theme of progress

We can easily extend the progress component theme using extendTheme function as shown below.

import { extendTheme, NativeBaseProvider } from "native-base";

const theme = extendTheme({
 components: {
 Progress: {
 baseStyle: {},
 defaultProps: {},
 variants: {},
 sizes: {},
 }
 } 
});

function MyApp() {
 return (
 <NativeBaseProvider theme={theme}>
 {/* Rest of the app goes here */}
 </NativeBaseProvider>
 )
}

Accessibility#

Adheres to the progressbar role requirements.
On web, aria-valuenow, aria-valuemin and aria-valuemax to ensure the progress percent is visible to screen readers.
On mobile, accessibilityValue is used to ensure it's announced by Talkback and VoiceOver.