Progress

Progress displays percentage completion bars and circular progress ring indicators with Reanimated UI thread easing and SVG rounded stroke caps.

Usage

ProgressExample.tsx

import React from 'react';
import { Progress, CircularProgress, Box, Text } from '@masumdev/rn-ui';

export function ProgressExample() {
  return (
    <Box gap="md">
      {/* Sizes Scale */}
      <Progress value={85} size="xs" tone="success" />
      <Progress value={70} size="sm" tone="primary" />
      <Progress value={55} size="default" tone="warning" />
      <Progress value={90} size="xl" tone="danger" />

      {/* Indeterminate Loading Bar */}
      <Progress indeterminate tone="primary" size="sm" />

      {/* Rounded Circular Ring Indicators */}
      <Box row gap="lg" center>
        <CircularProgress value={75} tone="primary" size={64} strokeLinecap="round" />
        <CircularProgress value={92} tone="success" size={64} strokeLinecap="round" />
      </Box>
    </Box>
  );
}

Props API

Progress

Prop	Type	Default	Description
value	number	0	Percentage completion value (0-100).
max	number	100	Maximum total progress value.
size	'xs' | 'sm' | 'default' | 'lg' | 'xl'	'default'	Bar height scale (xs=4px, sm=6px, default=10px, lg=14px, xl=18px).
tone	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Color tone styling.
indeterminate	boolean	false	Enables continuous infinite loading animation.
animated	boolean	true	Enables smooth Reanimated fill transitions.

CircularProgress

Prop	Type	Default	Description
value	number	0	Percentage completion value (0-100).
size	number	64	Outer diameter ring dimension in pixels.
strokeWidth	number	6	Thickness of the progress stroke ring.
strokeLinecap	'round' | 'square' | 'butt'	'round'	Line cap styling for arc ends (round=smooth rounded caps).
tone	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Color tone styling.
showValue	boolean	true	Displays percentage text inside ring center.