Progress | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Disclosure
If you are starting a new project, please try gluestack-ui for better performance and new design.
Progress
Progress helps show the progress status for a time-consuming task that consists of several steps.
Import
Copyimport { Progress } from 'native-base';
Examples
Basic
Playgroundconst Example = () => {return <Center w="100%"><Box w="90%" maxW="400"><Progress value={45} mx="4" /></Box></Center>;};
Progress colorScheme
Playgroundconst Example = () => {return <Center w="100%"><Box w="90%" maxW="400"><VStack space="md"><VStack mx="4" space="md"><Progress colorScheme="primary" value={35} /><Progress colorScheme="secondary" value={45} /><Progress colorScheme="emerald" value={55} /><Progress colorScheme="warning" value={65} /><Progress colorScheme="light" value={75} /></VStack></VStack></Box></Center>;};
Sizes
Playgroundconst Example = () => {return <Center w="100%"><Box w="90%" maxW="400"><VStack space="md"><VStack mx="4" space="md"><Progress size="xs" mb={4} value={25} /><Progress size="sm" mb={4} value={35} /><Progress size="md" mb={4} value={45} /><Progress size="lg" mb={4} value={55} /><Progress size="xl" mb={4} value={65} /><Progress size="2xl" mb={4} value={75} /></VStack></VStack></Box></Center>;};
Flat Progress
Playgroundconst Example = () => {return <Center w="100%"><Box w="90%" maxW="400"><Progress rounded="0" value={65} mx="4" /></Box></Center>;};
Custom Track Color
Playgroundconst Example = () => {return <Center w="100%"><Box w="90%" maxW="400"><Progress bg="coolGray.100" _filledTrack={{bg: "lime.500"}} value={75} mx="4" /></Box></Center>;};
Props
Progress implements , , , , , , , , ,
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.
MadeWithNativeBase
gluestack-ui