@tamagui/native 2.6.3 → 2.7.0

package/src/expoUIMenuAdapter.tsx

@@ -0,0 +1,320 @@
+import type { ComponentType, ReactElement, ReactNode } from 'react'
+import React from 'react'
+
+import type { NativeMenuAdapter, NativeMenuModule } from './nativeMenuState'
+
+type ExpoMenuAction = {
+  id: string
+  title: string
+  image?: unknown
+  state?: 'on' | 'off'
+  attributes?: {
+    destructive?: boolean
+    disabled?: boolean
+    hidden?: boolean
+  }
+  subactions?: ExpoMenuAction[]
+  displayInline?: boolean
+}
+
+type ExpoMenuViewProps = {
+  actions: ExpoMenuAction[]
+  title?: string
+  shouldOpenOnLongPress?: boolean
+  onPressAction?: (event: { nativeEvent: { event: string } }) => void
+  onOpenMenu?: () => void
+  onCloseMenu?: () => void
+  children?: ReactNode
+}
+
+export type ExpoUIMenuAdapterOptions = {
+  MenuView: ComponentType<any>
+}
+
+type MarkerProps = {
+  children?: ReactNode
+  [key: string]: unknown
+}
+
+function marker(name: string): ComponentType<MarkerProps> {
+  const Marker = () => null
+  Marker.displayName = `ExpoUI${name}`
+  return Marker
+}
+
+function elementOfType(
+  children: ReactNode,
+  type: ComponentType<MarkerProps>
+): ReactElement<MarkerProps> | null {
+  for (const child of React.Children.toArray(children)) {
+    if (React.isValidElement<MarkerProps>(child) && child.type === type) {
+      return child
+    }
+  }
+  return null
+}
+
+function textFromNode(node: ReactNode): string {
+  if (typeof node === 'string' || typeof node === 'number') return String(node)
+  if (!React.isValidElement<MarkerProps>(node)) return ''
+  return React.Children.toArray(node.props.children).map(textFromNode).join('')
+}
+
+export function createExpoUIMenuAdapter({
+  MenuView,
+}: ExpoUIMenuAdapterOptions): NativeMenuAdapter {
+  const NativeMenuView: ComponentType<ExpoMenuViewProps> = MenuView
+
+  function createModule(isContextMenu: boolean): NativeMenuModule {
+    const Trigger = marker('Trigger')
+    const Content = marker('Content')
+    const Item = marker('Item')
+    const ItemTitle = marker('ItemTitle')
+    const ItemSubtitle = marker('ItemSubtitle')
+    const ItemIcon = marker('ItemIcon')
+    const ItemImage = marker('ItemImage')
+    const ItemIndicator = marker('ItemIndicator')
+    const Group = marker('Group')
+    const Label = marker('Label')
+    const Separator = marker('Separator')
+    const Sub = marker('Sub')
+    const SubTrigger = marker('SubTrigger')
+    const SubContent = marker('SubContent')
+    const CheckboxItem = marker('CheckboxItem')
+    const Preview = marker('Preview')
+    const Auxiliary = marker('Auxiliary')
+
+    function Root({
+      children,
+      onOpenChange,
+      onOpenWillChange,
+    }: {
+      children?: ReactNode
+      onOpenChange?: (open: boolean) => void
+      onOpenWillChange?: (open: boolean) => void
+    }) {
+      const trigger = elementOfType(children, Trigger)
+      const content = elementOfType(children, Content)
+      const preview = elementOfType(children, Preview)
+      const auxiliary = elementOfType(children, Auxiliary)
+
+      if (preview || auxiliary) {
+        throw new Error(
+          '@expo/ui/community/menu does not support Tamagui context-menu previews or auxiliary views'
+        )
+      }
+      if (!trigger || !content) {
+        throw new Error('Tamagui native menus require one Trigger and one Content')
+      }
+
+      let nextId = 0
+      const handlers = new Map<string, () => void>()
+
+      function actionId(element: ReactElement<MarkerProps>): string {
+        return element.key == null
+          ? `tamagui-menu-${nextId++}`
+          : String(element.key).replace(/^\.\$/, '')
+      }
+
+      function itemTitle(element: ReactElement<MarkerProps>): string {
+        if (typeof element.props.textValue === 'string') return element.props.textValue
+        const title = elementOfType(element.props.children, ItemTitle)
+        return title ? textFromNode(title.props.children) : ''
+      }
+
+      function actionImage(element: ReactElement<MarkerProps>): unknown {
+        const image = elementOfType(element.props.children, ItemImage)
+        if (image?.props.source) return image.props.source
+        const icon = elementOfType(element.props.children, ItemIcon)
+        if (!icon) return undefined
+        const ios = icon.props.ios
+        if (
+          typeof ios === 'object' &&
+          ios &&
+          'name' in ios &&
+          typeof ios.name === 'string'
+        ) {
+          return ios.name
+        }
+        return typeof icon.props.iosIconName === 'string'
+          ? icon.props.iosIconName
+          : undefined
+      }
+
+      function attributes(
+        element: ReactElement<MarkerProps>
+      ): ExpoMenuAction['attributes'] {
+        const destructive = element.props.destructive === true
+        const disabled = element.props.disabled === true
+        const hidden = element.props.hidden === true
+        return destructive || disabled || hidden
+          ? { destructive, disabled, hidden }
+          : undefined
+      }
+
+      function actionsFrom(childrenToParse: ReactNode): ExpoMenuAction[] {
+        const actions: ExpoMenuAction[] = []
+        let section: ExpoMenuAction[] | null = null
+
+        function append(action: ExpoMenuAction) {
+          if (section) {
+            section.push(action)
+          } else {
+            actions.push(action)
+          }
+        }
+
+        function flushSection() {
+          if (!section?.length) {
+            section = []
+            return
+          }
+          actions.push({
+            id: `tamagui-menu-section-${nextId++}`,
+            title: '',
+            subactions: section,
+            displayInline: true,
+          })
+          section = []
+        }
+
+        for (const child of React.Children.toArray(childrenToParse)) {
+          if (!React.isValidElement<MarkerProps>(child)) continue
+
+          if (child.type === Separator) {
+            if (!section) section = actions.splice(0)
+            flushSection()
+            continue
+          }
+
+          if (child.type === Group) {
+            const label = elementOfType(child.props.children, Label)
+            append({
+              id: actionId(child),
+              title: label ? textFromNode(label.props.children) : '',
+              subactions: actionsFrom(child.props.children),
+              displayInline: true,
+            })
+            continue
+          }
+
+          if (child.type === Sub) {
+            const subTrigger = elementOfType(child.props.children, SubTrigger)
+            const subContent = elementOfType(child.props.children, SubContent)
+            if (!subTrigger || !subContent) {
+              throw new Error(
+                'Tamagui native submenus require one SubTrigger and SubContent'
+              )
+            }
+            append({
+              id: actionId(child),
+              title: itemTitle(subTrigger),
+              image: actionImage(subTrigger),
+              attributes: attributes(subTrigger),
+              subactions: actionsFrom(subContent.props.children),
+            })
+            continue
+          }
+
+          if (child.type !== Item && child.type !== CheckboxItem) continue
+
+          if (elementOfType(child.props.children, ItemSubtitle)) {
+            throw new Error(
+              '@expo/ui/community/menu does not support menu item subtitles'
+            )
+          }
+
+          const id = actionId(child)
+          if (child.type === CheckboxItem) {
+            const current =
+              child.props.value === true ||
+              child.props.value === 'on' ||
+              child.props.checked === true
+            const onValueChange = child.props.onValueChange
+            const onCheckedChange = child.props.onCheckedChange
+            handlers.set(id, () => {
+              if (typeof onValueChange === 'function') {
+                onValueChange(current ? 'off' : 'on', current ? 'on' : 'off')
+              } else if (typeof onCheckedChange === 'function') {
+                onCheckedChange(!current)
+              }
+            })
+            append({
+              id,
+              title: itemTitle(child),
+              image: actionImage(child),
+              state: current ? 'on' : 'off',
+              attributes: attributes(child),
+            })
+            continue
+          }
+
+          const onSelect = child.props.onSelect
+          if (typeof onSelect === 'function') {
+            handlers.set(id, () => onSelect())
+          }
+          append({
+            id,
+            title: itemTitle(child),
+            image: actionImage(child),
+            attributes: attributes(child),
+          })
+        }
+
+        if (section) flushSection()
+        return actions
+      }
+
+      const label = elementOfType(content.props.children, Label)
+      const triggerAction = trigger.props.action
+
+      return (
+        <NativeMenuView
+          actions={actionsFrom(content.props.children)}
+          title={label ? textFromNode(label.props.children) : undefined}
+          shouldOpenOnLongPress={
+            triggerAction === 'longPress' || (triggerAction !== 'press' && isContextMenu)
+          }
+          onPressAction={(event) => handlers.get(event.nativeEvent.event)?.()}
+          onOpenMenu={() => {
+            onOpenWillChange?.(true)
+            onOpenChange?.(true)
+          }}
+          onCloseMenu={() => {
+            onOpenWillChange?.(false)
+            onOpenChange?.(false)
+          }}
+        >
+          {trigger.props.children}
+        </NativeMenuView>
+      )
+    }
+
+    return {
+      Root,
+      Trigger,
+      Content,
+      Item,
+      ItemTitle,
+      ItemSubtitle,
+      ItemIcon,
+      ItemImage,
+      ItemIndicator,
+      Group,
+      Label,
+      Separator,
+      Sub,
+      SubTrigger,
+      SubContent,
+      CheckboxItem,
+      Preview,
+      Auxiliary,
+    }
+  }
+
+  return {
+    name: 'expo-ui',
+    Menu: createModule(false),
+    ContextMenu: createModule(true),
+  }
+}

package/src/index.ts

@@ -29,12 +29,12 @@ export type {
   SafeAreaFrame,
   SafeAreaMetrics,
   LinearGradientState,
-  ZeegoState,
   BurntState,
   NativePortalProps,
   NativePortalHostProps,
   NativePortalProviderProps,
 } from './types'
+export type { NativeMenuAdapter, NativeMenuModule } from './nativeMenuState'
 
 // portal
 export { getPortal } from './portalState'
@@ -76,9 +76,10 @@ export {
 } from './keyboardControllerState'
 export type { KeyboardControllerState } from './keyboardControllerState'
 
-// zeego (native menus)
-export { getZeego } from './zeegoState'
-export type { ZeegoAccessor } from './zeegoState'
+// native menus
+export { getNativeMenuAdapter, registerNativeMenuAdapter } from './nativeMenuState'
+export { createExpoUIMenuAdapter } from './expoUIMenuAdapter'
+export type { ExpoUIMenuAdapterOptions } from './expoUIMenuAdapter'
 export { NativeMenuContext } from './nativeMenuContext'
 
 // burnt (native toasts)

package/src/nativeMenuState.ts

@@ -0,0 +1,63 @@
+import type { ComponentType } from 'react'
+
+import { createGlobalState } from './globalState'
+
+export type NativeMenuModule = {
+  Root: ComponentType<any>
+  Trigger: ComponentType<any>
+  Content: ComponentType<any>
+  Item: ComponentType<any>
+  ItemTitle: ComponentType<any>
+  ItemSubtitle: ComponentType<any>
+  ItemIcon: ComponentType<any>
+  ItemImage: ComponentType<any>
+  ItemIndicator: ComponentType<any>
+  Group: ComponentType<any>
+  Label: ComponentType<any>
+  Separator: ComponentType<any>
+  Sub: ComponentType<any>
+  SubTrigger: ComponentType<any>
+  SubContent: ComponentType<any>
+  CheckboxItem: ComponentType<any>
+  Preview?: ComponentType<any>
+  Auxiliary?: ComponentType<any>
+}
+
+/**
+ * A native implementation for Tamagui Menu and ContextMenu compound components.
+ * Register one adapter before the first native menu renders.
+ */
+export type NativeMenuAdapter = {
+  name: string
+  Menu: NativeMenuModule
+  ContextMenu: NativeMenuModule
+}
+
+type NativeMenuState = {
+  enabled: boolean
+  adapter: NativeMenuAdapter | null
+}
+
+const state = createGlobalState<NativeMenuState>('native-menu-adapter', {
+  enabled: false,
+  adapter: null,
+})
+
+/**
+ * Registers the process-wide native menu implementation. Re-registering the same
+ * named adapter supports fast refresh; registering a different adapter throws.
+ */
+export function registerNativeMenuAdapter(adapter: NativeMenuAdapter): void {
+  const current = state.get().adapter
+  if (current && current.name !== adapter.name) {
+    throw new Error(
+      `A native menu adapter named "${current.name}" is already registered. ` +
+        `Register exactly one adapter before rendering Tamagui menus.`
+    )
+  }
+  state.set({ enabled: true, adapter })
+}
+
+export function getNativeMenuAdapter(): NativeMenuAdapter | null {
+  return state.get().adapter
+}

package/src/setup-expo-ui-menu.ts

@@ -0,0 +1,25 @@
+/**
+ * Setup Expo UI for Tamagui native Menu and ContextMenu components.
+ *
+ * Import this module once at the top of the app entry point after installing
+ * `@expo/ui`.
+ */
+
+import { createExpoUIMenuAdapter } from './expoUIMenuAdapter'
+import { registerNativeMenuAdapter } from './nativeMenuState'
+
+function setup(): void {
+  let MenuView
+  try {
+    MenuView = require('@expo/ui/community/menu').MenuView
+  } catch (error) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('Error setting up Expo UI native menus', error)
+    }
+    return
+  }
+
+  registerNativeMenuAdapter(createExpoUIMenuAdapter({ MenuView }))
+}
+
+setup()

package/src/setup-zeego.ts

@@ -12,30 +12,26 @@
  * Menu and ContextMenu native mode.
  */
 
-import { getZeego } from './zeegoState'
+import { registerNativeMenuAdapter } from './nativeMenuState'
 
 function setup(): void {
-  const g = globalThis as any
-  if (g.__tamagui_native_zeego_setup) return
-  g.__tamagui_native_zeego_setup = true
-
+  let Menu
+  let ContextMenu
   try {
-    const DropdownMenu = require('zeego/dropdown-menu')
-    const ContextMenu = require('zeego/context-menu')
-
-    if (DropdownMenu && ContextMenu) {
-      getZeego().set({
-        enabled: true,
-        DropdownMenu,
-        ContextMenu,
-      })
-    }
+    Menu = require('zeego/dropdown-menu')
+    ContextMenu = require('zeego/context-menu')
   } catch (err) {
     if (process.env.NODE_ENV === 'development') {
       console.warn(`Error setting up Zeego`, err)
     }
-    // zeego not installed
+    return
   }
+
+  registerNativeMenuAdapter({
+    name: 'zeego',
+    Menu,
+    ContextMenu,
+  })
 }
 
 // run setup immediately on import

package/src/types.ts

@@ -68,12 +68,6 @@ export interface LinearGradientState {
   Component: any
 }
 
-export interface ZeegoState {
-  enabled: boolean
-  DropdownMenu: any
-  ContextMenu: any
-}
-
 export interface BurntState {
   enabled: boolean
   toast: ((options: any) => void) | null

package/types/expoUIMenuAdapter.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from "react";
+import type { NativeMenuAdapter } from "./nativeMenuState";
+export type ExpoUIMenuAdapterOptions = {
+	MenuView: ComponentType<any>;
+};
+export declare function createExpoUIMenuAdapter({ MenuView }: ExpoUIMenuAdapterOptions): NativeMenuAdapter;
+
+//# sourceMappingURL=expoUIMenuAdapter.d.ts.map

package/types/expoUIMenuAdapter.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAAA,cAAc,qBAA8C;AAG5D,cAAc,yBAA2C;AA0BzD,YAAY,2BAA2B;CACrC,UAAU;;AAgCZ,OAAO,iBAAS,wBAAwB,EACtC,YACC,2BAA2B",
+  "names": [],
+  "sources": [
+    "src/expoUIMenuAdapter.tsx"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "import type { ComponentType, ReactElement, ReactNode } from 'react'\nimport React from 'react'\n\nimport type { NativeMenuAdapter, NativeMenuModule } from './nativeMenuState'\n\ntype ExpoMenuAction = {\n  id: string\n  title: string\n  image?: unknown\n  state?: 'on' | 'off'\n  attributes?: {\n    destructive?: boolean\n    disabled?: boolean\n    hidden?: boolean\n  }\n  subactions?: ExpoMenuAction[]\n  displayInline?: boolean\n}\n\ntype ExpoMenuViewProps = {\n  actions: ExpoMenuAction[]\n  title?: string\n  shouldOpenOnLongPress?: boolean\n  onPressAction?: (event: { nativeEvent: { event: string } }) => void\n  onOpenMenu?: () => void\n  onCloseMenu?: () => void\n  children?: ReactNode\n}\n\nexport type ExpoUIMenuAdapterOptions = {\n  MenuView: ComponentType<any>\n}\n\ntype MarkerProps = {\n  children?: ReactNode\n  [key: string]: unknown\n}\n\nfunction marker(name: string): ComponentType<MarkerProps> {\n  const Marker = () => null\n  Marker.displayName = `ExpoUI${name}`\n  return Marker\n}\n\nfunction elementOfType(\n  children: ReactNode,\n  type: ComponentType<MarkerProps>\n): ReactElement<MarkerProps> | null {\n  for (const child of React.Children.toArray(children)) {\n    if (React.isValidElement<MarkerProps>(child) && child.type === type) {\n      return child\n    }\n  }\n  return null\n}\n\nfunction textFromNode(node: ReactNode): string {\n  if (typeof node === 'string' || typeof node === 'number') return String(node)\n  if (!React.isValidElement<MarkerProps>(node)) return ''\n  return React.Children.toArray(node.props.children).map(textFromNode).join('')\n}\n\nexport function createExpoUIMenuAdapter({\n  MenuView,\n}: ExpoUIMenuAdapterOptions): NativeMenuAdapter {\n  const NativeMenuView: ComponentType<ExpoMenuViewProps> = MenuView\n\n  function createModule(isContextMenu: boolean): NativeMenuModule {\n    const Trigger = marker('Trigger')\n    const Content = marker('Content')\n    const Item = marker('Item')\n    const ItemTitle = marker('ItemTitle')\n    const ItemSubtitle = marker('ItemSubtitle')\n    const ItemIcon = marker('ItemIcon')\n    const ItemImage = marker('ItemImage')\n    const ItemIndicator = marker('ItemIndicator')\n    const Group = marker('Group')\n    const Label = marker('Label')\n    const Separator = marker('Separator')\n    const Sub = marker('Sub')\n    const SubTrigger = marker('SubTrigger')\n    const SubContent = marker('SubContent')\n    const CheckboxItem = marker('CheckboxItem')\n    const Preview = marker('Preview')\n    const Auxiliary = marker('Auxiliary')\n\n    function Root({\n      children,\n      onOpenChange,\n      onOpenWillChange,\n    }: {\n      children?: ReactNode\n      onOpenChange?: (open: boolean) => void\n      onOpenWillChange?: (open: boolean) => void\n    }) {\n      const trigger = elementOfType(children, Trigger)\n      const content = elementOfType(children, Content)\n      const preview = elementOfType(children, Preview)\n      const auxiliary = elementOfType(children, Auxiliary)\n\n      if (preview || auxiliary) {\n        throw new Error(\n          '@expo/ui/community/menu does not support Tamagui context-menu previews or auxiliary views'\n        )\n      }\n      if (!trigger || !content) {\n        throw new Error('Tamagui native menus require one Trigger and one Content')\n      }\n\n      let nextId = 0\n      const handlers = new Map<string, () => void>()\n\n      function actionId(element: ReactElement<MarkerProps>): string {\n        return element.key == null\n          ? `tamagui-menu-${nextId++}`\n          : String(element.key).replace(/^\\.\\$/, '')\n      }\n\n      function itemTitle(element: ReactElement<MarkerProps>): string {\n        if (typeof element.props.textValue === 'string') return element.props.textValue\n        const title = elementOfType(element.props.children, ItemTitle)\n        return title ? textFromNode(title.props.children) : ''\n      }\n\n      function actionImage(element: ReactElement<MarkerProps>): unknown {\n        const image = elementOfType(element.props.children, ItemImage)\n        if (image?.props.source) return image.props.source\n        const icon = elementOfType(element.props.children, ItemIcon)\n        if (!icon) return undefined\n        const ios = icon.props.ios\n        if (\n          typeof ios === 'object' &&\n          ios &&\n          'name' in ios &&\n          typeof ios.name === 'string'\n        ) {\n          return ios.name\n        }\n        return typeof icon.props.iosIconName === 'string'\n          ? icon.props.iosIconName\n          : undefined\n      }\n\n      function attributes(\n        element: ReactElement<MarkerProps>\n      ): ExpoMenuAction['attributes'] {\n        const destructive = element.props.destructive === true\n        const disabled = element.props.disabled === true\n        const hidden = element.props.hidden === true\n        return destructive || disabled || hidden\n          ? { destructive, disabled, hidden }\n          : undefined\n      }\n\n      function actionsFrom(childrenToParse: ReactNode): ExpoMenuAction[] {\n        const actions: ExpoMenuAction[] = []\n        let section: ExpoMenuAction[] | null = null\n\n        function append(action: ExpoMenuAction) {\n          if (section) {\n            section.push(action)\n          } else {\n            actions.push(action)\n          }\n        }\n\n        function flushSection() {\n          if (!section?.length) {\n            section = []\n            return\n          }\n          actions.push({\n            id: `tamagui-menu-section-${nextId++}`,\n            title: '',\n            subactions: section,\n            displayInline: true,\n          })\n          section = []\n        }\n\n        for (const child of React.Children.toArray(childrenToParse)) {\n          if (!React.isValidElement<MarkerProps>(child)) continue\n\n          if (child.type === Separator) {\n            if (!section) section = actions.splice(0)\n            flushSection()\n            continue\n          }\n\n          if (child.type === Group) {\n            const label = elementOfType(child.props.children, Label)\n            append({\n              id: actionId(child),\n              title: label ? textFromNode(label.props.children) : '',\n              subactions: actionsFrom(child.props.children),\n              displayInline: true,\n            })\n            continue\n          }\n\n          if (child.type === Sub) {\n            const subTrigger = elementOfType(child.props.children, SubTrigger)\n            const subContent = elementOfType(child.props.children, SubContent)\n            if (!subTrigger || !subContent) {\n              throw new Error(\n                'Tamagui native submenus require one SubTrigger and SubContent'\n              )\n            }\n            append({\n              id: actionId(child),\n              title: itemTitle(subTrigger),\n              image: actionImage(subTrigger),\n              attributes: attributes(subTrigger),\n              subactions: actionsFrom(subContent.props.children),\n            })\n            continue\n          }\n\n          if (child.type !== Item && child.type !== CheckboxItem) continue\n\n          if (elementOfType(child.props.children, ItemSubtitle)) {\n            throw new Error(\n              '@expo/ui/community/menu does not support menu item subtitles'\n            )\n          }\n\n          const id = actionId(child)\n          if (child.type === CheckboxItem) {\n            const current =\n              child.props.value === true ||\n              child.props.value === 'on' ||\n              child.props.checked === true\n            const onValueChange = child.props.onValueChange\n            const onCheckedChange = child.props.onCheckedChange\n            handlers.set(id, () => {\n              if (typeof onValueChange === 'function') {\n                onValueChange(current ? 'off' : 'on', current ? 'on' : 'off')\n              } else if (typeof onCheckedChange === 'function') {\n                onCheckedChange(!current)\n              }\n            })\n            append({\n              id,\n              title: itemTitle(child),\n              image: actionImage(child),\n              state: current ? 'on' : 'off',\n              attributes: attributes(child),\n            })\n            continue\n          }\n\n          const onSelect = child.props.onSelect\n          if (typeof onSelect === 'function') {\n            handlers.set(id, () => onSelect())\n          }\n          append({\n            id,\n            title: itemTitle(child),\n            image: actionImage(child),\n            attributes: attributes(child),\n          })\n        }\n\n        if (section) flushSection()\n        return actions\n      }\n\n      const label = elementOfType(content.props.children, Label)\n      const triggerAction = trigger.props.action\n\n      return (\n        <NativeMenuView\n          actions={actionsFrom(content.props.children)}\n          title={label ? textFromNode(label.props.children) : undefined}\n          shouldOpenOnLongPress={\n            triggerAction === 'longPress' || (triggerAction !== 'press' && isContextMenu)\n          }\n          onPressAction={(event) => handlers.get(event.nativeEvent.event)?.()}\n          onOpenMenu={() => {\n            onOpenWillChange?.(true)\n            onOpenChange?.(true)\n          }}\n          onCloseMenu={() => {\n            onOpenWillChange?.(false)\n            onOpenChange?.(false)\n          }}\n        >\n          {trigger.props.children}\n        </NativeMenuView>\n      )\n    }\n\n    return {\n      Root,\n      Trigger,\n      Content,\n      Item,\n      ItemTitle,\n      ItemSubtitle,\n      ItemIcon,\n      ItemImage,\n      ItemIndicator,\n      Group,\n      Label,\n      Separator,\n      Sub,\n      SubTrigger,\n      SubContent,\n      CheckboxItem,\n      Preview,\n      Auxiliary,\n    }\n  }\n\n  return {\n    name: 'expo-ui',\n    Menu: createModule(false),\n    ContextMenu: createModule(true),\n  }\n}\n"
+  ]
+}

package/types/index.d.ts

@@ -18,7 +18,8 @@
 * // LinearGradient will use expo-linear-gradient when installed
 * ```
 */
-export type { NativePortalState, GestureState, WorkletsState, SafeAreaState, SafeAreaInsets, SafeAreaFrame, SafeAreaMetrics, LinearGradientState, ZeegoState, BurntState, NativePortalProps, NativePortalHostProps, NativePortalProviderProps } from "./types";
+export type { NativePortalState, GestureState, WorkletsState, SafeAreaState, SafeAreaInsets, SafeAreaFrame, SafeAreaMetrics, LinearGradientState, BurntState, NativePortalProps, NativePortalHostProps, NativePortalProviderProps } from "./types";
+export type { NativeMenuAdapter, NativeMenuModule } from "./nativeMenuState";
 export { getPortal } from "./portalState";
 export type { PortalAccessor } from "./portalState";
 export { getGestureHandler } from "./gestureState";
@@ -33,8 +34,9 @@ export { getLinearGradient } from "./linearGradientState";
 export type { LinearGradientAccessor } from "./linearGradientState";
 export { isKeyboardControllerEnabled, getKeyboardControllerState, setKeyboardControllerState } from "./keyboardControllerState";
 export type { KeyboardControllerState } from "./keyboardControllerState";
-export { getZeego } from "./zeegoState";
-export type { ZeegoAccessor } from "./zeegoState";
+export { getNativeMenuAdapter, registerNativeMenuAdapter } from "./nativeMenuState";
+export { createExpoUIMenuAdapter } from "./expoUIMenuAdapter";
+export type { ExpoUIMenuAdapterOptions } from "./expoUIMenuAdapter";
 export { NativeMenuContext } from "./nativeMenuContext";
 export { getBurnt } from "./burntState";
 export type { BurntAccessor } from "./burntState";

package/types/index.d.ts.map

@@ -1,11 +1,11 @@
 {
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAsBA,cACE,mBACA,cACA,eACA,eACA,gBACA,eACA,iBACA,qBACA,YACA,YACA,mBACA,uBACA,iCACK;AAGP,SAAS,iBAAiB;AAC1B,cAAc,sBAAsB;AAGpC,SAAS,yBAAyB;AAClC,SACE,+BAA+B,sCAC/B,6BAA6B,oCAC7B,iCAAiC,8CAC5B;AACP,cACE,6BACA,wBACA,0BACK;AAGP,cAAc,4BAA4B;AAG1C,SAAS,mBAAmB;AAC5B,cAAc,wBAAwB;AAGtC,SAAS,mBAAmB;AAC5B,cAAc,wBAAwB;AAGtC,SAAS,yBAAyB;AAClC,cAAc,8BAA8B;AAG5C,SACE,6BACA,4BACA,kCACK;AACP,cAAc,+BAA+B;AAG7C,SAAS,gBAAgB;AACzB,cAAc,qBAAqB;AACnC,SAAS,yBAAyB;AAGlC,SAAS,gBAAgB;AACzB,cAAc,qBAAqB;AAGnC,SAAS,cAAc,kBAAkB,4BAA4B",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAsBA,cACE,mBACA,cACA,eACA,eACA,gBACA,eACA,iBACA,qBACA,YACA,mBACA,uBACA,iCACK;AACP,cAAc,mBAAmB,wBAAwB;AAGzD,SAAS,iBAAiB;AAC1B,cAAc,sBAAsB;AAGpC,SAAS,yBAAyB;AAClC,SACE,+BAA+B,sCAC/B,6BAA6B,oCAC7B,iCAAiC,8CAC5B;AACP,cACE,6BACA,wBACA,0BACK;AAGP,cAAc,4BAA4B;AAG1C,SAAS,mBAAmB;AAC5B,cAAc,wBAAwB;AAGtC,SAAS,mBAAmB;AAC5B,cAAc,wBAAwB;AAGtC,SAAS,yBAAyB;AAClC,cAAc,8BAA8B;AAG5C,SACE,6BACA,4BACA,kCACK;AACP,cAAc,+BAA+B;AAG7C,SAAS,sBAAsB,iCAAiC;AAChE,SAAS,+BAA+B;AACxC,cAAc,gCAAgC;AAC9C,SAAS,yBAAyB;AAGlC,SAAS,gBAAgB;AACzB,cAAc,qBAAqB;AAGnC,SAAS,cAAc,kBAAkB,4BAA4B",
   "names": [],
   "sources": [
     "src/index.ts"
   ],
   "version": 3,
   "sourcesContent": [
-    "/**\n * @tamagui/native\n *\n * Native setup modules for Tamagui. Import these at the top of your app entry point.\n *\n * @example\n * ```tsx\n * // In your app entry (index.js or App.tsx)\n * import '@tamagui/native/setup-teleport'\n * import '@tamagui/native/setup-gesture-handler'\n * import '@tamagui/native/setup-worklets'\n * import '@tamagui/native/setup-safe-area'\n * import '@tamagui/native/expo-linear-gradient'\n * import '@tamagui/native/setup-keyboard-controller'\n *\n * // Then use Tamagui components normally\n * // Sheet will automatically use native gestures when available\n * // LinearGradient will use expo-linear-gradient when installed\n * ```\n */\n\n// types\nexport type {\n  NativePortalState,\n  GestureState,\n  WorkletsState,\n  SafeAreaState,\n  SafeAreaInsets,\n  SafeAreaFrame,\n  SafeAreaMetrics,\n  LinearGradientState,\n  ZeegoState,\n  BurntState,\n  NativePortalProps,\n  NativePortalHostProps,\n  NativePortalProviderProps,\n} from './types'\n\n// portal\nexport { getPortal } from './portalState'\nexport type { PortalAccessor } from './portalState'\n\n// gesture handler\nexport { getGestureHandler } from './gestureState'\nexport {\n  claimExternalPressOwnership as unstable_claimExternalPressOwnership,\n  hasExternalPressOwnership as unstable_hasExternalPressOwnership,\n  releaseExternalPressOwnership as unstable_releaseExternalPressOwnership,\n} from './gestureState'\nexport type {\n  ExternalPressOwnershipToken,\n  GestureHandlerAccessor,\n  PressGestureConfig,\n} from './gestureState'\n// NOTE: setupGestureHandler is exported from setup-gesture-handler.ts entry point,\n// not here, to avoid bundler pulling in RNGH require during tree-shaking\nexport type { GestureHandlerConfig } from './setup-gesture-handler'\n\n// worklets\nexport { getWorklets } from './workletsState'\nexport type { WorkletsAccessor } from './workletsState'\n\n// safe area\nexport { getSafeArea } from './safeAreaState'\nexport type { SafeAreaAccessor } from './safeAreaState'\n\n// linear gradient\nexport { getLinearGradient } from './linearGradientState'\nexport type { LinearGradientAccessor } from './linearGradientState'\n\n// keyboard controller state exports (safe - no side effects)\nexport {\n  isKeyboardControllerEnabled,\n  getKeyboardControllerState,\n  setKeyboardControllerState,\n} from './keyboardControllerState'\nexport type { KeyboardControllerState } from './keyboardControllerState'\n\n// zeego (native menus)\nexport { getZeego } from './zeegoState'\nexport type { ZeegoAccessor } from './zeegoState'\nexport { NativeMenuContext } from './nativeMenuContext'\n\n// burnt (native toasts)\nexport { getBurnt } from './burntState'\nexport type { BurntAccessor } from './burntState'\n\n// components\nexport { NativePortal, NativePortalHost, NativePortalProvider } from './components'\n"
+    "/**\n * @tamagui/native\n *\n * Native setup modules for Tamagui. Import these at the top of your app entry point.\n *\n * @example\n * ```tsx\n * // In your app entry (index.js or App.tsx)\n * import '@tamagui/native/setup-teleport'\n * import '@tamagui/native/setup-gesture-handler'\n * import '@tamagui/native/setup-worklets'\n * import '@tamagui/native/setup-safe-area'\n * import '@tamagui/native/expo-linear-gradient'\n * import '@tamagui/native/setup-keyboard-controller'\n *\n * // Then use Tamagui components normally\n * // Sheet will automatically use native gestures when available\n * // LinearGradient will use expo-linear-gradient when installed\n * ```\n */\n\n// types\nexport type {\n  NativePortalState,\n  GestureState,\n  WorkletsState,\n  SafeAreaState,\n  SafeAreaInsets,\n  SafeAreaFrame,\n  SafeAreaMetrics,\n  LinearGradientState,\n  BurntState,\n  NativePortalProps,\n  NativePortalHostProps,\n  NativePortalProviderProps,\n} from './types'\nexport type { NativeMenuAdapter, NativeMenuModule } from './nativeMenuState'\n\n// portal\nexport { getPortal } from './portalState'\nexport type { PortalAccessor } from './portalState'\n\n// gesture handler\nexport { getGestureHandler } from './gestureState'\nexport {\n  claimExternalPressOwnership as unstable_claimExternalPressOwnership,\n  hasExternalPressOwnership as unstable_hasExternalPressOwnership,\n  releaseExternalPressOwnership as unstable_releaseExternalPressOwnership,\n} from './gestureState'\nexport type {\n  ExternalPressOwnershipToken,\n  GestureHandlerAccessor,\n  PressGestureConfig,\n} from './gestureState'\n// NOTE: setupGestureHandler is exported from setup-gesture-handler.ts entry point,\n// not here, to avoid bundler pulling in RNGH require during tree-shaking\nexport type { GestureHandlerConfig } from './setup-gesture-handler'\n\n// worklets\nexport { getWorklets } from './workletsState'\nexport type { WorkletsAccessor } from './workletsState'\n\n// safe area\nexport { getSafeArea } from './safeAreaState'\nexport type { SafeAreaAccessor } from './safeAreaState'\n\n// linear gradient\nexport { getLinearGradient } from './linearGradientState'\nexport type { LinearGradientAccessor } from './linearGradientState'\n\n// keyboard controller state exports (safe - no side effects)\nexport {\n  isKeyboardControllerEnabled,\n  getKeyboardControllerState,\n  setKeyboardControllerState,\n} from './keyboardControllerState'\nexport type { KeyboardControllerState } from './keyboardControllerState'\n\n// native menus\nexport { getNativeMenuAdapter, registerNativeMenuAdapter } from './nativeMenuState'\nexport { createExpoUIMenuAdapter } from './expoUIMenuAdapter'\nexport type { ExpoUIMenuAdapterOptions } from './expoUIMenuAdapter'\nexport { NativeMenuContext } from './nativeMenuContext'\n\n// burnt (native toasts)\nexport { getBurnt } from './burntState'\nexport type { BurntAccessor } from './burntState'\n\n// components\nexport { NativePortal, NativePortalHost, NativePortalProvider } from './components'\n"
   ]
 }

package/types/nativeMenuState.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentType } from "react";
+export type NativeMenuModule = {
+	Root: ComponentType<any>;
+	Trigger: ComponentType<any>;
+	Content: ComponentType<any>;
+	Item: ComponentType<any>;
+	ItemTitle: ComponentType<any>;
+	ItemSubtitle: ComponentType<any>;
+	ItemIcon: ComponentType<any>;
+	ItemImage: ComponentType<any>;
+	ItemIndicator: ComponentType<any>;
+	Group: ComponentType<any>;
+	Label: ComponentType<any>;
+	Separator: ComponentType<any>;
+	Sub: ComponentType<any>;
+	SubTrigger: ComponentType<any>;
+	SubContent: ComponentType<any>;
+	CheckboxItem: ComponentType<any>;
+	Preview?: ComponentType<any>;
+	Auxiliary?: ComponentType<any>;
+};
+/**
+* A native implementation for Tamagui Menu and ContextMenu compound components.
+* Register one adapter before the first native menu renders.
+*/
+export type NativeMenuAdapter = {
+	name: string;
+	Menu: NativeMenuModule;
+	ContextMenu: NativeMenuModule;
+};
+/**
+* Registers the process-wide native menu implementation. Re-registering the same
+* named adapter supports fast refresh; registering a different adapter throws.
+*/
+export declare function registerNativeMenuAdapter(adapter: NativeMenuAdapter): void;
+export declare function getNativeMenuAdapter(): NativeMenuAdapter | null;
+
+//# sourceMappingURL=nativeMenuState.d.ts.map

package/types/nativeMenuState.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAAA,cAAc,qBAAqB;AAInC,YAAY,mBAAmB;CAC7B,MAAM;CACN,SAAS;CACT,SAAS;CACT,MAAM;CACN,WAAW;CACX,cAAc;CACd,UAAU;CACV,WAAW;CACX,eAAe;CACf,OAAO;CACP,OAAO;CACP,WAAW;CACX,KAAK;CACL,YAAY;CACZ,YAAY;CACZ,cAAc;CACd,UAAU;CACV,YAAY;;;;;;AAOd,YAAY,oBAAoB;CAC9B;CACA,MAAM;CACN,aAAa;;;;;;AAiBf,OAAO,iBAAS,0BAA0B,SAAS;AAWnD,OAAO,iBAAS,wBAAwB",
+  "names": [],
+  "sources": [
+    "src/nativeMenuState.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "import type { ComponentType } from 'react'\n\nimport { createGlobalState } from './globalState'\n\nexport type NativeMenuModule = {\n  Root: ComponentType<any>\n  Trigger: ComponentType<any>\n  Content: ComponentType<any>\n  Item: ComponentType<any>\n  ItemTitle: ComponentType<any>\n  ItemSubtitle: ComponentType<any>\n  ItemIcon: ComponentType<any>\n  ItemImage: ComponentType<any>\n  ItemIndicator: ComponentType<any>\n  Group: ComponentType<any>\n  Label: ComponentType<any>\n  Separator: ComponentType<any>\n  Sub: ComponentType<any>\n  SubTrigger: ComponentType<any>\n  SubContent: ComponentType<any>\n  CheckboxItem: ComponentType<any>\n  Preview?: ComponentType<any>\n  Auxiliary?: ComponentType<any>\n}\n\n/**\n * A native implementation for Tamagui Menu and ContextMenu compound components.\n * Register one adapter before the first native menu renders.\n */\nexport type NativeMenuAdapter = {\n  name: string\n  Menu: NativeMenuModule\n  ContextMenu: NativeMenuModule\n}\n\ntype NativeMenuState = {\n  enabled: boolean\n  adapter: NativeMenuAdapter | null\n}\n\nconst state = createGlobalState<NativeMenuState>('native-menu-adapter', {\n  enabled: false,\n  adapter: null,\n})\n\n/**\n * Registers the process-wide native menu implementation. Re-registering the same\n * named adapter supports fast refresh; registering a different adapter throws.\n */\nexport function registerNativeMenuAdapter(adapter: NativeMenuAdapter): void {\n  const current = state.get().adapter\n  if (current && current.name !== adapter.name) {\n    throw new Error(\n      `A native menu adapter named \"${current.name}\" is already registered. ` +\n        `Register exactly one adapter before rendering Tamagui menus.`\n    )\n  }\n  state.set({ enabled: true, adapter })\n}\n\nexport function getNativeMenuAdapter(): NativeMenuAdapter | null {\n  return state.get().adapter\n}\n"
+  ]
+}

package/types/setup-expo-ui-menu.d.ts

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=setup-expo-ui-menu.d.ts.map

package/types/setup-expo-ui-menu.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "",
+  "names": [],
+  "sources": [
+    "src/setup-expo-ui-menu.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "/**\n * Setup Expo UI for Tamagui native Menu and ContextMenu components.\n *\n * Import this module once at the top of the app entry point after installing\n * `@expo/ui`.\n */\n\nimport { createExpoUIMenuAdapter } from './expoUIMenuAdapter'\nimport { registerNativeMenuAdapter } from './nativeMenuState'\n\nfunction setup(): void {\n  let MenuView\n  try {\n    MenuView = require('@expo/ui/community/menu').MenuView\n  } catch (error) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn('Error setting up Expo UI native menus', error)\n    }\n    return\n  }\n\n  registerNativeMenuAdapter(createExpoUIMenuAdapter({ MenuView }))\n}\n\nsetup()\n"
+  ]
+}