The root component of the toolkit that provides video playback, gesture handling, and a flexible API for composing custom control layouts.

VideoPlayer

The VideoPlayer is the root component of the toolkit.
It provides video playback, gesture handling, and a flexible API for composing custom control layouts.

This component uses a compound component pattern:

<VideoPlayer>
  <VideoPlayer.Controls>
    <VideoPlayer.PlayButton />
    <VideoPlayer.ProgressBar />
    <VideoPlayer.TimeDisplay />
  </VideoPlayer.Controls>
</VideoPlayer>

Usage

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

export default function App() {
  return (
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }} videoProps={{ resizeMode: 'contain' }}>
      <VideoPlayer.Controls>
        <VideoPlayer.PlayButton />
        <VideoPlayer.ProgressBar />
        <VideoPlayer.TimeDisplay />
        <VideoPlayer.VolumeControl />
        <VideoPlayer.FullscreenButton />
        <VideoPlayer.SettingsButton />
      </VideoPlayer.Controls>
      <VideoPlayer.Menu />
    </VideoPlayer>
  );
}

Props

Prop	Type	Required	Default	Description
`source`	`VideoSource`	Yes	–	Video source (`uri`, local file, or require). Extends `react-native-video`.
`children`	`ReactNode`	No	–	Optional custom overlay or controls.
`containerStyle`	`StyleProp<ViewStyle>`	No	–	Style applied to the root container.
`videoProps`	`ReactVideoProps`	No	–	Props passed to the underlying `react-native-video` player.
`gestureProps`	`GestureHandlerProps`	No	–	Props for the built-in `GestureHandler` (e.g. double-tap to seek).

Examples

Minimal Player

<VideoPlayer source={{ uri: 'https://example.com/video.mp4' }} />

With Custom Controls

<VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
  <VideoPlayer.Controls style={{ justifyContent: 'space-between' }}>
    <VideoPlayer.PlayButton />
    <VideoPlayer.ProgressBar />
    <VideoPlayer.TimeDisplay />
  </VideoPlayer.Controls>
</VideoPlayer>

Compound Components

The VideoPlayer exports several prebuilt UI primitives:

Component	Description
`VideoPlayer.Controls`	A container for grouping controls (`absoluteFill`).
`VideoPlayer.PlayButton`	Toggles play/pause.
`VideoPlayer.ProgressBar`	Displays seekable progress.
`VideoPlayer.TimeDisplay`	Shows current time / duration.
`VideoPlayer.VolumeControl`	Slider for adjusting volume.
`VideoPlayer.FullscreenButton`	Toggles fullscreen.
`VideoPlayer.MuteButton`	Toggles mute on/off.
`VideoPlayer.LoadingSpinner`	Spinner for buffering state.
`VideoPlayer.SettingsButton`	Opens settings menu.
`VideoPlayer.Menu`	Bottom-sheet style menu for settings.

The layout automatically adapts when toggling fullscreen (height/width swap based on device orientation). - All controls are theme-aware (colors, sizes come from useVideo provider). - If you don't like the built-in controls, you can compose your own using the hooks and providers.

VideoPlayer

VideoPlayer

Usage

Props

Examples

Minimal Player

With Custom Controls

Compound Components

On this page