SettingsButton

SettingsButton is an icon-based control that opens the video player's settings menu.
By default, it renders a gear icon (lucide-react-native), but the icon can be customized.

---

Usage

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

const MySettings = () => {
  return <SettingsButton />;
};

---

Props

Prop	Type	Required	Default	Description
size	number	No	–	Size of the icon.
color	string	No	–	Color of the icon.
style	StyleProp<ViewStyle>	No	–	Optional styles for the button container.
renderSettingIcon	() => React.ReactNode	No	Gear icon (Settings)	Custom render function for the settings icon.

---

Examples

Default Settings Button

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

<SettingsButton size={28} color="#fff" />;

Custom Icon

import { SettingsButton } from 'react-native-video-toolkit';
import { Sliders } from 'lucide-react-native';
import React from 'react';

<SettingsButton renderSettingIcon={() => <Sliders />} />;

---

info

• Works seamlessly inside control bars alongside PlayButton, MuteButton, and FullscreenButton.
• Typically used to open menus for:
  • Video quality selection
  • Subtitle / text track management
  • Playback speed adjustment