ProgressBar

A customizable slider component that displays the current playback position and total duration of the video, with scrubbing support and theming integration.

Usage

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

export const ProgressBarUsageExample = () => {
  const { setDuration, setCurrentTime } = useProgress();

  useEffect(() => {
    setDuration(300); // Set total duration to 5 minutes
    setCurrentTime(120); // Set current time to 2 minutes
  }, [setDuration, setCurrentTime]);
  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>
  );
};

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).

ProgressBar

Usage

Props

Examples

Default ProgressBar

Custom Height & Thumb

Styled ProgressBar

Integration Example

On this page