Progress | NativeBase

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 is used to display the progress status for a task that takes a long time or consists of several steps.

Import

Copy
import { Progress } from 'native-base';

Examples

Basic


Playground
const Example = () => {
  return <Box w="90%">
      <Center mb="10">
        <Heading size="md"> Simple Progress Bar</Heading>
      </Center>
      <Progress value={45} mx="4" />
    </Box>;
};const Example = () => {
  return <Box w="90%">
      <Center mb="10">
        <Heading size="md"> Simple Progress Bar</Heading>
      </Center>
      <Progress value={45} mx="4" />
    </Box>;
};

Progress colorScheme


Playground
const Example = () => {
  return <Box w="90%">
      <VStack space="md">
        <Heading textAlign="center" mb="10" size="md">
          Progress Color Scheme
        </Heading>
        <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>;
};const Example = () => {
  return <Box w="90%">
      <VStack space="md">
        <Heading textAlign="center" mb="10" size="md">
          Progress Color Scheme
        </Heading>
        <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>;
};

Sizes


Playground
const Example = () => {
  return <Box w="90%">
      <VStack space="md">
        <Heading textAlign="center" size="md" mb="10">
          Progress Sizes
        </Heading>
        <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>;
};const Example = () => {
  return <Box w="90%">
      <VStack space="md">
        <Heading textAlign="center" size="md" mb="10">
          Progress Sizes
        </Heading>
        <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>;
};

Flat Progress


Playground
const Example = () => {
  return <Box w="90%">
      <Center mb="10">
        <Heading size="md">Flat Progress</Heading>
      </Center>
      <Progress rounded="0" value={65} mx="4" />
    </Box>;
};const Example = () => {
  return <Box w="90%">
      <Center mb="10">
        <Heading size="md">Flat Progress</Heading>
      </Center>
      <Progress rounded="0" value={65} mx="4" />
    </Box>;
};

Custom Track Color


Playground
const Example = () => {
  return <Box w="90%">
      <Center mb="10">
        <Heading size="md">Custom Track Color</Heading>
      </Center>
      <Progress colorScheme="primary" bg="cyan.200" mb="4" value={75} mx="4" />
    </Box>;
};const Example = () => {
  return <Box w="90%">
      <Center mb="10">
        <Heading size="md">Custom Track Color</Heading>
      </Center>
      <Progress colorScheme="primary" bg="cyan.200" mb="4" value={75} mx="4" />
    </Box>;
};

Props

Progress implements

value

Value of Progress.

Type: number

Default: 0

size

Defines height of Progress

Type: ResponsiveValue<number | "px" | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "0" | "container" | "3xs" | "1.5" | ... 29 more ... | (string & {})>

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: string

Default: primary

_filledTrack

Pseudo prop to give Prop to filled track

Type: IBoxProps<IProgressProps>

min

Min progress value

Type: number

Default: 0