Menu.Item

A component to show a single list item inside a Menu.

Usage

import * as React from 'react';
import { View } from 'react-native';
import { Menu } from 'react-native-paper';

const MyComponent = () => (
  <View style={{ flex: 1 }}>
    <Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
    <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
    <Menu.Item leadingIcon="content-cut" onPress={() => {}} title="Cut" disabled />
    <Menu.Item leadingIcon="content-copy" onPress={() => {}} title="Copy" disabled />
    <Menu.Item leadingIcon="content-paste" onPress={() => {}} title="Paste" />
  </View>
);

export default MyComponent;

Props

title (required)

Type: React.ReactNode

Title text for the MenuItem.

leadingIcon Renamed from 'icon' to 'leadingIcon' in v5.x

Type: IconSource

Leading icon to display for the MenuItem.

trailingIcon Available in v5.x with theme version 3

Type: IconSource

Trailing icon to display for the MenuItem.

disabled

Type: boolean

Whether the 'item' is disabled. A disabled 'item' is greyed out and onPress is not called on touch.

dense Available in v5.x with theme version 3

Type: boolean

Sets min height with densed layout.

background

Type: PressableAndroidRippleConfig

Type of background drawabale to display the feedback (Android). https://reactnative.dev/docs/pressable#rippleconfig

onPress

Type: (e: GestureResponderEvent) => void

Function to execute on press.

titleMaxFontSizeMultiplier

Type: number

Default value: 1.5

Specifies the largest possible scale a title font can reach.

style

Type: StyleProp<ViewStyle>

contentStyle

Type: StyleProp<ViewStyle>

titleStyle

Type: StyleProp<TextStyle>

rippleColor

Type: ColorValue

Color of the ripple effect.

theme

Type: ThemeProp

testID

Type: string

Default value: 'menu-item'

TestID used for testing purposes

accessibilityLabel

Type: string

Accessibility label for the Touchable. This is read by the screen reader when the user taps the component.

accessibilityState

Type: AccessibilityState

Accessibility state for the Touchable. This is read by the screen reader when the user taps the component.

Theme colors

info

The table below outlines the theme colors, specifically for MD3 (theme version 3) at the moment.

mode	textColor	iconColor
default	theme.colors.onSurface	theme.colors.onSurfaceVariant
disabled	theme.colors.onSurfaceDisabled	theme.colors.onSurfaceDisabled

tip

If a dedicated prop for a specific color is not available or the style prop does not allow color modification, you can customize it using the theme prop. It allows to override any color, within the component, based on the table above.

Example of overriding primary color:

<Menu.Item theme={{ colors: { primary: 'green' } }} />