Progress | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Contribution

Core Concepts

Utility First

Utility Props Specificity

New

Design Tokens

Pseudo Props: Overview

New

Pseudo Props: Dos & Don'ts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Recipes

Designs

Forms

Layout

Migration

Upgrading to 3.2.0 from 3.x

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

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