@tamagui/create-menu 2.0.0-rc.8 → 2.0.0

package/src/createNativeMenu/createNativeMenu.tsx

@@ -1,194 +1,260 @@
 /**
- * createNativeMenu - provides native menu implementation for React Native
+ * createNativeMenu - native menu implementation for React Native
  *
- * On Web: Returns empty stub components (withNativeMenu will use the web components instead)
- * On Native: Uses Zeego for native menus (Credit to nandorojo/Zeego)
+ * Web: returns empty stub components (withNativeMenu uses the web components instead)
+ * Native: lazily resolves Zeego at render time so importing the package doesn't warn/error
  */
 
-import { getZeego } from '@tamagui/native'
+import {
+  getZeego,
+  NativeMenuContext,
+  unstable_claimExternalPressOwnership,
+  unstable_releaseExternalPressOwnership,
+} from '@tamagui/native'
 import { isWeb, withStaticProperties, isIos } from '@tamagui/web'
 import type { FC } from 'react'
 import React from 'react'
 import type {
   ContextMenuPreviewProps,
-  MenuArrowProps,
-  MenuCheckboxItemProps,
-  MenuContentProps,
-  MenuGroupProps,
-  MenuItemIconProps,
-  MenuItemImageProps,
-  MenuItemIndicatorProps,
-  MenuItemProps,
-  MenuItemSubtitleProps,
-  MenuItemTitleProps,
-  MenuLabelProps,
-  MenuProps,
-  MenuSeparatorProps,
-  MenuSubContentProps,
-  MenuSubProps,
-  MenuSubTriggerProps,
+  NativeContextMenuAuxiliaryProps,
+  NativeMenuArrowProps,
+  NativeMenuCheckboxItemProps,
+  NativeMenuContentProps,
+  NativeMenuGroupProps,
+  NativeMenuItemIconProps,
+  NativeMenuItemImageProps,
+  NativeMenuItemIndicatorProps,
+  NativeMenuItemProps,
+  NativeMenuItemSubtitleProps,
+  NativeMenuItemTitleProps,
+  NativeMenuLabelProps,
+  NativeMenuProps,
+  NativeMenuSeparatorProps,
+  NativeMenuSubContentProps,
+  NativeMenuSubProps,
+  NativeMenuSubTriggerProps,
   MenuTriggerProps,
 } from './createNativeMenuTypes'
 
+// zeego module shape (DropdownMenu / ContextMenu both share this)
+type ZeegoMenuModule = {
+  Root: FC<Record<string, unknown>>
+  Trigger: FC<MenuTriggerProps>
+  Content: FC<NativeMenuContentProps>
+  Item: FC<NativeMenuItemProps>
+  ItemTitle: FC<NativeMenuItemTitleProps>
+  ItemSubtitle: FC<NativeMenuItemSubtitleProps>
+  ItemIcon: FC<NativeMenuItemIconProps>
+  ItemImage: FC<NativeMenuItemImageProps>
+  ItemIndicator: FC<NativeMenuItemIndicatorProps>
+  Group: FC<NativeMenuGroupProps>
+  Label: FC<NativeMenuLabelProps>
+  Separator: FC<NativeMenuSeparatorProps>
+  Sub: FC<NativeMenuSubProps>
+  SubTrigger: FC<NativeMenuSubTriggerProps>
+  SubContent: FC<NativeMenuSubContentProps>
+  CheckboxItem: FC<NativeMenuCheckboxItemProps>
+  Preview: FC<ContextMenuPreviewProps>
+  Auxiliary: FC<NativeContextMenuAuxiliaryProps>
+}
+
+// component types we recognize via displayName matching
+type MappedComponentType =
+  | 'SubContent'
+  | 'SubTrigger'
+  | 'Content'
+  | 'Sub'
+  | 'Group'
+  | 'CheckboxItem'
+
+const MAPPED_TYPES: MappedComponentType[] = [
+  'SubContent',
+  'SubTrigger',
+  'Content',
+  'Sub',
+  'Group',
+  'CheckboxItem',
+]
+
+// types whose children get recursively transformed
+const CONTAINER_TYPES: MappedComponentType[] = ['SubContent', 'Content', 'Sub', 'Group']
+
+type ComponentMap = Pick<
+  ZeegoMenuModule,
+  'SubContent' | 'Content' | 'Sub' | 'Group' | 'SubTrigger'
+>
+
+type TriggerPressBoundaryHandlers = {
+  claim(debugName?: string | null): void
+  release(debugName?: string | null): void
+}
+
 export type NativeMenuComponents = {
-  Menu: FC<MenuProps> & {
+  Menu: FC<NativeMenuProps> & {
     Trigger: FC<MenuTriggerProps>
-    Content: FC<MenuContentProps>
-    Item: FC<MenuItemProps>
-    ItemTitle: FC<MenuItemTitleProps>
-    ItemSubtitle: FC<MenuItemSubtitleProps>
-    SubTrigger: FC<MenuSubTriggerProps>
-    Group: FC<MenuGroupProps>
-    ItemIcon: FC<MenuItemIconProps>
-    Separator: FC<MenuSeparatorProps>
-    CheckboxItem: FC<MenuCheckboxItemProps>
-    ItemIndicator: FC<MenuItemIndicatorProps>
-    ItemImage: FC<MenuItemImageProps>
-    Label: FC<MenuLabelProps>
-    Arrow: FC<MenuArrowProps>
-    Sub: FC<MenuSubProps>
-    SubContent: FC<MenuSubContentProps>
+    Content: FC<NativeMenuContentProps>
+    Item: FC<NativeMenuItemProps>
+    ItemTitle: FC<NativeMenuItemTitleProps>
+    ItemSubtitle: FC<NativeMenuItemSubtitleProps>
+    SubTrigger: FC<NativeMenuSubTriggerProps>
+    Group: FC<NativeMenuGroupProps>
+    ItemIcon: FC<NativeMenuItemIconProps>
+    Separator: FC<NativeMenuSeparatorProps>
+    CheckboxItem: FC<NativeMenuCheckboxItemProps>
+    ItemIndicator: FC<NativeMenuItemIndicatorProps>
+    ItemImage: FC<NativeMenuItemImageProps>
+    Label: FC<NativeMenuLabelProps>
+    Arrow: FC<NativeMenuArrowProps>
+    Sub: FC<NativeMenuSubProps>
+    SubContent: FC<NativeMenuSubContentProps>
     Preview: FC<ContextMenuPreviewProps>
     Portal: FC<{ children: React.ReactNode }>
     RadioGroup: FC<{ children: React.ReactNode }>
     RadioItem: FC<{ children: React.ReactNode }>
-    Auxiliary: FC<any>
+    Auxiliary: FC<NativeContextMenuAuxiliaryProps>
+  }
+}
+
+// shared helpers (stateless, no need to recreate per call)
+
+function getComponentType(displayName: string): MappedComponentType | null {
+  for (const type of MAPPED_TYPES) {
+    if (displayName === type || displayName.includes(`(${type})`)) {
+      return type
+    }
+  }
+  return null
+}
+
+function isItemLike(props: Record<string, unknown>, displayName: string): boolean {
+  if (getComponentType(displayName)) return false
+  return 'onSelect' in props || 'textValue' in props
+}
+
+function isPortalLike(displayName: string): boolean {
+  return displayName === 'Portal' || displayName.includes('Portal')
+}
+
+function isTriggerLike(displayName: string): boolean {
+  return displayName === 'Trigger' || displayName.includes('(Trigger)')
+}
+
+function composeHandlers<T extends (...args: any[]) => void>(first?: T, second?: T) {
+  return (...args: Parameters<T>) => {
+    first?.(...args)
+    second?.(...args)
+  }
+}
+
+function getTriggerDebugName(
+  menuType: 'ContextMenu' | 'Menu',
+  props: Record<string, any>
+) {
+  const childProps =
+    React.isValidElement(props.children) && props.children.props
+      ? (props.children.props as Record<string, any>)
+      : null
+
+  const prefix = menuType === 'ContextMenu' ? 'ContextMenuTrigger' : 'MenuTrigger'
+  const detail =
+    childProps?.testID ??
+    childProps?.accessibilityLabel ??
+    (typeof props.textValue === 'string' ? props.textValue : null)
+
+  return [prefix, detail].filter(Boolean).join(':') || prefix
+}
+
+// stub used for web — never actually rendered, just needs to exist for withNativeMenu fallback
+const emptyStub = (() => null) as FC<any>
+
+function createWebStubs(): NativeMenuComponents {
+  return {
+    Menu: withStaticProperties(emptyStub as FC<NativeMenuProps>, {
+      Trigger: emptyStub as FC<MenuTriggerProps>,
+      Content: emptyStub as FC<NativeMenuContentProps>,
+      Item: emptyStub as FC<NativeMenuItemProps>,
+      ItemTitle: emptyStub as FC<NativeMenuItemTitleProps>,
+      ItemSubtitle: emptyStub as FC<NativeMenuItemSubtitleProps>,
+      SubTrigger: emptyStub as FC<NativeMenuSubTriggerProps>,
+      Group: emptyStub as FC<NativeMenuGroupProps>,
+      ItemIcon: emptyStub as FC<NativeMenuItemIconProps>,
+      Separator: emptyStub as FC<NativeMenuSeparatorProps>,
+      CheckboxItem: emptyStub as FC<NativeMenuCheckboxItemProps>,
+      ItemIndicator: emptyStub as FC<NativeMenuItemIndicatorProps>,
+      ItemImage: emptyStub as FC<NativeMenuItemImageProps>,
+      Label: emptyStub as FC<NativeMenuLabelProps>,
+      Arrow: emptyStub as FC<NativeMenuArrowProps>,
+      Sub: emptyStub as FC<NativeMenuSubProps>,
+      SubContent: emptyStub as FC<NativeMenuSubContentProps>,
+      Preview: emptyStub as FC<ContextMenuPreviewProps>,
+      Portal: emptyStub as FC<{ children: React.ReactNode }>,
+      RadioGroup: emptyStub as FC<{ children: React.ReactNode }>,
+      RadioItem: emptyStub as FC<{ children: React.ReactNode }>,
+      Auxiliary: emptyStub as FC<NativeContextMenuAuxiliaryProps>,
+    }),
   }
 }
 
 export const createNativeMenu = (
   MenuType: 'ContextMenu' | 'Menu'
 ): NativeMenuComponents => {
-  // On web, return empty stubs - withNativeMenu will use the web components passed to it
   if (isWeb) {
-    const Menu = {} as FC<MenuProps>
-    const Trigger = {} as FC<MenuTriggerProps>
-    const Content = {} as FC<MenuContentProps>
-    const Preview = {} as FC<ContextMenuPreviewProps>
-    const Item = {} as FC<MenuItemProps>
-    const ItemIcon = {} as FC<MenuItemIconProps>
-    const ItemImage = {} as FC<MenuItemImageProps>
-    const SubTrigger = {} as FC<MenuSubTriggerProps>
-    const ItemTitle = {} as FC<MenuItemTitleProps>
-    const ItemSubtitle = {} as FC<MenuItemSubtitleProps>
-    const Group = {} as FC<MenuGroupProps>
-    const Separator = {} as FC<MenuSeparatorProps>
-    const CheckboxItem = {} as FC<MenuCheckboxItemProps>
-    const ItemIndicator = {} as FC<MenuItemIndicatorProps>
-    const Label = {} as FC<MenuLabelProps>
-    const Arrow = {} as FC<MenuArrowProps>
-    const Sub = {} as FC<MenuSubProps>
-    const SubContent = {} as FC<MenuSubContentProps>
-    const Portal = {} as FC<{ children: React.ReactNode }>
-    const RadioGroup = {} as FC<{ children: React.ReactNode }>
-    const RadioItem = {} as FC<{ children: React.ReactNode }>
-    const Auxiliary = {} as FC<any>
-
-    return {
-      Menu: withStaticProperties(Menu, {
-        Trigger,
-        Content,
-        Item,
-        ItemTitle,
-        ItemSubtitle,
-        SubTrigger,
-        Group,
-        ItemIcon,
-        Separator,
-        CheckboxItem,
-        ItemIndicator,
-        ItemImage,
-        Label,
-        Arrow,
-        Sub,
-        SubContent,
-        Preview,
-        Portal,
-        RadioGroup,
-        RadioItem,
-        Auxiliary,
-      }),
-    }
+    return createWebStubs()
   }
 
   // ===========================================
-  // Native implementation using Zeego
+  // native implementation — lazily resolves zeego
   // ===========================================
 
-  const zeego = getZeego()
-  if (!zeego.isEnabled) {
-    console.warn(
-      `Warning: Must call import '@tamagui/native/setup-zeego' at your app entry point to use native menus`
-    )
-    return { Menu: {} as any }
-  }
-
-  const { DropdownMenu: ZeegoDropdownMenu, ContextMenu: ZeegoContextMenu } = zeego.state
-
   const isContextMenu = MenuType === 'ContextMenu'
-  const ZeegoMenu = isContextMenu ? ZeegoContextMenu : ZeegoDropdownMenu
-
-  // Map displayName patterns to Zeego components
-  const COMPONENT_MAP: Record<string, any> = {
-    SubContent: ZeegoMenu.SubContent,
-    Content: ZeegoMenu.Content,
-    Sub: ZeegoMenu.Sub,
-    Group: ZeegoMenu.Group,
-    SubTrigger: ZeegoMenu.SubTrigger,
-  }
-
-  // Components that need children transformation (containers)
-  const CONTAINER_TYPES = ['SubContent', 'Content', 'Sub', 'Group']
-
-  /**
-   * Get component type from displayName (handles styled wrappers)
-   */
-  const getComponentType = (displayName: string): string | null => {
-    // Check in specific order (SubContent before Content, SubTrigger before Trigger)
-    for (const type of [
-      'SubContent',
-      'SubTrigger',
-      'Content',
-      'Sub',
-      'Group',
-      'CheckboxItem',
-    ]) {
-      if (displayName === type || displayName.includes(`(${type})`)) {
-        return type
+  const isAndroid = !isIos && !isWeb
+
+  // cached after first successful resolve
+  let resolved: { menu: ZeegoMenuModule; componentMap: ComponentMap } | null = null
+  let warned = false
+
+  function resolve(): typeof resolved {
+    if (resolved) return resolved
+    const zeego = getZeego()
+    if (!zeego.isEnabled) {
+      if (!warned) {
+        warned = true
+        console.warn(
+          `Warning: Must call import '@tamagui/native/setup-zeego' at your app entry point to use native menus`
+        )
       }
+      return null
     }
-    return null
-  }
-
-  /**
-   * Check if component looks like a menu Item (has onSelect/textValue but isn't a special component)
-   */
-  const isItemLike = (props: Record<string, any>, displayName: string): boolean => {
-    // If it matches a known component type, it's not a generic Item
-    if (getComponentType(displayName)) {
-      return false
+    const menu = (
+      isContextMenu ? zeego.state.ContextMenu : zeego.state.DropdownMenu
+    ) as ZeegoMenuModule
+    resolved = {
+      menu,
+      componentMap: {
+        SubContent: menu.SubContent,
+        Content: menu.Content,
+        Sub: menu.Sub,
+        Group: menu.Group,
+        SubTrigger: menu.SubTrigger,
+      },
     }
-    return 'onSelect' in props || 'textValue' in props
+    return resolved
   }
 
-  /**
-   * Check if displayName matches Portal
-   */
-  const isPortal = (displayName: string): boolean => {
-    return displayName === 'Portal' || displayName.includes('Portal')
+  type RadioContext = {
+    value?: string
+    onValueChange?: (value: string) => void
   }
 
-  /**
-   * Transform children tree for Zeego compatibility:
-   * - Flatten Portal wrappers
-   * - Recurse into containers (Content, Sub, Group, SubContent)
-   * - Convert styled Items to Zeego Items
-   * - Reverse children on iOS only for DropdownMenu at Content/SubContent level
-   */
-  const transformForZeego = (
+  // transform children tree for zeego compatibility
+  function transformChildren(
+    menu: ZeegoMenuModule,
+    map: ComponentMap,
     children: React.ReactNode,
-    shouldReverseOnIos = false
-  ): React.ReactNode => {
+    shouldReverseOnIos = false,
+    triggerBoundaryHandlers?: TriggerPressBoundaryHandlers,
+    radioContext?: RadioContext
+  ): React.ReactNode {
     const result: React.ReactNode[] = []
 
     React.Children.forEach(children, (child) => {
@@ -197,49 +263,149 @@ export const createNativeMenu = (
         return
       }
 
-      const displayName = (child.type as any)?.displayName || ''
+      const displayName = (child.type as { displayName?: string })?.displayName || ''
       const props = child.props as Record<string, any>
 
-      // Flatten Portal
-      if (isPortal(displayName)) {
-        const portalChildren = transformForZeego(props.children, false)
-        React.Children.forEach(portalChildren, (c) => result.push(c))
+      // flatten portal wrappers
+      if (isPortalLike(displayName)) {
+        const inner = transformChildren(
+          menu,
+          map,
+          props.children as React.ReactNode,
+          false,
+          triggerBoundaryHandlers,
+          radioContext
+        )
+        React.Children.forEach(inner, (c) => result.push(c))
+        return
+      }
+
+      // flatten ScrollView (native passthrough — children need to be visible to zeego)
+      if (displayName.includes('ScrollView')) {
+        const inner = transformChildren(
+          menu,
+          map,
+          props.children as React.ReactNode,
+          false,
+          triggerBoundaryHandlers,
+          radioContext
+        )
+        React.Children.forEach(inner, (c) => result.push(c))
+        return
+      }
+
+      if (isTriggerLike(displayName)) {
+        const debugName = getTriggerDebugName(MenuType, props)
+        const claim = () => triggerBoundaryHandlers?.claim(debugName)
+        const release = () => triggerBoundaryHandlers?.release(debugName)
+
+        result.push(
+          React.cloneElement(child, {
+            onTouchStart: composeHandlers(claim, props.onTouchStart),
+            onTouchEnd: composeHandlers(props.onTouchEnd, release),
+            onTouchCancel: composeHandlers(props.onTouchCancel, release),
+            onResponderGrant: composeHandlers(claim, props.onResponderGrant),
+            onResponderRelease: composeHandlers(props.onResponderRelease, release),
+            onResponderTerminate: composeHandlers(props.onResponderTerminate, release),
+            onPressIn: composeHandlers(claim, props.onPressIn),
+            onPressOut: composeHandlers(props.onPressOut, release),
+          } as any)
+        )
+        return
+      }
+
+      // RadioGroup: render as a zeego Group and pipe value/onValueChange
+      // down to any RadioItem descendants via radioContext
+      if (displayName.includes('RadioGroup')) {
+        const {
+          value: rgValue,
+          onValueChange: rgOnValueChange,
+          children: rgChildren,
+          ...rest
+        } = props as Record<string, any>
+
+        result.push(
+          React.createElement(
+            menu.Group,
+            { ...rest, key: child.key } as any,
+            transformChildren(
+              menu,
+              map,
+              rgChildren as React.ReactNode,
+              false,
+              triggerBoundaryHandlers,
+              { value: rgValue, onValueChange: rgOnValueChange }
+            )
+          )
+        )
+        return
+      }
+
+      // RadioItem: zeego has no radio primitive, so emit a CheckboxItem whose
+      // 'on'/'off' state is derived from the enclosing RadioGroup's value.
+      if (displayName.includes('RadioItem') && radioContext) {
+        const {
+          value: itemValue,
+          children: rChildren,
+          ...rest
+        } = props as Record<string, any>
+
+        const cleanChildren = React.Children.map(rChildren, (c) => {
+          if (!React.isValidElement(c)) return c
+          const dn = (c.type as { displayName?: string })?.displayName || ''
+          if (dn.includes('ItemIndicator')) return null
+          return c
+        })
+
+        result.push(
+          React.createElement(
+            menu.CheckboxItem,
+            {
+              ...rest,
+              key: child.key,
+              value: itemValue === radioContext.value ? 'on' : 'off',
+              onValueChange: () => radioContext.onValueChange?.(itemValue),
+            } as any,
+            cleanChildren
+          )
+        )
         return
       }
 
-      // Handle known component types (containers, SubTrigger, CheckboxItem)
       const componentType = getComponentType(displayName)
 
-      // normalizing checked/value props
+      // normalize checkbox checked/value props
       if (componentType === 'CheckboxItem') {
-        const { checked, onCheckedChange, value, onValueChange, children, ...rest } =
-          props
+        const {
+          checked,
+          onCheckedChange,
+          value,
+          onValueChange,
+          children: cbChildren,
+          ...rest
+        } = props as Record<string, any>
 
         const finalValue = value ?? (checked ? 'on' : 'off')
         const finalOnValueChange =
           onValueChange ??
           (onCheckedChange && ((v: string) => onCheckedChange(v === 'on')))
 
-        const cleanChildren = React.Children.map(children, (child) => {
-          if (!React.isValidElement(child)) return child
-
-          const childDisplayName = (child.type as any)?.displayName || ''
-          // If it's an ItemIndicator, remove it (return null) so we don't double render the checkmark
-          if (childDisplayName.includes('ItemIndicator')) {
-            return null
-          }
-          return child
+        const cleanChildren = React.Children.map(cbChildren, (c) => {
+          if (!React.isValidElement(c)) return c
+          const dn = (c.type as { displayName?: string })?.displayName || ''
+          if (dn.includes('ItemIndicator')) return null
+          return c
         })
 
         result.push(
           React.createElement(
-            ZeegoMenu.CheckboxItem,
+            menu.CheckboxItem,
             {
               ...rest,
               key: child.key,
               value: finalValue,
               onValueChange: finalOnValueChange,
-            },
+            } as any,
             cleanChildren
           )
         )
@@ -248,41 +414,45 @@ export const createNativeMenu = (
 
       if (componentType) {
         const { children: childChildren, ...restProps } = props
-        const isContainer = CONTAINER_TYPES.includes(componentType)
-        // Only reverse children of Content and SubContent (not Group or Sub)
-        const shouldReverseChildren =
+        const isContainer = (CONTAINER_TYPES as string[]).includes(componentType)
+        const shouldReverse =
           componentType === 'Content' || componentType === 'SubContent'
         result.push(
           React.createElement(
-            COMPONENT_MAP[componentType],
-            { ...restProps, key: child.key },
+            map[componentType as keyof ComponentMap],
+            { ...restProps, key: child.key } as any,
             isContainer
-              ? transformForZeego(childChildren, shouldReverseChildren)
+              ? transformChildren(
+                  menu,
+                  map,
+                  childChildren as React.ReactNode,
+                  shouldReverse,
+                  triggerBoundaryHandlers,
+                  radioContext
+                )
               : childChildren
           )
         )
         return
       }
 
-      // Convert Item-like components to Zeego Items
+      // convert Item-like components to zeego Items
       if (isItemLike(props, displayName)) {
         const { children: itemChildren, ...itemProps } = props
         result.push(
           React.createElement(
-            ZeegoMenu.Item,
-            { ...itemProps, key: child.key },
+            menu.Item,
+            { ...itemProps, key: child.key } as any,
             itemChildren
           )
         )
         return
       }
 
-      // Pass through everything else
       result.push(child)
     })
 
-    // iOS DropdownMenu (not ContextMenu) displays menu items in reverse order
-    // Only reverse for Menu component, not ContextMenu
+    // iOS DropdownMenu displays items in reverse order
     if (isIos && shouldReverseOnIos && !isContextMenu) {
       result.reverse()
     }
@@ -290,31 +460,39 @@ export const createNativeMenu = (
     return result
   }
 
-  // ===========================================
-  // Component definitions (typed wrappers around Zeego)
-  // ===========================================
+  // lazy wrapper — resolves the zeego component on first render
+  function lazyZeego<P extends Record<string, any>>(
+    name: keyof ZeegoMenuModule,
+    displayName?: string
+  ): FC<P> {
+    const Comp: FC<P> = (props) => {
+      const z = resolve()
+      if (!z) return null
+      return React.createElement(z.menu[name] as FC<any>, props)
+    }
+    Comp.displayName = displayName || name
+    return Comp
+  }
+
+  const Trigger = lazyZeego<MenuTriggerProps>('Trigger')
+  const Content = lazyZeego<NativeMenuContentProps>('Content')
+  const Item = lazyZeego<NativeMenuItemProps>('Item')
+  const ItemTitle = lazyZeego<NativeMenuItemTitleProps>('ItemTitle')
+  const ItemSubtitle = lazyZeego<NativeMenuItemSubtitleProps>('ItemSubtitle')
+  const ItemIcon = lazyZeego<NativeMenuItemIconProps>('ItemIcon')
+  const ItemImage = lazyZeego<NativeMenuItemImageProps>('ItemImage')
+  const ItemIndicator = lazyZeego<NativeMenuItemIndicatorProps>('ItemIndicator')
+  const Group = lazyZeego<NativeMenuGroupProps>('Group')
+  const Label = lazyZeego<NativeMenuLabelProps>('Label')
+  const Separator = lazyZeego<NativeMenuSeparatorProps>('Separator')
+  const Sub = lazyZeego<NativeMenuSubProps>('Sub')
+  const SubTrigger = lazyZeego<NativeMenuSubTriggerProps>('SubTrigger')
+  const SubContent = lazyZeego<NativeMenuSubContentProps>('SubContent')
 
-  // Direct Zeego pass-throughs with proper types
-  const Trigger: FC<MenuTriggerProps> = ZeegoMenu.Trigger
-  const Content: FC<MenuContentProps> = ZeegoMenu.Content
-  const Item: FC<MenuItemProps> = ZeegoMenu.Item
-  const ItemTitle: FC<MenuItemTitleProps> = ZeegoMenu.ItemTitle
-  const ItemSubtitle: FC<MenuItemSubtitleProps> = ZeegoMenu.ItemSubtitle
-  const ItemIcon: FC<MenuItemIconProps> = ZeegoMenu.ItemIcon
-  const ItemImage: FC<MenuItemImageProps> = ZeegoMenu.ItemImage
-  const ItemIndicator: FC<MenuItemIndicatorProps> = ZeegoMenu.ItemIndicator
-  const Group: FC<MenuGroupProps> = ZeegoMenu.Group
-  const Label: FC<MenuLabelProps> = ZeegoMenu.Label
-  const Separator: FC<MenuSeparatorProps> = ZeegoMenu.Separator
-  const Sub: FC<MenuSubProps> = ZeegoMenu.Sub
-  const SubTrigger: FC<MenuSubTriggerProps> = ZeegoMenu.SubTrigger
-  const SubContent: FC<MenuSubContentProps> = ZeegoMenu.SubContent
-
-  // Custom components
   const Portal: FC<{ children: React.ReactNode }> = ({ children }) => <>{children}</>
   Portal.displayName = 'Portal'
 
-  const Arrow: FC<MenuArrowProps> = () => null
+  const Arrow: FC<NativeMenuArrowProps> = () => null
   Arrow.displayName = 'Arrow'
 
   const RadioGroup: FC<{ children: React.ReactNode }> = ({ children }) => <>{children}</>
@@ -322,36 +500,86 @@ export const createNativeMenu = (
 
   const RadioItem: FC<{ children: React.ReactNode }> = ({ children }) => <>{children}</>
   RadioItem.displayName = `${MenuType}RadioItem`
-  // CheckboxItem wrapper to normalize checked/value props
-  const CheckboxItem: FC<MenuCheckboxItemProps> = (props) => null
+
+  const CheckboxItem: FC<NativeMenuCheckboxItemProps> = () => null
   CheckboxItem.displayName = 'CheckboxItem'
 
-  // Context menu specific
   const Preview: FC<ContextMenuPreviewProps> = isContextMenu
-    ? ZeegoContextMenu.Preview
+    ? lazyZeego<ContextMenuPreviewProps>('Preview', `${MenuType}Preview`)
     : () => null
   Preview.displayName = `${MenuType}Preview`
 
-  const Auxiliary: FC<ContextMenuPreviewProps> = isContextMenu
-    ? ZeegoContextMenu.Auxiliary
+  const Auxiliary: FC<NativeContextMenuAuxiliaryProps> = isContextMenu
+    ? lazyZeego<NativeContextMenuAuxiliaryProps>('Auxiliary', `${MenuType}Auxiliary`)
     : () => null
   Auxiliary.displayName = `${MenuType}Auxiliary`
 
-  // Main Menu component
-  const Menu: FC<MenuProps> = ({ children, onOpenChange, onOpenWillChange }) => {
-    const rootProps: Record<string, unknown> = { onOpenChange }
+  // on Android, provide NativeMenuContext so components use Gesture.Manual()
+  // instead of Gesture.Tap() (which sends ACTION_CANCEL to MenuView)
+  const Menu: FC<NativeMenuProps> = ({ children, onOpenChange, onOpenWillChange }) => {
+    const triggerOwnerRef = React.useRef<object | null>(null)
+    const claimTriggerBoundary = React.useCallback((debugName?: string | null) => {
+      if (triggerOwnerRef.current) {
+        unstable_releaseExternalPressOwnership(triggerOwnerRef.current, debugName)
+      }
+      triggerOwnerRef.current = unstable_claimExternalPressOwnership(debugName)
+    }, [])
+
+    const releaseTriggerBoundary = React.useCallback((debugName?: string | null) => {
+      if (!triggerOwnerRef.current) return
+      unstable_releaseExternalPressOwnership(triggerOwnerRef.current, debugName)
+      triggerOwnerRef.current = null
+    }, [])
+
+    React.useEffect(() => releaseTriggerBoundary, [releaseTriggerBoundary])
+
+    const z = resolve()
+    if (!z) return null
+
+    const handleOpenChange = React.useCallback(
+      (isOpen: boolean) => {
+        if (!isOpen) {
+          releaseTriggerBoundary()
+        }
+        onOpenChange?.(isOpen)
+      },
+      [onOpenChange, releaseTriggerBoundary]
+    )
+
+    const handleOpenWillChange = React.useCallback(
+      (willOpen: boolean) => {
+        if (!willOpen) {
+          releaseTriggerBoundary()
+        }
+        onOpenWillChange?.(willOpen)
+      },
+      [onOpenWillChange, releaseTriggerBoundary]
+    )
+
+    const rootProps: Record<string, unknown> = { onOpenChange: handleOpenChange }
     if (isContextMenu && onOpenWillChange) {
-      rootProps.onOpenWillChange = onOpenWillChange
+      rootProps.onOpenWillChange = handleOpenWillChange
+    }
+
+    const content = (
+      <z.menu.Root {...rootProps}>
+        {transformChildren(z.menu, z.componentMap, children, false, {
+          claim: claimTriggerBoundary,
+          release: releaseTriggerBoundary,
+        })}
+      </z.menu.Root>
+    )
+
+    if (isAndroid) {
+      return (
+        <NativeMenuContext.Provider value={true}>{content}</NativeMenuContext.Provider>
+      )
     }
 
-    return <ZeegoMenu.Root {...rootProps}>{transformForZeego(children)}</ZeegoMenu.Root>
+    return content
   }
   Menu.displayName = MenuType
 
-  // ===========================================
-  // Export
-  // ===========================================
-
   return {
     Menu: withStaticProperties(Menu, {
       Trigger,