Version: 3.2.1

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 ResponsiveValue<number | "px" | "container" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | ... 28 more ... | (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
_filledTrack IBoxProps<IProgressProps> Pseudo prop to give Prop to filled track -
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>
)
}
Read more about extending component theme here.

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.