PlayButton

PlayButton is a control component that toggles between play and pause states for the video.
It switches icons automatically based on playback state and supports customization for size, color, style, and icons.

---

Usage

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

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

---

Props

Prop	Type	Required	Default	Description
size	number	No	–	Size of the play/pause icon.
color	string	No	Theme text color	Color of the icon.
style	StyleProp<ViewStyle>	No	–	Custom styles for the button container.
renderPlayIcon	() => React.ReactNode	No	<Play />	Custom render function for the play icon.
renderPauseIcon	() => React.ReactNode	No	<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>
  );
};

---

info

• The play/pause state is managed internally by the usePlayback hook.
• You can override the icons for a fully customized experience.