ProgressBar

ProgressBar is a customizable slider component that displays the current playback position and the total duration of the video.
It supports scrubbing (seeking), integrates with the player theme, and automatically updates as playback progresses.

---

Usage

import { ProgressBar } from 'react-native-video-toolkit';
import React from 'react';

const MyProgressBar = () => {
  return <ProgressBar />;
};

---

Props

Prop	Type	Required	Default	Description
height	number	No	4	Height of the progress track (in px).
thumbWidth	number	No	12	Width of the draggable thumb control.
style	StyleProp<ViewStyle>	No	–	Optional styles for the container.

---

Examples

Default ProgressBar

import { ProgressBar } from 'react-native-video-toolkit';

<ProgressBar />;

Custom Height & Thumb

import { ProgressBar } from 'react-native-video-toolkit';

<ProgressBar height={6} thumbWidth={16} />;

Styled ProgressBar

import { ProgressBar } from 'react-native-video-toolkit';

<ProgressBar style={{ marginHorizontal: 20 }} />;

Integration Example

Embed inside your VideoPlayer controls:

import { VideoPlayer, ProgressBar } from 'react-native-video-toolkit';

const MyVideoPlayer = () => {
  return (
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
      <VideoPlayer.Controls>
        <ProgressBar height={6} thumbWidth={14} />
      </VideoPlayer.Controls>
    </VideoPlayer>
  );
};

---

info

• Progress is managed via the useProgress hook (provides currentTime, duration, seek).
• When sliding starts, showControls() is called so the UI remains visible during scrubbing.
• Colors adapt automatically using the player's theme (primary for progress, secondary for track).