ProgressBar

The ProgressBar module provides a smooth, animated progress indicator component built with react-native-reanimated for optimal performance. Perfect for displaying task completion, loading states, or any percentage-based progress visualization.

Overview

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

Key Features

• Smooth Animations: Built with 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: Proper accessibility support for progress indicators
• Performance Optimized: Efficient rendering with minimal re-renders

Quick Example

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

Prop	Type	Required	Default	Description
progress	number | SharedValue<number>	✓	-	Progress value between 0 and 1, or SharedValue for animations
color	string	-	theme.colors.primary	Color of the progress fill
innerStyle	StyleProp<ViewStyle>	-	-	Additional styling for the inner progress fill
innerTestID	string	-	-	Test identifier for the inner progress element

Inherits all props from ViewProps

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

The component automatically detects and handles different progress input types:

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

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

Animation Configuration

Built-in spring animation with optimized parameters:

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

Styling

Theme Colors Used

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

External Dependencies

• react-native-reanimated - For smooth animations and SharedValue support