asChild

packages/zeego/src/dropdown-menu/dropdown-menu.web.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { cloneElement } from 'react'
 import {
   ItemPrimitive,
   MenuContentProps,
@@ -32,17 +32,27 @@ const Root = ({ children, onOpenChange }: MenuRootProps) => {
 Root.displayName = MenuDisplayName.Root
 
 const TriggerView = forwardRef<unknown, any>((props, ref) => {
+  if (props.asChild) {
+    const { children, ...rest } = props
+    return cloneElement(children, {
+      ref,
+      ...rest,
+      onClickCapture: props.onPointerDown,
+    })
+  }
   return (
     <View ref={ref} {...props} onClickCapture={props.onPointerDown}>
       {props.children}
     </View>
   )
 })
 
-const Trigger = ({ children, style }: MenuTriggerProps) => {
+const Trigger = ({ children, style, asChild }: MenuTriggerProps) => {
   return (
     <DropdownMenu.Trigger asChild>
-      <TriggerView style={style}>{children}</TriggerView>
+      <TriggerView style={style} asChild={asChild}>
+        {children}
+      </TriggerView>
     </DropdownMenu.Trigger>
   )
 }

packages/zeego/src/menu/create-android-menu/index.android.tsx

@@ -1,4 +1,4 @@
-import React, { Children, ReactElement } from 'react'
+import React, { Children, ReactElement, cloneElement } from 'react'
 
 import { MenuView } from '@react-native-menu/menu'
 
@@ -34,7 +34,12 @@ import type {
 import { View } from 'react-native'
 
 const createAndroidMenu = (Menu: 'ContextMenu' | 'DropdownMenu') => {
-  const Trigger = create(({ children, style }: MenuTriggerProps) => {
+  const Trigger = create(({ children, style, asChild }: MenuTriggerProps) => {
+    if (asChild) {
+      return cloneElement(children, {
+        style,
+      })
+    }
     return <View style={style}>{children}</View>
   }, 'Trigger')
 

packages/zeego/src/menu/create-ios-menu/index.ios.tsx

@@ -21,7 +21,7 @@ import type {
   MenuSubContentProps,
   ContextMenuAuxliliaryProps,
 } from '../types'
-import React, { Children, ReactElement, useRef } from 'react'
+import React, { Children, ReactElement, cloneElement, useRef } from 'react'
 import {
   flattenChildren,
   pickChildren,
@@ -38,7 +38,12 @@ import { create } from '../display-names'
 import type { ImageSystemConfig } from 'react-native-ios-context-menu/src/types/ImageItemConfig'
 
 const createIosMenu = (Menu: 'ContextMenu' | 'DropdownMenu') => {
-  const Trigger = create(({ children, style }: MenuTriggerProps) => {
+  const Trigger = create(({ children, style, asChild }: MenuTriggerProps) => {
+    if (asChild) {
+      return cloneElement(children, {
+        style,
+      })
+    }
     return <View style={style}>{children}</View>
   }, 'Trigger')
 

packages/zeego/src/menu/types.ts

@@ -50,6 +50,7 @@ export type ContextMenuAuxliliaryProps = Omit<
 export type MenuTriggerProps = {
   children: React.ReactElement
   style?: ViewStyle
+  asChild?: boolean
   /**
    * Determine whether the menu should open on `press` or `longPress`. Defaults to `press` for `DropdownMenu` and `longPress` for `ContextMenu`.
    *