# ProgressBar

Canonical page: https://docs.ovok.com/native-sdk/guide/components/progress-bar

The ProgressBar module provides a smooth, animated progress indicator component built with [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) for optimal performance. Perfect for displaying task completion, loading states, or any percentage-based progress visualization.

## Overview [#overview]

The ProgressBar component is designed to provide fluid animations and precise progress tracking with minimal performance overhead.

### Key Features [#key-features]

- **Smooth Animations**: Built with [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) for 60fps animations
- **Flexible Progress Input**: Supports both static numbers and animated SharedValues
- **Customizable Styling**: Full control over colors, dimensions, and styling
- **Theme Integration**: Built-in support for theme colors and spacing
- **Spring Animations**: Natural spring-based animation transitions
- **TypeScript Support**: Full type safety with comprehensive type definitions
- **Accessibility boundary**: Add the progress role, value, and announcements in
  the app; this primitive does not add accessibility semantics automatically
- **Performance Optimized**: Efficient rendering with minimal re-renders

## Quick Example [#quick-example]

```tsx
import { ProgressBar, useAppTheme } from "@ovok/native";
import React from "react";

const ProgressBarExample = () => {
  const theme = useAppTheme();
  const [progress, setProgress] = React.useState(0.7);

  return (
    <ProgressBar
      progress={progress}
      color={theme.colors.primary}
      style={{
        height: 12,
        backgroundColor: theme.colors.gray[200],
      }}
    />
  );
};

export default ProgressBarExample;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/progress-bar` API reference](/native-sdk/reference/progress-bar).

## Component Behavior [#component-behavior]

The ProgressBar component:

1. **Animated Progress**: Uses react-native-reanimated for smooth spring animations
2. **Flexible Input**: Accepts both static numbers and SharedValues for progress
3. **Automatic Scaling**: Converts progress (0-1) to percentage width (0-100%)
4. **Theme Integration**: Uses theme colors and can be customized with theme values
5. **Overflow Handling**: Properly clips progress fill within container bounds

### Progress Value Handling [#progress-value-handling]

The component automatically detects and handles different progress input types:

```tsx
// Static number (0 to 1)
<ProgressBar progress={0.5} />;

// SharedValue for animations
const animatedProgress = useSharedValue(0.5);
<ProgressBar progress={animatedProgress} />;
```

### Animation Configuration [#animation-configuration]

Built-in spring animation with optimized parameters:

```tsx
// Internal animation settings
{
  damping: 15,    // Controls bounce - higher = less bounce
  stiffness: 100, // Controls speed - higher = faster
}
```

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.primary` - Default progress fill color
- `theme.colors.gray[300]` - Default container background color

## External Dependencies [#external-dependencies]

- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) - For smooth animations and SharedValue support