ProgressBarProgressBar is a linear progress indicators, that express the length of a process. It should be used when the process completion rate can be detected. As the completion rate increases, the track fills from 0 to 100%. The ProgressBar can be accompanied by a textual representation of the progress in a percent format.

Overview

Usage Examples

Inline (Default)Inline Progress Bar attached to a container, such as a card, can indicate the process applies to that particular item.

Full WidthIndicates progress with the screen’s content.

AnimatedIn cases where the progress will take about a minute to complete, use an animated progress bar with a stripes pattern

Types

Property	Preview
Default
AnimatedStripes

Size

Property	Preview
Inline (default)
FullWidth

Spec

Phone spec

Tablet spec

Dev

UsageCode Example

<ProgressBar progress={55} progressColor={Colors.red30}/>

APIThis is the list of additional props for the component

customElement

JSX.Element

Custom element to render on top of the animated progress

fullWidth

boolean

FullWidth Ui preset

progress

number

The progress of the bar from 0 to 100. Default is 0

progressColor

string

Progress color

style

ViewStyle

Override container style