ComponentsControls

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 { ProgressBar } from 'react-native-video-toolkit';
import React from 'react';

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

Props

PropTypeRequiredDefaultDescription
heightnumberNo4Height of the progress track (in px).
thumbWidthnumberNo12Width of the draggable thumb control.
styleStyleProp<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).

VolumeControl

A customizable slider that allows users to adjust video volume interactively, integrated with the video player's state and theme.

FullscreenButton

A control component that toggles fullscreen mode for the video player

On this page

UsagePropsExamplesDefault ProgressBarCustom Height & ThumbStyled ProgressBarIntegration Example