ComponentsControls

PlayButton

A control component that toggles between play and pause states for the video

Usage

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

const MyPlayButton = () => {
  return <PlayButton />;
};

Props

PropTypeRequiredDefaultDescription
sizenumberNo–Size of the play/pause icon.
colorstringNoTheme text colorColor of the icon.
styleStyleProp<ViewStyle>No–Custom styles for the button container.
renderPlayIcon() => React.ReactNodeNo<Play />Custom render function for the play icon.
renderPauseIcon() => React.ReactNodeNo<Pause />Custom render function for the pause icon.

Examples

Default PlayButton

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

<PlayButton />;

Custom Size & Color

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

<PlayButton size={36} color="green" />;

With Custom Icons

import { PlayButton } from 'react-native-video-toolkit';
import { CirclePlay, CirclePause } from 'lucide-react-native';
import React from 'react';

<PlayButton renderPlayIcon={() => <CirclePlay />} renderPauseIcon={() => <CirclePause />} />;

Integration Example

Embed inside your VideoPlayer layout:

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

const MyVideoPlayer = () => {
  return (
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
      <VideoPlayer.Controls>
        <PlayButton size={40} color="white" />
      </VideoPlayer.Controls>
    </VideoPlayer>
  );
};
  • The play/pause state is managed internally by the usePlayback hook.
  • You can override the icons for a fully customized experience.

BottomSheet

The BottomSheet component that provides an animated modal-like interface sliding up from the bottom of the screen, with gesture support and theming integration.

MuteButton

A control component that toggles the muted state of the video

On this page

UsagePropsExamplesDefault PlayButtonCustom Size & ColorWith Custom IconsIntegration Example