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.

---

info

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