Progress

Use the Progress component to show the status of ongoing processes.

Props

value

Use this to change the Progress value.

TypeDefaultDescription
number
0Represents the percentage of the progress.

Example

Source code
<UIVStack yGap={16}>
  <UIProgress />
  <UIProgress value={20} />
  <UIProgress value={50} />
  <UIProgress value={80} />
  <UIProgress value={100} />
</UIVStack>

size

Use this to change the Progress size.

TypeDefaultDescription
'xs' 
| 'sm' 
| 'md' 
| 'lg' 
| 'xl' 
| '2xl'
'md'It applies mapped value to height property.

Example

Source code
<UIVStack yGap={16}>
  <UIProgress value={40} size="xs" />
  <UIProgress value={40} size="sm" />
  <UIProgress value={40} />
  <UIProgress value={40} size="lg" />
  <UIProgress value={40} size="xl" />
  <UIProgress value={40} size="2xl" />
</UIVStack>

rounded

Use this to change the Progress radius value.

TypeDefaultDescription
'none' 
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| '2xl'
| 'full'
'full'It applies mapped value to borderRadius property.

Example

Source code
<UIVStack yGap={16}>
  <UIProgress value={40} size="2xl" rounded="none" />
  <UIProgress value={40} size="2xl" rounded="xs" />
  <UIProgress value={40} size="2xl" rounded="sm" />
  <UIProgress value={40} size="2xl" rounded="md" />
  <UIProgress value={40} size="2xl" rounded="lg" />
  <UIProgress value={40} size="2xl" rounded="xl" />
  <UIProgress value={40} size="2xl" rounded="2xl" />
  <UIProgress value={40} size="2xl" />
</UIVStack>

trackBg

Use this to change the Progress track background color.

TypeDefaultDescription
string
#169f94Background color of the Progress track.

Example

Source code
<UIVStack yGap={16}>
  <UIProgress value={60} />
  <UIProgress value={60} trackBg="#3b84a5" />
  <UIProgress value={60} trackBg="#e15240" />
  <UIProgress value={60} trackBg="#f29c38" />
</UIVStack>

bg

Use this to change the Progress background color.

TypeDefaultDescription
string
#edf4f8Background color of the Progress.

Example

Source code
<UIVStack yGap={16}>
  <UIProgress value={60} />
  <UIProgress value={60} bg="#e5ecf1" />
  <UIProgress value={60} bg="#a8bac1" />
  <UIProgress value={60} bg="#f5b861" />
</UIVStack>

Static

border

Use this to change the Progress border width.

borderColor

Use this to change the Progress border color.

Tips

Consider removing the minWidth property

The minWidth: 80 property within the progress: {...} styles ensures the visibility of the Progress component, regardless of the layout it's placed in. Because some layouts can affect its size, potentially setting it to 0, you typically don't need to remove it unless you specifically intend to set a smaller size for the Progress element than the current minWidth value.

Editor

Source code
import React from 'react';
import {View} from 'react-native';

const UIProgress = ({
  value = 0,
  size = 'md',
  rounded = 'full',
  trackBg = '#169f94',
  bg = '#edf4f8',
  style
}) => {
  const sizeMappedValue = {
    'xs': 4,
    'sm': 8,
    'md': 14,
    'lg': 20,
    'xl': 26,
    '2xl': 32,
  }[size];
  const fullRadius = sizeMappedValue / 2;
  const roundedMappedValues = {
    'none': 0,
    'xs': 2,
    'sm': 4,
    'md': 6,
    'lg': 8,
    'xl': 12,
    '2xl': 16,
    '_2xl': 16,
    'full': fullRadius,
  }[rounded];
  
  const styles = {
    progress: {
      flexDirection: 'row',
      minWidth: 80,
      height: sizeMappedValue,
      minHeight: sizeMappedValue,
      flexShrink: 0,
      flexBasis: 0,
      borderRadius: roundedMappedValues,
      backgroundColor: bg,
      overflow: 'hidden',
    },
    progressTrack: {
      width: `${value}%`,
      borderRadius: roundedMappedValues,
      backgroundColor: trackBg,
    },
  };

  return (
    <View style={[styles.progress, style]}>
      <View style={styles.progressTrack} />
    </View>
  );
};

export default UIProgress;
Usage example
<UIProgress
  value={40}
/>