MuteButton

Usage

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

export const MuteButtonUsageExample = () => {
  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>
  );
};

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.

MuteButton

Usage

Props

Examples

Default MuteButton

Customized Icon Size & Color

With Custom Icons

Integration Example

On this page