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

Props

PropTypeRequiredDefaultDescription
heightnumberNo4Height of the progress track (in px).
thumbWidthnumberNo12Width of the draggable thumb control.
styleStyleProp<ViewStyle>No–Optional styles for the container.
onSeekStart() => voidNo–Callback fired when the user starts seeking.
onSeekEnd(time: number) => voidNo–Callback fired when the user finishes seeking.
onSeek(time: number) => voidNo–Callback fired when the seek position changes.

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>
  );
};
  • With the default slider, the bar follows playback through shared values on the UI thread and doesn't re-render while the video plays. A custom Slider gets the position from useProgress() as plain numbers, and re-renders on every progress event.
  • When sliding starts, showControls() is called so the UI remains visible during scrubbing.
  • Use onSeekStart, onSeek, and onSeekEnd callbacks to track user interactions.
  • Colors adapt automatically using the player's theme (sliderTrackActive for progress, sliderTrackInactive 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