MuteButton

MuteButton is a control component that toggles the muted state of the video.
It switches between mute and unmute icons automatically and can be customized in size, color, and style.
Custom icons can also be provided via renderMuteIcon and renderUnmuteIcon.

---

Usage

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

const MyMuteButton = () => {
  return <MuteButton />;
};

---

Props

Prop	Type	Required	Default	Description
size	number	No	–	Size of the icon button.
color	string	No	Theme text color	Color of the icon.
style	StyleProp<ViewStyle>	No	–	Custom styles for the mute button container.
renderMuteIcon	() => React.ReactNode	No	<VolumeX />	Custom render function for the mute icon.
renderUnmuteIcon	() => React.ReactNode	No	<Volume2 />	Custom render function for the unmute icon.

---

Examples

Default MuteButton

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

<MuteButton />;

Customized Icon Size & Color

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

<MuteButton size={32} color="red" />;

With Custom Icons

import { MuteButton } from 'react-native-video-toolkit';
import { Bell, BellOff } from 'lucide-react-native';
import React from 'react';

<MuteButton renderMuteIcon={() => <BellOff />} renderUnmuteIcon={() => <Bell />} />;

---

Integration Example

Place inside your VideoPlayer layout:

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

const MyVideoPlayer = () => {
  return (
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
      <VideoPlayer.Controls>
        <MuteButton size={28} color="white" />
      </VideoPlayer.Controls>
    </VideoPlayer>
  );
};

---

info

• The mute state is fully managed internally by the useVolume hook.
• You can override the icons for a fully customized experience.
• Works seamlessly with gesture handling via muteTapGesture.