@fluentui-react-native/menu 1.4.33 → 1.5.0

package/src/Menu/useMenu.android.ts

@@ -0,0 +1,325 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { LayoutChangeEvent, View } from 'react-native';
+import { Animated, Dimensions, Easing, I18nManager, StatusBar } from 'react-native';
+
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+
+import type { MenuProps, MenuState } from './Menu.types';
+import { AndroidMenuStates } from './Menu.types';
+import { useMenuContext } from '../context/menuContext';
+
+// Due to how events get fired we get double notifications
+// for the same event causing us to immediately reopen
+// a menu when we close it. Adding in a delay to prevent
+// this behavior.
+// This are use when show() function is called to show the Menu
+const delayOpen = 150;
+let lastCloseTimestamp = -1;
+
+/**
+ * Values related to Screen Width and Animation Easing
+ */
+
+//  Animated easing value for Menu transitions(close and open)
+const EASING = Easing.bezier(0.4, 0, 0.2, 1);
+
+// Screen indent is the fixed value according to Android guidelines which depicts the minimum distance from screen edge Menu should have
+const SCREEN_INDENT = 16;
+
+export const useMenu = (props: MenuProps): MenuState => {
+  /**
+   * State , Ref and Context Values for Menu Container and Anchor
+   */
+
+  const triggerRef = React.useRef();
+  const context = useMenuContext();
+  const isSubmenu = context.triggerRef !== null;
+  const isOpenControlled = typeof props.open !== 'undefined';
+  const _container = useRef<View>(null);
+  const [menuState, setMenuState] = React.useState<AndroidMenuStates>(AndroidMenuStates.Hidden);
+
+  /**
+   * Call for useMenuCheckedState for identifying if any MenuItemCheckbox is checked or not
+   */
+  const [checked, onCheckedChange] = useMenuCheckedState(props);
+
+  /**
+   *  State Variables related to Height,Width and Position of the Menu Popover
+   */
+  const [maxMenuHeight] = useState(250);
+  const [anchorWidth, setAnchorWidth] = React.useState<number>(0);
+  const [left, setLeft] = React.useState<number>(0);
+  const [menuHeight, setMenuHeight] = React.useState<number>(0);
+  const [menuWidth, setMenuWidth] = React.useState<number>(0);
+  const [top, setTop] = React.useState<number>(0);
+
+  /**
+   *  Animation value for the Menu popover show,hide and opacity values
+   */
+  const [menuSizeAnimation, setMenuSizeAnimation] = React.useState<Animated.ValueXY>(new Animated.ValueXY({ x: 0, y: 0 }));
+  const [opacityAnimation, setOpacityAnimation] = React.useState<Animated.Value>(new Animated.Value(0));
+
+  /**
+   * RTL for the MenuItem needs to taken care as well.
+   */
+  const { isRTL } = I18nManager;
+
+  /**
+   * Calcualations related to Menu Popver position and dimensions
+   */
+  const dimensions = Dimensions.get('screen');
+  const { width: windowWidth } = dimensions;
+  const windowHeight = dimensions.height - (StatusBar.currentHeight || 0);
+  const menuSize = {
+    width: menuSizeAnimation.x,
+    height: menuSizeAnimation.y,
+  };
+
+  /**
+   * show function handles the opening of the Menu , it calcuates the position of the Anchor in the screen.
+   * It also sets the Anchor width and change the state of the Popover
+   */ /**
+   * show function handles the opening of the Menu , it calcuates the position of the Anchor in the screen.
+   * It also sets the Anchor width and change the state of the Popover
+   */
+
+  const show = React.useCallback(() => {
+    _container.current?.measureInWindow((left, top, buttonWidth, buttonHeight) => {
+      setAnchorWidth(buttonWidth);
+      setLeft(left);
+      setMenuState(AndroidMenuStates.Shown);
+      setTop(top + buttonHeight);
+    });
+  }, []);
+
+  /**
+   * hide function handles the hiding of the Menu when user clicks on the scrim outside Menu or MenuItems such as (MenuItemRadio, MenuItem)
+   */
+  const hide = React.useCallback(() => {
+    Animated.timing(opacityAnimation, {
+      toValue: 0,
+      duration: 250,
+      easing: EASING,
+      useNativeDriver: false,
+    }).start(() => {
+      // Reset state
+      setMenuState(AndroidMenuStates.Hidden);
+      setMenuSizeAnimation(new Animated.ValueXY({ x: 0, y: 0 }));
+      setOpacityAnimation(new Animated.Value(0));
+    });
+  }, [opacityAnimation]);
+
+  // Hook to maintain the state of the Menu for non controlled and controlled components.
+  const [open, shouldFocusOnContainer, setOpen] = useMenuOpenState(isOpenControlled, props, context.setOpen, hide, show);
+
+  /**
+   * Checks the value of the open props and show the menu accordingly
+   */
+  useEffect(() => {
+    if (props.open) {
+      show();
+    }
+  }, [props.open]);
+
+  /**
+   * onMenuLayout handles the start of the Animation when anchor is clicked
+   */
+  const onMenuLayout = React.useCallback(
+    (e: LayoutChangeEvent) => {
+      if (menuState === AndroidMenuStates.Animating) {
+        return;
+      }
+      const { width, height } = e.nativeEvent.layout;
+      setMenuHeight(height);
+      setMenuWidth(width);
+      setMenuState(AndroidMenuStates.Animating);
+      Animated.parallel([
+        Animated.timing(menuSizeAnimation, {
+          toValue: { x: width, y: height },
+          duration: 100,
+          easing: EASING,
+          useNativeDriver: false,
+        }),
+        Animated.timing(opacityAnimation, {
+          toValue: 1,
+          duration: 100,
+          easing: EASING,
+          useNativeDriver: false,
+        }),
+      ]).start();
+    },
+    [menuSizeAnimation, menuState, opacityAnimation],
+  );
+
+  /**
+   * onRequestClose handles the closing of the Menu when the MenuItem or scrim or outside is clicked
+   */
+  const onRequestClose = (e: InteractionEvent) => {
+    setOpen(e, false, false);
+  };
+
+  // Adjust position of menu
+  const transforms = [];
+
+  useMemo(() => {
+    /**
+     * If the Menu width and SCREEN_INDENT cross the screen width then the Menu will be adjusted to the oppostion left side of the screen
+     */
+    if ((isRTL && left + anchorWidth - menuWidth > SCREEN_INDENT) || (!isRTL && left + menuWidth > windowWidth - SCREEN_INDENT)) {
+      transforms.push({
+        translateX: Animated.multiply(menuSizeAnimation.x, -1),
+      });
+    } else if (left < SCREEN_INDENT) {
+      // Setting the left podition of the Menu if the left positon is less than screen indent
+      setLeft(SCREEN_INDENT);
+    }
+
+    // Flip by Y axis if menu hits bottom screen border
+    if (top + menuHeight + SCREEN_INDENT > windowHeight) {
+      if (menuHeight > maxMenuHeight) {
+        transforms.push({
+          translateY: Animated.multiply(menuSizeAnimation.y, -1),
+        });
+      } else {
+        transforms.push({
+          translateY: Animated.multiply(menuSizeAnimation.y, -1),
+        });
+      }
+    } else if (top < SCREEN_INDENT) {
+      setTop(SCREEN_INDENT);
+    }
+  }, [
+    anchorWidth,
+    isRTL,
+    left,
+    maxMenuHeight,
+    menuHeight,
+    menuSizeAnimation.x,
+    menuSizeAnimation.y,
+    menuWidth,
+    top,
+    transforms,
+    windowHeight,
+    windowWidth,
+  ]);
+
+  /**
+   * Styles to be applied on the Modal Popover Animated.View
+   */
+  const shadowMenuContainerStyle = useMemo(() => {
+    return {
+      opacity: opacityAnimation,
+      transform: transforms,
+      top,
+      // Switch left to right for rtl devices
+      ...(isRTL ? { right: left } : { left }),
+    };
+  }, [isRTL, left, opacityAnimation, top, transforms]);
+
+  /**
+   * handles the state when menu is opening or closing with Animation
+   */
+  const animationStarted = menuState === AndroidMenuStates.Animating;
+  const { testID } = props;
+
+  // Default behavior for submenu is to open on hover
+  // the ...props line below will override this behavior for a submenu
+  // or apply openOnHover if passed into a root Menu.
+  const openOnHover = isSubmenu;
+  // We need to be able to cancel the timer that gets set on
+  // hover out of the parent popover if the parent popover
+  // is also set to open/close on hover out. Otherwise
+  // the parent menu will close when the timeout passes.
+  const parentPopoverHoverOutTimer = isSubmenu ? context.popoverHoverOutTimer : undefined;
+  return {
+    openOnHover,
+    ...props,
+    open,
+    setOpen,
+    shouldFocusOnContainer,
+    triggerRef,
+    isSubmenu,
+    isControlled: isOpenControlled,
+    parentPopoverHoverOutTimer,
+    setAnchorWidth,
+    shadowMenuContainerStyle,
+    _container,
+    onRequestClose,
+    onMenuLayout,
+    checked,
+    onCheckedChange,
+    menuHeight,
+    maxMenuHeight,
+    animationStarted,
+    menuSize,
+    testID,
+  };
+};
+
+/**
+ * useMenuOpenState handles the open and closing of the Menu based on the click
+ * It also takes care of Controlled Menu component by checking open variable
+ *
+ */
+const useMenuOpenState = (
+  isControlled: boolean,
+  props: MenuProps,
+  parentSetOpen: (e: InteractionEvent, isOpen: boolean, bubble?: boolean) => void,
+  hide: () => void,
+  show: () => void,
+): [boolean, boolean, (e: InteractionEvent, isOpen: boolean, bubble?: boolean) => void] => {
+  const { defaultOpen, onOpenChange, open } = props;
+  const initialState = typeof defaultOpen !== 'undefined' ? defaultOpen : !!open;
+  const [openInternal, setOpenInternal] = React.useState<boolean>(initialState);
+  const [shouldFocusOnContainer, setShouldFocusOnContainer] = React.useState<boolean | undefined>(undefined);
+  const state = isControlled ? open : openInternal;
+
+  /**
+   * setOpen handles the open of the Menu and setting focus on the Popover container
+   */
+  const setOpen = React.useCallback(
+    (e: InteractionEvent, isOpen: boolean, bubble?: boolean) => {
+      const openPrev = state;
+      if (!isControlled && (!isOpen || lastCloseTimestamp + delayOpen <= Date.now())) {
+        setOpenInternal(isOpen);
+      }
+      if (isOpen) {
+        show();
+        setShouldFocusOnContainer(true);
+      }
+      if (!isOpen) {
+        setShouldFocusOnContainer(undefined);
+        lastCloseTimestamp = Date.now();
+        hide();
+      }
+      if (onOpenChange && openPrev !== isOpen) {
+        onOpenChange(e, isOpen);
+      }
+      if (bubble && parentSetOpen && !isControlled) {
+        parentSetOpen(e, isOpen, bubble);
+      }
+    },
+    [state, onOpenChange, parentSetOpen, show, hide],
+  );
+  return [state, shouldFocusOnContainer, setOpen];
+};
+
+/**
+ * Call for useMenuCheckedState for identifying if any MenuItemCheckbox is checked or not
+ */
+const useMenuCheckedState = (props: MenuProps): [string[], (e: InteractionEvent, checked: string[]) => void] => {
+  const { checked, defaultChecked, onCheckedChange: onCheckedChangeOriginal } = props;
+  const [checkedInternal, setCheckedInternal] = React.useState(defaultChecked ?? checked ?? []);
+  const isControlled = typeof checked !== 'undefined';
+  const state = isControlled ? checked : checkedInternal;
+  const onCheckedChange = React.useCallback(
+    (e: InteractionEvent, checked: string[]) => {
+      if (!isControlled) {
+        setCheckedInternal(checked);
+      }
+      onCheckedChangeOriginal?.(e, checked);
+    },
+    [isControlled, setCheckedInternal, onCheckedChangeOriginal],
+  );
+  return [state, onCheckedChange];
+};

package/src/MenuCallout/MenuCallout.android.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Animated, Modal, TouchableWithoutFeedback, View, StyleSheet, ScrollView } from 'react-native';
+
+import { stagedComponent } from '@fluentui-react-native/framework';
+import { mergeProps } from '@fluentui-react-native/framework';
+
+import type { MenuCalloutProps } from './MenuCallout.types';
+import { menuCalloutName } from './MenuCallout.types';
+import { useMenuContext } from '../context';
+
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+
+export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
+  const context = useMenuContext();
+
+  return (_rest: MenuCalloutProps, children: React.ReactNode) => {
+    const mergedProps = mergeProps(props, _rest);
+    const tokens = props.tokens;
+
+    return (
+      <Modal
+        {...mergedProps}
+        visible={context.open}
+        onRequestClose={context.onRequestClose}
+        supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
+        transparent
+      >
+        <TouchableWithoutFeedback onPress={context.onRequestClose} accessible={false}>
+          <View style={[StyleSheet.absoluteFill]}>
+            <Animated.View
+              onLayout={context.onMenuLayout}
+              style={[
+                context.shadowMenuContainerStyle,
+                {
+                  maxHeight: mergedProps.maxHeight ? mergedProps.maxHeight : tokens.maxHeight,
+                  maxWidth: tokens.maxWidth,
+                  position: 'absolute',
+                  borderRadius: tokens.cornerRadius,
+                  elevation: tokens.elevation,
+                  overflow: 'hidden',
+                },
+              ]}
+            >
+              {context.menuHeight + tokens.minPadding >= tokens.maxHeight ||
+              context.menuHeight + tokens.minPadding >= mergedProps.maxHeight ? (
+                <AnimatedScrollView style={[context.animationStarted && context.menuSize]}>{children}</AnimatedScrollView>
+              ) : (
+                <Animated.View style={[context.animationStarted && context.menuSize]}>{children}</Animated.View>
+              )}
+            </Animated.View>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    );
+  };
+});
+
+MenuCallout.displayName = menuCalloutName;
+
+export default MenuCallout;

package/src/MenuCallout/MenuCallout.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Callout } from '@fluentui-react-native/callout';
+import { stagedComponent } from '@fluentui-react-native/framework';
+import { mergeProps } from '@fluentui-react-native/framework';
+
+import type { MenuCalloutProps } from './MenuCallout.types';
+import { menuCalloutName } from './MenuCallout.types';
+
+export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
+  return (_rest: MenuCalloutProps, children: React.ReactNode) => {
+    const mergedProps = mergeProps(props, _rest);
+
+    return <Callout {...mergedProps}>{children}</Callout>;
+  };
+});
+
+MenuCallout.displayName = menuCalloutName;
+
+export default MenuCallout;

package/src/MenuCallout/MenuCallout.types.ts

@@ -0,0 +1,22 @@
+import type { ICalloutProps, ICalloutTokens } from '@fluentui-react-native/callout';
+
+export const menuCalloutName = 'MenuCallout';
+
+// Support for anchorRect and beakWidth will come at a later time.
+// Omitting dismissBehaviors as it doesn't seem to make sense as a token
+export type MenuCalloutTokens =
+  | Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'> & {
+      /**
+       * The token for the corner radius for the Modal MenuPopover
+       * @platform android
+       */
+      cornerRadius?: number;
+
+      /**
+       * Shadown elevation token for the Modal MenuPopover
+       * @platform android
+       */
+      elevation?: number;
+    };
+
+export type MenuCalloutProps = ICalloutProps & { tokens: MenuCalloutTokens };

package/src/MenuCallout/index.ts

@@ -0,0 +1,3 @@
+export { MenuCallout } from './MenuCallout';
+export { menuCalloutName } from './MenuCallout.types';
+export type { MenuCalloutProps, MenuCalloutTokens } from './MenuCallout.types';

package/src/MenuDivider/MenuDivider.styling.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 import type { UseStylingOptions } from '@fluentui-react-native/framework';
 import { buildProps } from '@fluentui-react-native/framework';
 
@@ -7,6 +9,7 @@ import { defaultMenuDividerTokens } from './MenuDividerTokens';
 
 export const stylingSettings: UseStylingOptions<MenuDividerProps, MenuDividerSlotProps, MenuDividerTokens> = {
   tokens: [defaultMenuDividerTokens, menuDividerName],
+  tokensThatAreAlsoProps: ['insetSize'],
   slotProps: {
     root: buildProps(
       (tokens: MenuDividerTokens) => ({
@@ -17,6 +20,7 @@ export const stylingSettings: UseStylingOptions<MenuDividerProps, MenuDividerSlo
           margin: tokens.margin,
           marginVertical: tokens.marginVertical,
           display: 'flex',
+          ...(Platform.OS === 'android' && { marginStart: tokens.insetSize }),
         },
       }),
       ['backgroundColor', 'height', 'margin', 'marginVertical', 'width'],

package/src/MenuDivider/MenuDivider.types.ts

@@ -6,14 +6,20 @@ import type { IBackgroundColorTokens } from '@fluentui-react-native/tokens';
 
 export const menuDividerName = 'MenuDivider';
 
+export const MenuDividerInsetSizes = [0, 16, 56, 68, 72, 108] as const;
+export type MenuDividerInsetSize = (typeof MenuDividerInsetSizes)[number];
+
 export type MenuDividerTokens = IBackgroundColorTokens & {
   height?: number;
   margin?: number;
   marginVertical?: number;
   width?: ViewStyle['width'];
+  insetSize?: MenuDividerInsetSize;
 };
 
-export type MenuDividerProps = IViewProps;
+export type MenuDividerProps = IViewProps & {
+  insetSize?: MenuDividerInsetSize;
+};
 
 export interface MenuDividerSlotProps {
   root: React.PropsWithRef<IViewProps>;

package/src/MenuDivider/MenuDividerTokens.android.ts

@@ -0,0 +1,11 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { MenuDividerTokens } from './MenuDivider.types';
+
+export const defaultMenuDividerTokens: TokenSettings<MenuDividerTokens, Theme> = (t: Theme): MenuDividerTokens => ({
+  backgroundColor: t.colors.neutralStroke2,
+  height: globalTokens.stroke.width10,
+  insetSize: 0,
+});

package/src/MenuDivider/index.ts

@@ -1,3 +1,3 @@
 export { MenuDivider } from './MenuDivider';
 export { menuDividerName } from './MenuDivider.types';
-export type { MenuDividerProps, MenuDividerTokens, MenuDividerSlotProps, MenuDividerType } from './MenuDivider.types';
+export type { MenuDividerProps, MenuDividerTokens, MenuDividerSlotProps, MenuDividerType, MenuDividerInsetSize } from './MenuDivider.types';

package/src/MenuItem/MenuItem.styling.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework';
 import { buildProps } from '@fluentui-react-native/framework';
 import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
@@ -30,7 +32,7 @@ export const stylingSettings: UseStylingOptions<MenuItemProps, MenuItemSlotProps
         style: {
           height: tokens.checkmarkSize,
           width: tokens.checkmarkSize,
-          marginEnd: tokens.gap,
+          marginEnd: Platform.OS === 'android' ? tokens.marginEndForCheckedAndroid : tokens.gap,
         },
       }),
       ['checkmarkSize', 'gap'],

package/src/MenuItem/MenuItem.types.ts

@@ -31,6 +31,11 @@ export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens,
    */
   iconSize?: number;
 
+  /**
+   * Amount of space in pixels at the end of the item control that is reserved to align the item's text with other items which have checkmarks
+   */
+  marginEndForCheckedAndroid?: number;
+
   /**
    * Color of the indicator that shows that an item has a submenu
    */

package/src/MenuItem/MenuItemTokens.android.ts

@@ -0,0 +1,24 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { MenuItemTokens } from './MenuItem.types';
+
+export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: Theme): MenuItemTokens => ({
+  color: t.colors.neutralForeground1,
+  variant: 'body1',
+  paddingHorizontal: globalTokens.size160,
+  paddingVertical: globalTokens.size60,
+  iconColor: t.colors.neutralForeground3,
+  iconSize: globalTokens.size240,
+  marginEndForCheckedAndroid: globalTokens.size360,
+  pressed: {
+    backgroundColor: t.colors.neutralBackground1Pressed,
+  },
+  disabled: {
+    backgroundColor: t.colors.neutralBackground1,
+    color: t.colors.neutralForegroundDisabled1,
+    iconColor: t.colors.disabledText,
+  },
+  gap: globalTokens.size160,
+});

package/src/MenuItem/useMenuItem.ts

@@ -28,7 +28,6 @@ export const useMenuItem = (props: MenuItemProps): MenuItemInfo => {
   const onInvoke = React.useCallback(
     (e: InteractionEvent) => {
       const isRtl = I18nManager.isRTL;
-
       const isArrowKey = isKeyPressEvent(e) && (e.nativeEvent.key === 'ArrowLeft' || e.nativeEvent.key === 'ArrowRight');
       const isArrowOpen =
         hasSubmenu &&

package/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework';
 import { buildProps } from '@fluentui-react-native/framework';
 import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
@@ -7,6 +9,7 @@ import { menuItemCheckboxName } from './MenuItemCheckbox.types';
 import { defaultMenuItemCheckboxTokens } from './MenuItemCheckboxTokens';
 
 export const menuItemCheckboxStates: (keyof MenuItemCheckboxTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
+const hasPressRententionForA11y = Platform.OS === 'android';
 
 export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemCheckboxSlotProps, MenuItemCheckboxTokens> = {
   tokens: [defaultMenuItemCheckboxTokens, menuItemCheckboxName],
@@ -25,14 +28,37 @@ export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemC
       }),
       ['backgroundColor', ...borderStyles.keys, ...layoutStyles.keys],
     ),
+    ...(Platform.OS === 'android' && {
+      checkbox: buildProps(
+        (tokens: MenuItemCheckboxTokens) => ({
+          style: {
+            height: tokens.checkboxSize,
+            marginEnd: tokens.paddingHorizontal,
+            width: tokens.checkboxSize,
+            backgroundColor: tokens.checkboxBackgroundColor,
+            borderColor: tokens.checkboxBorderColor,
+            borderRadius: tokens.checkboxBorderRadius,
+            borderWidth: tokens.checkboxBorderWidth,
+            alignItems: 'center',
+            justifyContent: 'center',
+          },
+          ...(hasPressRententionForA11y && {
+            pressRetentionOffset: typeof tokens.padding === 'number' ? tokens.padding : parseFloat(tokens.padding), /// Retention of the press area outside of the checkbox equal to padding to match accessibility requirement
+          }),
+          android_ripple: { color: tokens.rippleColor, radius: tokens.checkmarkSize, foreground: true },
+        }),
+        ['checkboxBackgroundColor', 'checkboxBorderColor', 'checkboxBorderRadius', 'checkboxBorderWidth', 'checkboxSize', 'rippleColor'],
+      ),
+    }),
+
     checkmark: buildProps(
       (tokens: MenuItemCheckboxTokens) => ({
         opacity: tokens.checkmarkVisibility,
-        color: tokens.color,
+        color: tokens.checkmarkColor ?? tokens.color,
         height: tokens.checkmarkSize,
         width: tokens.checkmarkSize,
         viewBox: '0 0 ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2) + ' ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2),
-        style: { marginEnd: tokens.gap },
+        ...(Platform.OS !== 'android' && { style: { marginEnd: tokens.gap } }),
       }),
       ['checkmarkPadding', 'checkmarkSize', 'checkmarkVisibility', 'color', 'gap'],
     ),
@@ -41,6 +67,7 @@ export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemC
         style: {
           flexGrow: 1,
           color: tokens.color,
+          ...(Platform.OS === 'android' && { flexShrink: 1 }),
           ...fontStyles.from(tokens, theme),
         },
       }),

package/src/MenuItemCheckbox/MenuItemCheckbox.tsx

@@ -1,6 +1,6 @@
 /** @jsx withSlots */
 import React from 'react';
-import { Image, Pressable, View } from 'react-native';
+import { Image, Platform, Pressable, View } from 'react-native';
 
 import type { Slots, UseSlots } from '@fluentui-react-native/framework';
 import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework';
@@ -24,6 +24,7 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
   ...stylingSettings,
   slots: {
     root: Pressable,
+    ...(Platform.OS === 'android' && { checkbox: Pressable }),
     checkmark: SvgXml,
     content: Text,
     iconPlaceholder: View,
@@ -44,17 +45,29 @@ export const menuItemFinalRender = (
 ): React.FunctionComponent<MenuItemCheckboxProps> => {
   return (final: MenuItemCheckboxProps, children: React.ReactNode) => {
     const { accessibilityLabel, icon, tooltip, ...mergedProps } = mergeProps(menuItem.props, final);
+
     const checkmarkXml = `
     <svg>
       <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
     </svg>`;
 
+    const androidCheckmarkPath = `
+    <svg>
+      <path fill='currentColor' d='M9.76497 3.20474C10.0661 3.48915 10.0797 3.96383 9.79526 4.26497L5.54526 8.76497C5.40613 8.91228 5.21332 8.99703 5.01071 8.99993C4.8081 9.00282 4.61295 8.92361 4.46967 8.78033L2.21967 6.53033C1.92678 6.23744 1.92678 5.76257 2.21967 5.46967C2.51256 5.17678 2.98744 5.17678 3.28033 5.46967L4.98463 7.17397L8.70474 3.23503C8.98915 2.9339 9.46383 2.92033 9.76497 3.20474Z' />
+    </svg>`;
+
     const label = getAccessibilityLabel(accessibilityLabel, children[0]);
     const tooltipResult = getTooltip(tooltip, menuItem.state.hasTooltips, children[0]);
 
     return (
       <Slots.root {...mergedProps} accessibilityLabel={label}>
-        <Slots.checkmark accessible={false} xml={checkmarkXml} />
+        {Platform.OS === 'android' ? (
+          <Slots.checkbox onPress={mergedProps.onPress} accessible={false} focusable={false}>
+            <Slots.checkmark xml={androidCheckmarkPath} />
+          </Slots.checkbox>
+        ) : (
+          <Slots.checkmark accessible={false} xml={checkmarkXml} />
+        )}
         {(icon || menuItem.state.hasIcons) && (
           <Slots.iconPlaceholder accessible={false}>
             {icon && icon.source && <Slots.imgIcon accessible={false} {...icon} />}