Progress

The Progress component displays a horizontal bar that fills proportionally to represent a value between 0 and a configurable maximum. It is built with React Native View components and styled using NativeWind classes.

Preview

Installation

npx novaui-cli add progress

Import

import { Progress } from 'novaui-components'

Basic Usage

Pass a value prop to set the current progress. By default, the max is 100:

import { Progress } from 'novaui-components'

export function BasicProgress() {
  return <Progress value={60} />
}

Values

Zero Progress

An empty progress bar representing 0%:

<Progress value={0} />

Partial Progress

A partially filled progress bar:

<Progress value={45} />

Complete Progress

A fully filled progress bar:

<Progress value={100} />

Custom Max Value

Set a custom maximum value for progress calculation:

<Progress value={3} max={5} />

With Label

Display a progress bar with a text label showing the percentage:

import { View, Text } from 'react-native'
import { Progress } from 'novaui-components'

export function ProgressWithLabel() {
  const value = 72

  return (
    <View className="gap-2">
      <View className="flex-row justify-between">
        <Text className="text-sm font-medium text-foreground">Uploading...</Text>
        <Text className="text-sm text-muted-foreground">{value}%</Text>
      </View>
      <Progress value={value} />
    </View>
  )
}

Props API

ProgressProps

Extends React.ComponentPropsWithoutRef<typeof View> and includes:

Best Practices

1. Show context: Pair the progress bar with text labels to explain what is being loaded or completed.

2. Clamp values: The component automatically clamps values between 0 and max, but validate inputs when possible.

3. Avoid indeterminate use: This component represents determinate progress. For indeterminate loading, use Spinner instead.

4. Animate transitions: For smoother UX, consider animating the value prop changes with React Native's Animated API.

5. Accessible labels: Add accessibilityLabel and accessibilityValue props for screen reader support.

Related Components

• Use Spinner for indeterminate loading states
• Combine with Text or Label for progress descriptions
• Pair with Button for upload or download actions