Customization

This section covers how to leverage its compound component pattern, theming system, and gesture controls.

react-native-video-toolkit is designed for high customizability, allowing you to create unique video player experiences. This section covers how to leverage its compound component pattern, theming system, and gesture controls.

Compound Components

The VideoPlayer component uses a compound component pattern, meaning it exposes several sub-components that you can arrange and style as needed. This gives you full control over the player's UI layout.

The compound component pattern allows you to compose custom layouts while maintaining consistent behavior and state management.

Custom Player UI Example

-0s

+0s

0:00

import React from 'react';
import { View, StyleSheet } from 'react-native';
import {
  VideoPlayer,
  PlayButton,
  ProgressBar,
  TimeDisplay,
  FullscreenButton,
  MuteButton,
  VolumeControl,
  LoadingSpinner,
  SettingsButton,
} from 'react-native-video-toolkit';

export const CustomPlayerUI = () => {
  return (
    <VideoPlayer.Controls style={styles.controlsContainer}>
      {/* Top controls */}
      <View style={styles.topControls}>
        <MuteButton />
        <VolumeControl />
        <View style={{ flex: 1 }} /> {/* Spacer */}
        <FullscreenButton />
        <SettingsButton />
        {/* Use Menu for settings sheet */}
      </View>

      {/* Middle controls (e.g., loading spinner) */}
      <View style={styles.middleControls}>
        <LoadingSpinner />
      </View>

      {/* Bottom controls */}
      <View style={styles.bottomControls}>
        <View style={{ flexDirection: 'row' }}>
          <PlayButton />
          <TimeDisplay />
        </View>
        <ProgressBar />
      </View>
    </VideoPlayer.Controls>
  );
};

export const CustomizationExample = () => {
  const videoSource = {
    uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  };

  return (
    <VideoPlayer containerStyle={styles.videoPlayer} source={videoSource}>
      <CustomPlayerUI />
    </VideoPlayer>
  );
};

const styles = StyleSheet.create({
  controlsContainer: {
    justifyContent: 'space-between',
  },
  topControls: {
    flexDirection: 'row',
    padding: 16,
    alignItems: 'center',
  },
  middleControls: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  bottomControls: {
    flexDirection: 'column',
    padding: 16,
  },
  videoPlayer: {
    width: '100%',
    height: '100vh', // for web, take full height of the viewport, since the example is been rendered on web
  },
});

export default CustomizationExample;

Theming

The library provides a flexible theming system to easily customize colors, fonts, sizing, and other visual elements. Custom themes should be of type Theme.

Theming Example

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

const customTheme = {
  colors: {
    primary: '#ff6347', // Tomato red
    secondary: '#4682b4', // Steel blue
    accent: '#ffeb3b', // Bright yellow
    background: 'rgba(0, 0, 0, 0.6)',
    text: '#ffffff',
  },
  // other theme properties (sizing, fonts, etc.)
};

const ThemedPlayer = () => {
  const videoSource = {
    uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  };

  return (
    <VideoProvider theme={customTheme}>
      <VideoPlayer source={videoSource}>{/* Your custom UI or a built-in layout */}</VideoPlayer>
    </VideoProvider>
  );
};

export default ThemedPlayer;

Configuration Options

The VideoProvider and VideoPlayer accept various props to configure their behavior.

VideoProvider Props

Prop	Type	Required	Default	Description
`theme`	`Theme`	No	–	Custom theme object for colors, fonts, sizing, etc.
`config`	`VideoPlayerConfig`	No	–	Configuration options for player behavior.

Configuration Example

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

<VideoProvider
  config={{
    enableScreenRotation: true,
    onEnterFullscreen: () => console.log('Entered fullscreen'),
    onExitFullscreen: () => console.log('Exited fullscreen'),
    onHideControls: () => console.log('Controls hidden'),
    onShowControls: () => console.log('Controls shown'),
  }}>
  <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
    <CustomPlayerUI />
  </VideoPlayer>
</VideoProvider>;

Gestures

The VideoPlayer includes built-in gesture support for common interactions like double-tapping to seek and tapping to toggle controls. You can also pass gestureProps to extend behavior. This prop accepts GestureHandlerProps.

Gestures Example

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

<VideoPlayer
  source={{ uri: 'https://example.com/video.mp4' }}
  containerStyle={styles.videoPlayer}
  gestureProps={{
    onLeftVerticalPan(e) {
      console.log('left pan', e);
    },
    onRightVerticalPan(e) {
      console.log('right pan', e);
    },
    onGlobalVerticalPan(e) {
      console.log('global pan', e);
    },
  }}>
  <DefaultLayout />
</VideoPlayer>;

const styles = StyleSheet.create({
  videoPlayer: {
    width: '100%',
    height: 200,
  },
});

Customization

On this page