Menu

The Menu component provides a settings/navigation system for the video player.
It uses the BottomSheet as the container and supports:

• Nested sub-menus with smooth slide animations.
• Checkboxes and interactive items.
• Fully customizable headers and content areas.
• Automatic integration with the player's theme.

---

Usage

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

export function Example() {
  return (
    <Menu.Root>
      <Menu.Trigger />

      <Menu.Content>
        <Menu.SubContent viewId="root">
          <Menu.Label>Playback</Menu.Label>
          <Menu.Item navigateTo="quality">Quality</Menu.Item>
        </Menu.SubContent>

        <Menu.SubContent viewId="quality">
          <Menu.CheckboxItem checked={true} onCheckedChange={console.log}>
            1080p
          </Menu.CheckboxItem>
          <Menu.CheckboxItem checked={false} onCheckedChange={console.log}>
            720p
          </Menu.CheckboxItem>
        </Menu.SubContent>
      </Menu.Content>
    </Menu.Root>
  );
}

---

API Reference

Menu.Root

Wraps all menu components and manages the navigation stack.

Prop	Type	Default	Required	Description
initialView	string	"root"	No	The first viewId in the stack.

---

Menu.Trigger

Button that opens the menu.

Prop	Type	Required	Description
...props	SettingsButtonProps	No	Props passed to the SettingsButton.

---

Menu.Header

Header for the menu, with back/close buttons and a title.

Prop	Type	Default	Required	Description
title	string	–	No	Title of the current view.
showBackButton	boolean	true	No	Show the back button.
showCloseButton	boolean	true	No	Show the close button.
...props	ViewProps	–	No	Additional props for the header container.

---

Menu.Content

The BottomSheet wrapper for menu views.

Prop	Type	Default	Required	Description
children	ReactNode		Yes	Nested Menu.SubContent blocks.
header	(currentView: string) => ReactNode		No	Optional custom header renderer.
sheetStyle	ViewStyle		No	Custom style for the sheet body.

---

Menu.SubContent

Renders content for a specific viewId. Only visible when currentView matches.

Prop	Type	Required	Description
viewId	string	Yes	ID to match against navigation stack.
children	ReactNode	Yes	Sub-menu items.

---

Menu.Item

Basic clickable row. Can either close the menu or navigate to a sub-view.

Prop	Type	Default	Required	Description
onPress	(value?: any) => void	–	No	Action when pressed.
navigateTo	string	–	No	If set, navigates to this sub-view.
autoClose	boolean	true	No	If true, closes menu after press (ignored if navigateTo is provided).
disabled	boolean	false	No	Disables interaction.
value	any	–	No	Optional value passed to onPress.

---

Menu.Label

Non-interactive label for section headers.

Prop	Type	Required	Description
children	ReactNode	Yes	The label text.

---

Menu.Separator

Divider line between items.

Prop	Type	Required	Description
style	ViewStyle	No	Custom style for the line.

---

Menu.Group

Simple wrapper for grouping related items.

Prop	Type	Required	Description
children	ReactNode	Yes	The items to group.

---

Menu.CheckboxItem

Toggleable option with a check indicator.

Prop	Type	Default	Required	Description
checked	boolean		No	Controlled checked state.
onCheckedChange	(checked: boolean) => void		No	Called when toggled.

If checked is not provided, it manages its own state.

---

Menu.Close

Button that closes the menu manually.

Prop	Type	Required	Description
...props	PressableProps	No	Props passed to the Pressable.

---

Menu.Back

Button that navigates back in the menu stack.

Prop	Type	Required	Description
...props	PressableProps	No	Props passed to the Pressable.

---

Styling

• Colors, background, and borders adapt automatically to theme from useVideo().
• Animations are handled by react-native-reanimated.
• You can pass style and textStyle props to most components for customization.