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.

OverviewCopy Anchor Link

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

Key FeaturesCopy Anchor Link

• 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 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 ExampleCopy Anchor Link

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;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/progress-bar API reference.

Component BehaviorCopy Anchor Link

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 HandlingCopy Anchor Link

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 ConfigurationCopy Anchor Link

Built-in spring animation with optimized parameters:

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

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

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

External DependenciesCopy Anchor Link

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