Function MenuItem

src/components/Menu/MenuItem.tsx:133–243

({
  leadingIcon,
  trailingIcon,
  dense,
  title,
  disabled,
  background,
  onPress,
  style,
  containerStyle,
  contentStyle,
  titleStyle,
  rippleColor: customRippleColor,
  testID = 'menu-item',
  accessibilityLabel,
  accessibilityState,
  theme: themeOverrides,
  titleMaxFontSizeMultiplier = 1.5,
  hitSlop,
}: Props)

 * ```
 */
const MenuItem = ({
  leadingIcon,
  trailingIcon,
  dense,
  title,
  disabled,
  background,
  onPress,
  style,
  containerStyle,
  contentStyle,
  titleStyle,
  rippleColor: customRippleColor,
  testID = 'menu-item',
  accessibilityLabel,
  accessibilityState,
  theme: themeOverrides,
  titleMaxFontSizeMultiplier = 1.5,
  hitSlop,
}: Props) => {
  const theme = useInternalTheme(themeOverrides);
  const { titleColor, iconColor, rippleColor } = getMenuItemColor({
    theme,
    disabled,
    customRippleColor,
  });
  const { isV3 } = theme;

  const containerPadding = isV3 ? 12 : 8;

  const iconWidth = isV3 ? 24 : 40;

  const minWidth = MIN_WIDTH - (isV3 ? 12 : 16);

  const maxWidth = getContentMaxWidth({
    isV3,
    iconWidth,
    leadingIcon,
    trailingIcon,
  });

  const titleTextStyle = {
    color: titleColor,
    ...(isV3 ? theme.fonts.bodyLarge : {}),
  };

  const newAccessibilityState = { ...accessibilityState, disabled };

  return (
    <TouchableRipple
      style={[
        styles.container,
        { paddingHorizontal: containerPadding },
        dense && styles.md3DenseContainer,
        style,
      ]}
      onPress={onPress}
      disabled={disabled}