ComponentsControls

SubtitleToggleButton

A control component that toggles subtitles (captions) on and off.

Usage

import React from 'react';
import { SubtitleToggleButton } from 'react-native-video-toolkit';

export const SubtitleToggleButtonUsageExample = () => {
  return <SubtitleToggleButton />;
};

Props

This component does not accept any props.

Example

Default SubtitleToggleButton

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

<SubtitleToggleButton />;

Integration Example

Typically used within a VideoPlayer:

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

const MyVideoPlayer = () => {
  return (
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
      <VideoPlayer.Controls>
        <SubtitleToggleButton />
      </VideoPlayer.Controls>
    </VideoPlayer>
  );
};

The button automatically manages subtitle state using useSettings hook.
When turned on, it resumes the last selected subtitle track.
If no subtitles are available, the button will not be rendered.

SettingsButton

A control component that opens the video player's settings menu

VideoSurface

A thin wrapper around react-native-video that integrates with the toolkit's context and hooks.

On this page

Usage Props Example Default SubtitleToggleButton Integration Example