Components

All components support TypeScript and are built with the React Native new architecture in mind.

Component Categories

Video Player

The main video player component that serves as the container for all other components

Core Components

Essential components for video functionality like VideoSurface

Control Components

Interactive controls like play buttons, progress bars, and volume controls

Display Components

Visual elements like time displays, titles, and loading spinners

Common Components

Shared components like base buttons and bottom sheets

Menu Components

Menu systems and overlays for settings and options

Quick Start

The main entry point is the VideoPlayer component:

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

function BasicPlayer() {
  return (
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }} style={{ width: '100%', height: 200 }}>
      <VideoPlayer.Controls />
    </VideoPlayer>
  );
}

Component Architecture

The library follows a compound component pattern where the VideoPlayer serves as the main container, and all other components can be composed within it:

VideoPlayer: Main container and state provider
VideoPlayer.Controls: Pre-built control set
Individual Controls: Granular control components
Display Elements: Visual feedback components
Layout Components: Structural containers

Components should be used within a VideoProvider context, which is automatically provided by VideoPlayer.