Version: 3.0.3

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.
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.