From 2b73935c76cc5f8d872681f85f0510f9e3941b2a Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Mon, 13 Jun 2022 15:06:25 +0200
Subject: [PATCH 1/6] Delete lerna-debug.log

---
 lerna-debug.log | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 lerna-debug.log

diff --git a/lerna-debug.log b/lerna-debug.log
deleted file mode 100644
index 353fb55..0000000
--- a/lerna-debug.log
+++ /dev/null
@@ -1,3 +0,0 @@
-102 error HttpError: Bad credentials
-102 error     at /Users/fernandorojo/Developer/madison-hacks/zeeg/node_modules/@octokit/request/dist-node/index.js:86:21
-102 error     at processTicksAndRejections (node:internal/process/task_queues:96:5)

From 8dcf3b8d31492a5b166207dbc7f6dcf7629209e3 Mon Sep 17 00:00:00 2001
From: Nishan <nishanbende@gmail.com>
Date: Tue, 14 Jun 2022 21:15:13 +0530
Subject: [PATCH 2/6] feat: android menu

---
 README.md                                     |   8 +-
 packages/zeego/package.json                   |   3 +-
 .../create-android-menu/index.android.tsx     | 730 ++++++++++--------
 yarn.lock                                     | 269 +------
 4 files changed, 431 insertions(+), 579 deletions(-)

diff --git a/README.md b/README.md
index 9afadc3..e4b8a8b 100644
--- a/README.md
+++ b/README.md
@@ -19,12 +19,12 @@ yarn add zeego
 Add peer deps:
 
 ```sh
-yarn add react-native-ios-context-menu react-native-popper
+yarn add react-native-ios-context-menu @react-native-menu/menu
 ```
 
 ### Solito
 
-Be sure to install `react-native-ios-context-menu` in your Expo folder (likely `apps/expo`).
+Be sure to install `react-native-ios-context-menu` (for iOS menu) and `@react-native-menu/menu` (for Android menu) in your Expo folder (likely `apps/expo`).
 
 You should also follow the Next.js steps below.
 
@@ -53,8 +53,6 @@ Run `pod install` in your `ios` folder.
 
 The API follows that of Radix UI closely.
 
-
-
 ## Usage
 
 ```ts
@@ -104,14 +102,12 @@ Under the hood, `menuify` applies a `displayName` to your component. This allows
 
 ## Example
 
-
 For now, you should reference the [example in the repo](https://github.com/nandorojo/zeego/tree/master/examples/expo/src/App.tsx).
 
 I also added a [Moti + Dripsy example](https://github.com/nandorojo/zeego/blob/master/moti-example.mdx).
 
 In the future, I'll make an example app with Solito too.
 
-
 ```tsx
 const DropdownMenuExample = () => {
   const [bookmarked, setBookmarked] = useState<'on' | 'off' | 'mixed'>('on')
diff --git a/packages/zeego/package.json b/packages/zeego/package.json
index abbd4bb..5356f3d 100644
--- a/packages/zeego/package.json
+++ b/packages/zeego/package.json
@@ -69,7 +69,6 @@
     "react": "17.0.1",
     "react-native": "0.64.2",
     "react-native-builder-bob": "^0.18.0",
-    "react-native-popper": "^0.3.2",
     "release-it": "^14.2.2",
     "typescript": "^4.4"
   },
@@ -77,7 +76,7 @@
     "react": "*",
     "react-native": "*",
     "react-native-ios-context-menu": "*",
-    "react-native-popper": "*"
+    "@react-native-menu/menu": "*"
   },
   "jest": {
     "preset": "react-native",
diff --git a/packages/zeego/src/menu/create-android-menu/index.android.tsx b/packages/zeego/src/menu/create-android-menu/index.android.tsx
index a3c9e7a..2305a37 100644
--- a/packages/zeego/src/menu/create-android-menu/index.android.tsx
+++ b/packages/zeego/src/menu/create-android-menu/index.android.tsx
@@ -1,356 +1,442 @@
-import React, {
-  Children,
-  cloneElement,
-  createContext,
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import { View, Pressable, Image, Text } from 'react-native'
-
-import type { createIosMenu } from '../create-ios-menu'
+import React, { Children, ReactElement } from 'react'
+
+import { MenuView } from '@react-native-menu/menu'
+
+import {
+  flattenChildren,
+  pickChildren,
+  isInstanceOfComponent,
+} from '../children'
+import { menuify } from '../display-names'
+import { filterNull } from '../filter-null'
 import type {
-  MenuCheckboxItemProps,
   MenuContentProps,
   MenuGroupProps,
-  MenuItemIconProps,
-  MenuItemImageProps,
-  MenuItemIndicatorProps,
   MenuItemProps,
   MenuItemSubtitleProps,
   MenuItemTitleProps,
-  MenuLabelProps,
   MenuRootProps,
-  MenuSeparatorProps,
   MenuTriggerItemProps,
   MenuTriggerProps,
+  MenuItemIconProps,
+  MenuCheckboxItemProps,
+  MenuSeparatorProps,
+  MenuItemImageProps,
+  MenuItemIndicatorProps,
+  MenuLabelProps,
 } from '../types'
-
-import { menuify } from '../display-names'
-
-import { Popover } from 'react-native-popper'
-import { pickChildren } from '../children'
-
-type MenuVisibleContext = {
-  isOpen: boolean
-  onClose: () => void
-  onShow: () => void
-  onOpenChange: (next: boolean) => void
-  closeRootMenu: () => void
-  onToggleOpen: () => void
-}
-
-const VirtualizedMenuContext = createContext(false)
-const useIsNestedMenu = () => useContext(VirtualizedMenuContext)
-
-const MenuVisibleContext = createContext<MenuVisibleContext>(null as any)
-
-const useMenuVisibleContext = () => useContext(MenuVisibleContext)
-
-const TriggerItem = menuify(
-  ({
-    style,
-    onFocus,
-    onBlur,
-    textValue,
-    disabled,
-    children,
-  }: MenuTriggerItemProps) => {
-    const { onToggleOpen } = useMenuVisibleContext()
-    return (
-      <Pressable
-        onPress={onToggleOpen}
-        style={style}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        accessibilityLabel={textValue}
-        disabled={disabled}
-      >
-        {children}
-      </Pressable>
-    )
-  },
-  'TriggerItem'
-)
-
-function MenuProvider({ children }: { children: ReactNode }) {
-  const [isOpen, setOpen] = useState(false)
-
-  const parentContext = useMenuVisibleContext()
-
-  const isNestedMenu = !!parentContext
-
-  const closeRootMenu = parentContext?.closeRootMenu
-
-  return (
-    <MenuVisibleContext.Provider
-      value={useMemo(
-        () => ({
-          isOpen,
-          onShow: () => setOpen(true),
-          onClose: () => setOpen(false),
-          onOpenChange: setOpen,
-          closeRootMenu: closeRootMenu ?? (() => setOpen(false)),
-          onToggleOpen: () => setOpen((prev) => !prev),
-        }),
-        [isOpen]
-      )}
-    >
-      <VirtualizedMenuContext.Provider value={isNestedMenu}>
-        {children}
-      </VirtualizedMenuContext.Provider>
-    </MenuVisibleContext.Provider>
-  )
-}
-
-const TriggerElementContext = createContext<ReactElement>(null as any)
-const useTriggerElement = () => useContext(TriggerElementContext)
-
-const Root = menuify(({ children }: MenuRootProps) => {
-  const isNested = useIsNestedMenu()
-
-  if (isNested) {
-    return <MenuProvider>{children}</MenuProvider>
+import { View } from 'react-native'
+
+const createAndroidMenu = (Menu: 'ContextMenu' | 'DropdownMenu') => {
+  const Trigger = menuify(({ children, style }: MenuTriggerProps) => {
+    const child = <>{children}</>
+
+    return <View style={style}>{Children.only(child)}</View>
+  }, 'Trigger')
+
+  const Group = menuify(({ children }: MenuGroupProps) => {
+    return <>{children}</>
+  }, 'Group')
+
+  const Content = menuify(({ children }: MenuContentProps) => {
+    if (!children) {
+      console.error(`[zeego] <Content /> children must be written directly inline.
+
+You cannot wrap this component into its own component. It should look like this:
+
+<Root>
+  <Content>
+    <Item />
+    <Item />
+  </Content>
+</Root>
+
+Notice that the <Item /> are all children of the <Content /> component. That's important.
+
+If you want to use a custom component as your <Content />, you can use the menuify() method. But you still need to pass all items as children of <Content />.`)
+    }
+    return <>{children}</>
+  }, 'Content')
+
+  const ItemTitle = menuify(({ children }: MenuItemTitleProps) => {
+    if (typeof children != 'string') {
+      throw new Error('[zeego] <ItemTitle /> child must be a string')
+    }
+    return <>{children}</>
+  }, 'ItemTitle')
+
+  const ItemIcon = menuify((props: MenuItemIconProps) => {
+    if (!props.iosIconName) {
+      console.warn(
+        '[zeego] <ItemIcon /> missing iosIconName prop. Will do nothing on iOS. Consider passing an iosIconImage or switching to <ItemImage />.'
+      )
+    }
+    return <>{}</>
+  }, 'ItemIcon')
+
+  const ItemImage = menuify((props: MenuItemImageProps) => {
+    // if (!props.source) {
+    //   console.error('[zeego] <ItemImage /> missing source prop.')
+    // }
+    if (!props.iosIconName) {
+      console.warn(
+        '[zeego] <ItemImage /> will not use your custom image on iOS. You should use the iosIconName prop to render an icon on iOS too.'
+      )
+    }
+    return <>{}</>
+  }, 'ItemImage')
+
+  const ItemSubtitle = menuify(({ children }: MenuItemSubtitleProps) => {
+    if (children && typeof children != 'string') {
+      throw new Error('[zeego] <ItemSubtitle /> child must be a string')
+    }
+    return <>{children}</>
+  }, 'ItemSubtitle')
+
+  const Item = menuify(({ children }: MenuItemProps) => {
+    const titleChild = pickChildren(children, ItemTitle).targetChildren
+    if (typeof children != 'string' && !titleChild?.length) {
+      console.error(
+        `[zeego] Invalid <Item />. It either needs <ItemTitle /> in the children.
+
+<Item>
+  <ItemTitle>
+    Title here
+  </ItemTitle>
+</Item>
+  `
+      )
+    }
+    return <>{children}</>
+  }, 'Item')
+
+  const TriggerItem = menuify(({ children }: MenuTriggerItemProps) => {
+    const titleChild = pickChildren(children, ItemTitle).targetChildren
+    if (typeof children != 'string' && !titleChild?.length) {
+      console.error(
+        `[zeego] Invalid <TriggerItem />. It either needs a string as the children, or a <ItemTitle /> in the children. However, it got neither.
+
+
+<TriggerItem>
+  <ItemTitle>
+    Title here
+  </ItemTitle>
+</TriggerItem>
+  `
+      )
+    }
+    return <>{children}</>
+  }, 'TriggerItem')
+
+  const CheckboxItem = menuify(({}: MenuCheckboxItemProps) => {
+    return <></>
+  }, 'CheckboxItem')
+
+  const Label = menuify(({ children }: MenuLabelProps) => {
+    if (typeof children != 'string') {
+      console.error('[zeego] <Label /> children must be a string.')
+    }
+    return <></>
+  }, 'Label')
+
+  type MenuAttributes = {
+    disabled?: boolean
+    destructive?: boolean
+    hidden?: boolean
   }
-  const rootTrigger = pickChildren(children, Trigger)
 
-  const trigger = rootTrigger.targetChildren?.[0]
-  if (!trigger) {
-    // TODO warn in the future here, but just leave it for now cause doing so breaks it unexpectedly
+  type MenuConfig = {
+    id?: string
+    title: string
+    subactions: (MenuItem | MenuConfig)[]
+    attributes?: MenuAttributes
+    image?: MenuItemIcon
   }
 
-  return (
-    <MenuProvider>
-      <TriggerElementContext.Provider value={trigger as ReactElement}>
-        <TriggerRefContext.Provider value={useRef(null)}>
-          {rootTrigger.withoutTargetChildren}
-        </TriggerRefContext.Provider>
-      </TriggerElementContext.Provider>
-    </MenuProvider>
-  )
-}, 'Root')
+  type MenuItemIcon = string
+
+  type MenuItem = {
+    id: string
+    title: string
+    titleColor?: string
+    subtitle?: string
+    image?: string
+    imageColor?: string
+    state?: 'on' | 'off' | 'mixed'
+    attributes?: MenuAttributes
+  }
 
-const TriggerRefContext = createContext<React.RefObject<View>>({
-  current: null,
-})
-const useTriggerRef = () => useContext(TriggerRefContext)
+  const Root = menuify((props: MenuRootProps) => {
+    const trigger = pickChildren<MenuTriggerProps>(props.children, Trigger)
+    const content = pickChildren<MenuContentProps>(props.children, Content)
+      .targetChildren?.[0]
+
+    const callbacks: Record<string, () => void> = {}
+
+    const getItemFromChild = (
+      child: ReactElement<
+        MenuItemProps | MenuTriggerItemProps | MenuCheckboxItemProps
+      >,
+      index: number
+    ) => {
+      let title: string | undefined
+      const key: string = child.key ? `${child.key}` : `item-${index}`
+      let subtitle: string | undefined
+      const menuAttributes: MenuAttributes = {}
+
+      if (child.props.disabled) {
+        menuAttributes.disabled = true
+      }
+      if (child.props.destructive) {
+        menuAttributes.destructive = true
+      }
+      if (child.props.hidden) {
+        menuAttributes.hidden = true
+      }
 
-const Trigger = menuify(({ children, style }: MenuTriggerProps) => {
-  if (Children.count(children) > 1) {
-    console.error('[zeego] <Trigger /> must have one child.')
-  }
-  const child = cloneElement(Children.only(children), {
-    onPress: undefined, // remove press handler if it exists 😬
-  })
-  const triggerRef = useTriggerRef()
+      let icon: MenuItem['image']
+
+      if (typeof child.props.children == 'string') {
+        title = child.props.children
+      } else {
+        const titleChild = pickChildren<MenuItemTitleProps>(
+          child.props.children,
+          ItemTitle
+        ).targetChildren
+
+        title = titleChild?.[0]?.props.children
+
+        const subtitleChild = pickChildren<MenuItemSubtitleProps>(
+          child.props.children,
+          ItemSubtitle
+        ).targetChildren
+        if (typeof subtitleChild?.[0]?.props.children == 'string') {
+          subtitle = subtitleChild[0].props.children
+        }
+
+        const iconChildren = pickChildren<MenuItemIconProps>(
+          child.props.children,
+          ItemIcon
+        ).targetChildren
+
+        if (iconChildren?.[0]?.props.iosIconName) {
+          icon = iconChildren[0].props.iosIconName
+        } else {
+          const imageChild = pickChildren<MenuItemImageProps>(
+            child.props.children,
+            ItemImage
+          ).targetChildren?.[0]
+
+          if (imageChild) {
+            const { iosIconName } = imageChild.props
+            if (iosIconName) {
+              icon = iosIconName
+            } else {
+              // require('react-native/Libraries/Network/RCTNetworking')
+              // const { Image } =
+              //   require('react-native') as typeof import('react-native')
+              // const iconValue = Image.resolveAssetSource(source)
+              // icon = {
+              //   iconType: 'REQUIRE',
+              //   iconValue,
+              // }
+            }
+          }
+        }
+      }
+      if (title) {
+        const maybeIndexKey =
+          typeof child.key == 'string' && child.key.startsWith('.')
+            ? child.key.substring(1)
+            : undefined
+
+        if (
+          // if the key doesn't exist as a string
+          typeof child.key != 'string' ||
+          // or if flattenChildren assigned the key as `.${key}${index}`
+          (child.key.startsWith('.') && !isNaN(Number(maybeIndexKey)))
+        ) {
+          console.warn(
+            `[zeego] <Item /> is missing a unique key. Pass a unique key string for each item, such as: <Item key="${
+              title.toLowerCase().replace(/ /g, '-') || `action-${index}`
+            }" />. Falling back to index (${key}) instead, but this may have negative consequences.`
+          )
+        }
+        if ('onSelect' in child.props && child.props.onSelect) {
+          callbacks[key] = child.props.onSelect
+        } else if ('onValueChange' in child.props) {
+          const menuState = child.props.value
+          const nextState =
+            menuState === 'mixed' || menuState === 'on' ? 'off' : 'on'
+          const { onValueChange } = child.props
+          callbacks[key] = () => {
+            onValueChange?.(nextState, menuState)
+          }
+        }
+
+        return {
+          key,
+          title,
+          subtitle,
+          menuAttributes,
+          icon,
+        }
+      }
+      return
+    }
+
+    const mapItemsChildren = (
+      children: React.ReactNode
+    ): ((MenuItem | MenuConfig) | null)[] => {
+      return Children.map(
+        flattenChildren(children)
+          .map((item) => {
+            // android menu doesn't support group feature like iOS `displayInline` option in menu
+            if (
+              isInstanceOfComponent(item, Group) &&
+              typeof item === 'object'
+            ) {
+              return flattenChildren(item.props.children)
+            }
+            return item
+          })
+          .flat(),
+        (_child, index) => {
+          if (isInstanceOfComponent(_child, Item)) {
+            const child = _child as ReactElement<MenuItemProps>
+
+            const item = getItemFromChild(child, index)
+            if (item) {
+              const { icon, title, key, menuAttributes, subtitle } = item
+              const finalItem: MenuItem = {
+                id: key,
+                title: title,
+                image: icon,
+                attributes: menuAttributes,
+                subtitle,
+              }
+              return finalItem
+            }
+          } else if (isInstanceOfComponent(_child, CheckboxItem)) {
+            const child = _child as ReactElement<MenuCheckboxItemProps>
+
+            const item = getItemFromChild(child, index)
+            if (item) {
+              const { icon, title, key, menuAttributes, subtitle } = item
+              const menuState = child.props.value
+
+              const finalItem: MenuItem = {
+                id: key,
+                title: title,
+                image: icon,
+                attributes: menuAttributes,
+                subtitle: subtitle,
+                state: menuState,
+              }
+              return finalItem
+            }
+          } else if (isInstanceOfComponent(_child, Root)) {
+            const child = _child as ReactElement<MenuRootProps>
+            const key: string = child.key ? `${child.key}` : `item-${index}`
+            const triggerItemChild = pickChildren<MenuTriggerItemProps>(
+              child.props.children,
+              TriggerItem
+            ).targetChildren?.[0]
+
+            const triggerItem =
+              triggerItemChild && getItemFromChild(triggerItemChild, index)
+            if (triggerItem) {
+              const nestedContent = pickChildren<MenuContentProps>(
+                child.props.children,
+                Content
+              ).targetChildren?.[0]
+
+              if (nestedContent) {
+                const nestedItems = mapItemsChildren(
+                  nestedContent.props.children
+                ).filter(filterNull)
+
+                if (nestedItems.length) {
+                  const menuConfig: MenuConfig = {
+                    id: key,
+                    title: triggerItem?.title,
+                    image: triggerItem?.icon,
+                    subactions: nestedItems,
+                    attributes: triggerItem.menuAttributes,
+                  }
+                  return menuConfig
+                }
+              }
+            }
+          }
+          return null
+        }
+      )
+    }
+
+    // let menuItems: (MenuItem | MenuConfig)[] = []
+
+    // Children.forEach(flattenChildren(props.children), (_child) => {
+    //   const child = _child as ReactElement
+    //   if (isInstanceOfComponent(child, Content)) {
+    //     menuItems.push(
+    //       ...mapItemsChildren(
+    //         (child as ReactElement<MenuContentProps>).props.children
+    //       ).filter(filterNull)
+    //     )
+    //   }
+    // })
+
+    const menuItems = mapItemsChildren(content?.props.children).filter(
+      filterNull
+    )
 
-  const { onShow } = useMenuVisibleContext()
+    const label = pickChildren<MenuLabelProps>(content?.props.children, Label)
+      .targetChildren?.[0]?.props.children
+    let menuTitle = ''
+    if (typeof label == 'string') {
+      menuTitle = label
+    }
 
-  return (
-    <Pressable onPress={onShow} style={style} ref={triggerRef}>
-      {child}
-    </Pressable>
-  )
-}, 'Trigger')
-
-const Item = menuify(
-  ({
-    children,
-    onSelect,
-    onFocus,
-    onBlur,
-    style,
-    textValue,
-    disabled,
-  }: MenuItemProps) => {
-    const { closeRootMenu } = useMenuVisibleContext()
-    const onPress = useCallback(() => {
-      onSelect?.()
-      closeRootMenu()
-    }, [onSelect, closeRootMenu])
     return (
-      <Pressable
-        onPress={onPress}
-        style={style}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        accessibilityLabel={textValue}
-        disabled={disabled}
+      <MenuView
+        title={menuTitle}
+        onPressAction={({ nativeEvent }) => {
+          callbacks[nativeEvent.event]()
+        }}
+        shouldOpenOnLongPress={Menu === 'ContextMenu' ? true : false}
+        actions={menuItems}
       >
-        {children}
-      </Pressable>
+        {trigger.targetChildren?.[0]}
+      </MenuView>
     )
-  },
-  'Item'
-)
-
-const ItemIcon = menuify(({ children, style }: MenuItemIconProps) => {
-  return (
-    <View style={style} pointerEvents="none">
-      {children}
-    </View>
-  )
-}, 'ItemIcon')
-
-const ItemImage = menuify(
-  ({
-    style,
-    source,
-    fadeDuration,
-    height,
-    resizeMode,
-    width,
-  }: MenuItemImageProps) => {
-    return (
-      <Image
-        style={style}
-        source={source}
-        fadeDuration={fadeDuration}
-        height={height}
-        resizeMode={resizeMode}
-        width={width}
-      />
-    )
-  },
-  'ItemImage'
-)
-
-const ItemTitle = menuify(({ children, style }: MenuItemTitleProps) => {
-  return <Text style={style}>{children}</Text>
-}, 'ItemTitle')
-
-const ItemSubtitle = menuify(({ children, style }: MenuItemSubtitleProps) => {
-  return <Text style={style}>{children}</Text>
-}, 'ItemSubtitle')
-
-const Group = menuify(({ children, style }: MenuGroupProps) => {
-  return <View style={style}>{children}</View>
-}, 'Group')
-
-const Separator = menuify(({ style }: MenuSeparatorProps) => {
-  return <View style={style} />
-}, 'Separator')
-
-const CheckboxItemContext = createContext<MenuCheckboxItemProps['value']>(
-  null as any
-)
-const useCheckboxItemValue = () => useContext(CheckboxItemContext)
-
-const CheckboxItem = menuify(
-  ({
-    children,
-    onValueChange,
-    onBlur,
-    onFocus,
-    style,
-    textValue,
-    value,
-  }: MenuCheckboxItemProps) => {
-    return (
-      <CheckboxItemContext.Provider value={value}>
-        <Item
-          style={style}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          textValue={textValue}
-          onSelect={useCallback(() => {
-            const next = value === 'off' ? 'on' : 'off'
-
-            onValueChange?.(next, value)
-          }, [value, onValueChange])}
-          // @ts-expect-error our types require a Key
-          // however, we don't actually need one here, since it'll be passed to the parent
-          // the types just have that to enforce it strictly
-          key={undefined}
-        >
-          {children}
-        </Item>
-      </CheckboxItemContext.Provider>
-    )
-  },
-  'CheckboxItem'
-)
-
-const ItemIndicator = menuify(({ style, children }: MenuItemIndicatorProps) => {
-  const value = useCheckboxItemValue()
-  if (value !== 'on' && value !== 'mixed') {
-    return null
-  }
-  return <View style={style}>{children}</View>
-}, 'ItemIndicator')
-
-const Label = menuify(
-  ({ style, children }: MenuLabelProps) => (
-    <Text style={style}>{children}</Text>
-  ),
-  'Label'
-)
-
-export const createAndroidMenu: typeof createIosMenu = (Menu) => {
-  const Content = menuify(
-    ({
-      children,
-      sideOffset,
-      style,
-      side,
-      alignOffset,
-      avoidCollisions,
-    }: MenuContentProps) => {
-      const { isOpen, onOpenChange, onClose } = useMenuVisibleContext()
-
-      const isNestedMenu = useIsNestedMenu()
-
-      const trigger = useTriggerElement()
-
-      const triggerRef = useTriggerRef()
-
-      if (isNestedMenu) {
-        return <>{isOpen && children}</>
-      }
+  }, 'Root')
 
-      return (
-        <>
-          {trigger}
-          <Popover
-            mode="single"
-            trigger={triggerRef}
-            offset={sideOffset}
-            isOpen={isOpen}
-            onOpenChange={onOpenChange}
-            placement={side}
-            shouldFlip={avoidCollisions}
-            onRequestClose={onClose}
-            crossOffset={alignOffset}
-            on={Menu === 'ContextMenu' ? 'longPress' : 'press'}
-          >
-            <Popover.Backdrop />
-            <Popover.Content>
-              <View style={style}>{children}</View>
-            </Popover.Content>
-          </Popover>
-        </>
-      )
-    },
-    'Content'
+  const Separator = menuify((_: MenuSeparatorProps) => {
+    return <></>
+  }, 'Separator')
+
+  const ItemIndicator = menuify(
+    (_: MenuItemIndicatorProps) => <></>,
+    'ItemIndicator'
   )
+
   return {
     Root,
     Trigger,
     Content,
     Item,
-    CheckboxItem,
+    ItemTitle,
+    ItemSubtitle,
+    TriggerItem,
     Group,
+    Separator,
     ItemIcon,
-    ItemImage,
     ItemIndicator,
-    ItemSubtitle,
-    ItemTitle,
+    CheckboxItem,
+    ItemImage,
     Label,
-    Separator,
-    TriggerItem,
   }
 }
+
+export { createAndroidMenu }
diff --git a/yarn.lock b/yarn.lock
index 1daa35b..0fef27e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1933,7 +1933,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.7.2":
   version "7.18.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
   integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
@@ -2781,45 +2781,6 @@
     find-up "^5.0.0"
     js-yaml "^4.1.0"
 
-"@formatjs/ecma402-abstract@1.11.4":
-  version "1.11.4"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz#b962dfc4ae84361f9f08fbce411b4e4340930eda"
-  integrity sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==
-  dependencies:
-    "@formatjs/intl-localematcher" "0.2.25"
-    tslib "^2.1.0"
-
-"@formatjs/fast-memoize@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz#e6f5aee2e4fd0ca5edba6eba7668e2d855e0fc21"
-  integrity sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==
-  dependencies:
-    tslib "^2.1.0"
-
-"@formatjs/icu-messageformat-parser@2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz#a54293dd7f098d6a6f6a084ab08b6d54a3e8c12d"
-  integrity sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.11.4"
-    "@formatjs/icu-skeleton-parser" "1.3.6"
-    tslib "^2.1.0"
-
-"@formatjs/icu-skeleton-parser@1.3.6":
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz#4ce8c0737d6f07b735288177049e97acbf2e8964"
-  integrity sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.11.4"
-    tslib "^2.1.0"
-
-"@formatjs/intl-localematcher@0.2.25":
-  version "0.2.25"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz#60892fe1b271ec35ba07a2eb018a2dd7bca6ea3a"
-  integrity sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==
-  dependencies:
-    tslib "^2.1.0"
-
 "@gar/promisify@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
@@ -2861,28 +2822,6 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
   integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
 
-"@internationalized/date@3.0.0-rc.1":
-  version "3.0.0-rc.1"
-  resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.0.0-rc.1.tgz#828f79517249ac65982ec760205089a98ec56555"
-  integrity sha512-IHc1NqUTA/fo9nf0pwRXrMjrabJ/9vTw5RIFAF3qS8JsdEGnw3dIyDb/+ipjEEqZyHVHHXwnqD8hKM18gGoWTg==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-
-"@internationalized/message@^3.0.7":
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.0.7.tgz#4b8d681dc1c2afdcb3b4feb273611e0b752517b2"
-  integrity sha512-f+3VC8NIR5rbk3un9WnGRNpAViWOUbnB2LfzYGlpC38XZ1GzCzi2AcCQ8qhgENXiNk8qetZ1TwJYmCZ/M8UM4Q==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    intl-messageformat "^9.12.0"
-
-"@internationalized/number@^3.1.1":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.1.1.tgz#160584316741de4381689ab759001603ee17b595"
-  integrity sha512-dBxCQKIxvsZvW2IBt3KsqrCfaw2nV6o6a8xsloJn/hjW0ayeyhKuiiMtTwW3/WGNPP7ZRyDbtuiUEjMwif1ENQ==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -4881,111 +4820,6 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@react-aria/focus@^3.2.3":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.6.0.tgz#45ff8aeaad3b594df54699ea3ea78296cb73fb5b"
-  integrity sha512-1XuwDvhrmLcNnYHBFzwmZOoXuxkybRc8MUhiGLYRD1aVX1h9GarglYo9sfbGZNRO5jxMptXjtJv2rdWz1mHmQw==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-types/shared" "^3.13.0"
-    clsx "^1.1.1"
-
-"@react-aria/i18n@^3.4.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.4.0.tgz#7ee8c468ce85b959ecef90e403332cbbc1ab9d01"
-  integrity sha512-2pU13zT9bgD4eMlqfJ/Um2wjYRS7ORvR0jqGSfNzY9Lx+1IeSCqTkBNubT7bCV+Oc0LMUR93fGRDxfdtMyJCog==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@internationalized/date" "3.0.0-rc.1"
-    "@internationalized/message" "^3.0.7"
-    "@internationalized/number" "^3.1.1"
-    "@react-aria/ssr" "^3.2.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-types/shared" "^3.13.0"
-
-"@react-aria/interactions@^3.3.2", "@react-aria/interactions@^3.9.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.9.0.tgz#cf15a1ba1402c2fc52d0c97aa7ccffa78204d166"
-  integrity sha512-tf9vJtHf7DSnj4e/q19hoO5h61xb0qxNXUkOwaVwU1XlaA+eh+Qas2RF0GIMARLj+JhGX9y2nLjw3FK8F+pItQ==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-aria/utils" "^3.13.0"
-    "@react-types/shared" "^3.13.0"
-
-"@react-aria/overlays@^3.7.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.9.0.tgz#950a9025e8d4086ce3840a97c52d0eb21d9c85c1"
-  integrity sha512-YeZ+/0yfBAcqhuRF/Aas5ga9rZWff3EkhisEy1yXjOrf5veedqb05CsyjRkefZzmUeUggfq/AmqX0DJBlZFbxg==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-aria/i18n" "^3.4.0"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-aria/visually-hidden" "^3.3.0"
-    "@react-stately/overlays" "^3.3.0"
-    "@react-types/button" "^3.5.0"
-    "@react-types/overlays" "^3.6.0"
-    "@react-types/shared" "^3.13.0"
-    dom-helpers "^5.2.1"
-    react-transition-group "^4.4.2"
-
-"@react-aria/ssr@^3.0.1", "@react-aria/ssr@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.2.0.tgz#88460384b43204f91c972d5b0de24ee44d6a2984"
-  integrity sha512-wwJFdkl+Q8NU5yJ4NvdAOqx5LM3QtUVoSjuK7Ey8jZ4WS4bB0EqT3Kr3IInBs257HzZ5nXCiKXKE4NGXXuIRWA==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-
-"@react-aria/utils@^3.13.0", "@react-aria/utils@^3.3.0":
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.13.0.tgz#a9523a9d4b19839601753749b65e19ac0ad5ca86"
-  integrity sha512-iF/yYkUVCc2Cgyu7o8oE6w7a67P/M8gXKDR2tp592Be6iUKQPy2kb49VvSh+Bom6Wq/To3h4UBOLFI6I0VXJYA==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-aria/ssr" "^3.2.0"
-    "@react-stately/utils" "^3.5.0"
-    "@react-types/shared" "^3.13.0"
-    clsx "^1.1.1"
-
-"@react-aria/visually-hidden@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.3.0.tgz#2ecddb5704b9a2a68df918bb49e6f125a589ef99"
-  integrity sha512-pnm4CzO/pI/2xfDMY9OcnlLqYYpaE1bIAwDdFzkXr6ldcR+4kG6N0dJprL6x+ZMgXbztfxUDSPLmexVQShmFsQ==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
-    clsx "^1.1.1"
-
-"@react-native-aria/focus@^0.2.5":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@react-native-aria/focus/-/focus-0.2.5.tgz#28ff752b28b7dfeb737147856aaf6669de3290f9"
-  integrity sha512-PUTGNL5JMCWJ2dNAehpQqLuSUUdkXcLlFjl52Dv84XcIUTuXRvDl5+jr4OW0jyUSGUS6ooqDNRW/PSza35P+tw==
-  dependencies:
-    "@react-aria/focus" "^3.2.3"
-
-"@react-native-aria/overlays@^0.3.1":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@react-native-aria/overlays/-/overlays-0.3.2.tgz#fe3fb983b197738237493c3e5af6b30f6da6be9d"
-  integrity sha512-sc2attCn+stKugBF8ZBz+EIdGoEHU/+NbJc5agS6lZWeemXL5LcgomNf6Tn7RUlpLfWOTEGBQOAiOZxjZnIQmQ==
-  dependencies:
-    "@react-aria/interactions" "^3.3.2"
-    "@react-aria/overlays" "^3.7.0"
-    "@react-native-aria/utils" "^0.2.6"
-    "@react-stately/overlays" "^3.1.1"
-    "@react-types/overlays" "^3.4.0"
-    dom-helpers "^5.0.0"
-
-"@react-native-aria/utils@^0.2.6":
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@react-native-aria/utils/-/utils-0.2.8.tgz#da433606506125483080f18dbcd97b526ca46fd5"
-  integrity sha512-x375tG1itv3irLFRnURLsdK2djuvhFJHizSDUtLCo8skQwfjslED5t4sUkQ49di4G850gaVJz0fCcCx/pHX7CA==
-  dependencies:
-    "@react-aria/ssr" "^3.0.1"
-    "@react-aria/utils" "^3.3.0"
-
 "@react-native-community/cli-debugger-ui@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-5.0.1.tgz#6b1f3367b8e5211e899983065ea2e72c1901d75f"
@@ -5134,6 +4968,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.1.0.tgz#e42b1bef12d2415411519fd528e64b593b1363dc"
   integrity sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==
 
+"@react-native-menu/menu@^0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-0.5.2.tgz#7b1ae8e41ee3b7306c4bf8b53b9e2cb78b4a829b"
+  integrity sha512-+ULWH3OXuirS4m03UhUkQj/G9q0wQo7LGDcxTyS12bVKQQ+yHwif4C3QcYy0zVIxwMPltCA7eOvsTThT0+B2xQ==
+
 "@react-native/assets@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
@@ -5154,41 +4993,6 @@
   resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-1.0.0.tgz#05bb0031533598f9458cf65a502b8df0eecae780"
   integrity sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w==
 
-"@react-stately/overlays@^3.1.1", "@react-stately/overlays@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/overlays/-/overlays-3.3.0.tgz#1775807fef9f49aedfca344c6db6cc89103638da"
-  integrity sha512-x8ASMyhib7mL4ITgZQXUaTGGkFPZz4qPJVThdx9i6q1iu0CpO7hXpPxzrUFKPV+JV/fyXlWbo3n7tWBE2yHTVw==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-stately/utils" "^3.5.0"
-    "@react-types/overlays" "^3.6.0"
-
-"@react-stately/utils@^3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.5.0.tgz#e76231cfc93042814dcc5d96436e50c807c1d905"
-  integrity sha512-WzzwlQtJrf7egaN+lt02/f/wkFKbcscsbinmXs9pL7QyYm+BCQ9xXj01w0juzt93piZgB/kfIYJqInEdpudh1A==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-
-"@react-types/button@^3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.5.0.tgz#78f220716307c238c16a0b18221fd0fbcb0e5838"
-  integrity sha512-pxmriCe7rx/kNKuy3KonttD7qHDFclgZ7k/U2hb+w75DpsI7mXs6aFnsk+j5ZeVjsXKXPZwQXbyBhlzvlEJI0A==
-  dependencies:
-    "@react-types/shared" "^3.13.0"
-
-"@react-types/overlays@^3.4.0", "@react-types/overlays@^3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@react-types/overlays/-/overlays-3.6.0.tgz#2aed36e3cbdf6eab355dec094ea4934b9f559945"
-  integrity sha512-atoRgctzNHxWE4qhI2YLI/0Y9bicsib3EnaliV0jUQf2oJMr0S8yKVwwx+K0ENh9Ah00XBEFQxkjgP1q3xQQYw==
-  dependencies:
-    "@react-types/shared" "^3.13.0"
-
-"@react-types/shared@^3.13.0":
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.13.0.tgz#01ef4312886ed8d449065f44168e2bfd3134acb7"
-  integrity sha512-ha+Xzn6gG/aww2nl7A6kYSJdYQypTxdYgNrJvddDB7h0QuyVQTf27iVleOWrmkHQ1TM9Q/FUbMdJ93CgdtP26g==
-
 "@release-it/conventional-changelog@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@release-it/conventional-changelog/-/conventional-changelog-2.0.1.tgz#bdd52ad3ecc0d6e39d637592d6ea2bd6d28e5ecb"
@@ -7871,11 +7675,6 @@ clone@^2.1.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
-clsx@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
-  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
-
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -9255,14 +9054,6 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^5.0.0, dom-helpers@^5.0.1, dom-helpers@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -10412,6 +10203,14 @@ expo-modules-core@~0.4.4, expo-modules-core@~0.4.7:
     compare-versions "^3.4.0"
     invariant "^2.2.4"
 
+expo-modules-core@~0.4.8:
+  version "0.4.10"
+  resolved "https://registry.yarnpkg.com/expo-modules-core/-/expo-modules-core-0.4.10.tgz#6c7e7e211b3056fc23a462e9faea88cc7653fe9b"
+  integrity sha512-uCZA3QzF0syRaHwYY99iaNhnye4vSQGsJ/y6IAiesXdbeVahWibX4G1KoKNPUyNsKXIM4tqA+4yByUSvJe4AAw==
+  dependencies:
+    compare-versions "^3.4.0"
+    invariant "^2.2.4"
+
 expo-pwa@0.0.101:
   version "0.0.101"
   resolved "https://registry.yarnpkg.com/expo-pwa/-/expo-pwa-0.0.101.tgz#8401f84f5ef8c2bd3207d99d80e7f27dabfc388d"
@@ -10447,16 +10246,16 @@ expo-updates-interface@~0.4.0:
   resolved "https://registry.yarnpkg.com/expo-updates-interface/-/expo-updates-interface-0.4.0.tgz#20961f2cb4bd068a74c29434affa08791dbaa240"
   integrity sha512-EUJaLnDAePikGEQT8w6gjCY3m/dlGgjZKVn5XBaxZMkHzOy3PDQo6QOcK/bcMdkA3CyNrvo6NCe+/7RHrgmK4A==
 
-expo-updates@~0.10.5:
-  version "0.10.13"
-  resolved "https://registry.yarnpkg.com/expo-updates/-/expo-updates-0.10.13.tgz#8e4eb506f7e78ed6fcd97bd4d18bce6f0637bf5b"
-  integrity sha512-IrEIvitWtxJkxbcWQidUmHvZAn9sPIXQq7gJXuaeXAa7aNQEj6kK0KLHqD4IoPSHEJ2oYdonXEnePNgwCl8XwA==
+expo-updates@~0.10.13:
+  version "0.10.15"
+  resolved "https://registry.yarnpkg.com/expo-updates/-/expo-updates-0.10.15.tgz#1fcfd78ff615307809ad38a3d37eaa67f7268282"
+  integrity sha512-GHh1e0BwJY7aT+huGfneXpMhPKKkDIOBqCWyZDyTo7AWLj2C2ZCvgT2D9LWyl6v9WwxMEfO94RaYCQaayD/rfw==
   dependencies:
     "@expo/config" "^5.0.9"
     "@expo/config-plugins" "^4.0.2"
     "@expo/metro-config" "~0.1.84"
     expo-manifests "~0.2.2"
-    expo-modules-core "~0.4.7"
+    expo-modules-core "~0.4.8"
     expo-structured-headers "~2.0.0"
     expo-updates-interface "~0.4.0"
     fbemitter "^2.1.1"
@@ -12382,16 +12181,6 @@ interpret@^1.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
-intl-messageformat@^9.12.0:
-  version "9.13.0"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.13.0.tgz#97360b73bd82212e4f6005c712a4a16053165468"
-  integrity sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.11.4"
-    "@formatjs/fast-memoize" "1.2.1"
-    "@formatjs/icu-messageformat-parser" "2.1.0"
-    tslib "^2.1.0"
-
 invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -18269,14 +18058,6 @@ react-native-ios-context-menu@^1.3.0:
   resolved "https://registry.yarnpkg.com/react-native-ios-context-menu/-/react-native-ios-context-menu-1.3.0.tgz#b877cbe9594afccfeb2f1659ee4aae829b986fc5"
   integrity sha512-7Af/5T9LGwdw+127UeiKrdCzlT247Puunts6pQ7HuKSW/33ZVJpxshDYjPiKEDYL94g5TDlIEsI93RC59x1Slw==
 
-react-native-popper@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/react-native-popper/-/react-native-popper-0.3.2.tgz#4582b3bccb85a043c2171c3326dce10f8f1e5c16"
-  integrity sha512-1zBHPZnXQjgKg1N+QvMjNrzV0A17+pkcV5GSzTLYjYJsxUH8fogduIc+FPxvkmedm7U/tb3YbhWNQUMXNhR84Q==
-  dependencies:
-    "@react-native-aria/focus" "^0.2.5"
-    "@react-native-aria/overlays" "^0.3.1"
-
 react-native-reanimated@2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.2.2.tgz#8bc81c7ee93d599991507bb826050a5eeee1e7f2"
@@ -18312,7 +18093,7 @@ react-native-web@^0.17.5:
     normalize-css-color "^1.0.2"
     prop-types "^15.6.0"
 
-react-native@0.64.2:
+react-native@0.64.2, react-native@0.64.3:
   version "0.64.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.64.2.tgz#233b6ed84ac4749c8bc2a2d6cf63577a1c437d18"
   integrity sha512-Ty/fFHld9DcYsFZujXYdeVjEhvSeQcwuTGXezyoOkxfiGEGrpL/uwUZvMzwShnU4zbbTKDu2PAm/uwuOittRGA==
@@ -18411,16 +18192,6 @@ react-test-renderer@~16.11.0:
     react-is "^16.8.6"
     scheduler "^0.17.0"
 
-react-transition-group@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react@17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"

From bafb2bf959bdb1bd5d28898cdfa9fd3dc3e423e9 Mon Sep 17 00:00:00 2001
From: Nishan <nishanbende@gmail.com>
Date: Tue, 14 Jun 2022 21:22:04 +0530
Subject: [PATCH 3/6] feat: android menu

---
 examples/expo/package.json | 1 +
 yarn.lock                  | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/expo/package.json b/examples/expo/package.json
index 6db084f..883e709 100644
--- a/examples/expo/package.json
+++ b/examples/expo/package.json
@@ -12,6 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-native-menu/menu": "^0.5.2",
     "add": "^2.0.6",
     "expo": "^43.0.0",
     "expo-splash-screen": "^0.13.5",
diff --git a/yarn.lock b/yarn.lock
index 0fef27e..73c124d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10246,7 +10246,7 @@ expo-updates-interface@~0.4.0:
   resolved "https://registry.yarnpkg.com/expo-updates-interface/-/expo-updates-interface-0.4.0.tgz#20961f2cb4bd068a74c29434affa08791dbaa240"
   integrity sha512-EUJaLnDAePikGEQT8w6gjCY3m/dlGgjZKVn5XBaxZMkHzOy3PDQo6QOcK/bcMdkA3CyNrvo6NCe+/7RHrgmK4A==
 
-expo-updates@~0.10.13:
+expo-updates@~0.10.5:
   version "0.10.15"
   resolved "https://registry.yarnpkg.com/expo-updates/-/expo-updates-0.10.15.tgz#1fcfd78ff615307809ad38a3d37eaa67f7268282"
   integrity sha512-GHh1e0BwJY7aT+huGfneXpMhPKKkDIOBqCWyZDyTo7AWLj2C2ZCvgT2D9LWyl6v9WwxMEfO94RaYCQaayD/rfw==
@@ -18093,7 +18093,7 @@ react-native-web@^0.17.5:
     normalize-css-color "^1.0.2"
     prop-types "^15.6.0"
 
-react-native@0.64.2, react-native@0.64.3:
+react-native@0.64.2:
   version "0.64.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.64.2.tgz#233b6ed84ac4749c8bc2a2d6cf63577a1c437d18"
   integrity sha512-Ty/fFHld9DcYsFZujXYdeVjEhvSeQcwuTGXezyoOkxfiGEGrpL/uwUZvMzwShnU4zbbTKDu2PAm/uwuOittRGA==

From 81c8878caaba47bf7f54d7fca950ae1552ad3059 Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Tue, 14 Jun 2022 18:47:01 +0200
Subject: [PATCH 4/6] Update README.md

---
 README.md | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e4b8a8b..662e950 100644
--- a/README.md
+++ b/README.md
@@ -16,15 +16,25 @@ Beautiful, native menus for React Native + Web, inspired by Radix UI.
 yarn add zeego
 ```
 
-Add peer deps:
+### Install peer dependencies
+
+If you're in a monorepo, you should install these in the directory of your native app.
+
+#### iOS
+
+```sh
+yarn add react-native-ios-context-menu
+```
+
+#### Android
 
 ```sh
-yarn add react-native-ios-context-menu @react-native-menu/menu
+yarn add @react-native-menu/menu
 ```
 
 ### Solito
 
-Be sure to install `react-native-ios-context-menu` (for iOS menu) and `@react-native-menu/menu` (for Android menu) in your Expo folder (likely `apps/expo`).
+As shown above, sure to install `react-native-ios-context-menu` and `@react-native-menu/menu` in your Expo folder (`apps/expo`).
 
 You should also follow the Next.js steps below.
 

From aee6205e8c27aca4200e57a1092ed99fa058dcd0 Mon Sep 17 00:00:00 2001
From: Nishan <nishanbende@gmail.com>
Date: Tue, 14 Jun 2022 23:26:17 +0530
Subject: [PATCH 5/6] androidIconName prop

---
 examples/expo/src/App.tsx                     | 10 ++++++++--
 .../create-android-menu/index.android.tsx     | 20 +++++++++----------
 packages/zeego/src/menu/types.ts              | 14 ++++++++++++-
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/examples/expo/src/App.tsx b/examples/expo/src/App.tsx
index dc1097b..80cce7d 100644
--- a/examples/expo/src/App.tsx
+++ b/examples/expo/src/App.tsx
@@ -213,7 +213,10 @@ const DropdownMenuExample = () => {
               12 artists fit your search
             </DropdownMenu.ItemSubtitle>
           )}
-          <DropdownMenuItemIcon iosIconName="list.star">
+          <DropdownMenuItemIcon
+            iosIconName="list.star"
+            androidIconName="star_on"
+          >
             <Ionicons name="list" size={15} />
           </DropdownMenuItemIcon>
         </DropdownMenuItem>
@@ -223,7 +226,10 @@ const DropdownMenuExample = () => {
           key="second"
         >
           <DropdownMenuItemTitle>Favorite</DropdownMenuItemTitle>
-          <DropdownMenuItemIcon iosIconName="star.fill">
+          <DropdownMenuItemIcon
+            iosIconName="star.fill"
+            androidIconName="btn_star"
+          >
             <Ionicons name="star" size={15} />
           </DropdownMenuItemIcon>
         </DropdownMenuItem>
diff --git a/packages/zeego/src/menu/create-android-menu/index.android.tsx b/packages/zeego/src/menu/create-android-menu/index.android.tsx
index 2305a37..5a27272 100644
--- a/packages/zeego/src/menu/create-android-menu/index.android.tsx
+++ b/packages/zeego/src/menu/create-android-menu/index.android.tsx
@@ -66,9 +66,9 @@ If you want to use a custom component as your <Content />, you can use the menui
   }, 'ItemTitle')
 
   const ItemIcon = menuify((props: MenuItemIconProps) => {
-    if (!props.iosIconName) {
+    if (!props.androidIconName) {
       console.warn(
-        '[zeego] <ItemIcon /> missing iosIconName prop. Will do nothing on iOS. Consider passing an iosIconImage or switching to <ItemImage />.'
+        '[zeego] <ItemIcon /> missing androidIconName prop. Will do nothing on android. Consider passing an androidIconName or switching to <ItemImage />.'
       )
     }
     return <>{}</>
@@ -78,9 +78,9 @@ If you want to use a custom component as your <Content />, you can use the menui
     // if (!props.source) {
     //   console.error('[zeego] <ItemImage /> missing source prop.')
     // }
-    if (!props.iosIconName) {
+    if (!props.androidIconName) {
       console.warn(
-        '[zeego] <ItemImage /> will not use your custom image on iOS. You should use the iosIconName prop to render an icon on iOS too.'
+        '[zeego] <ItemImage /> will not use your custom image on android. You should use the androidIconName prop to render an icon on android too.'
       )
     }
     return <>{}</>
@@ -219,8 +219,8 @@ If you want to use a custom component as your <Content />, you can use the menui
           ItemIcon
         ).targetChildren
 
-        if (iconChildren?.[0]?.props.iosIconName) {
-          icon = iconChildren[0].props.iosIconName
+        if (iconChildren?.[0]?.props.androidIconName) {
+          icon = iconChildren[0].props.androidIconName
         } else {
           const imageChild = pickChildren<MenuItemImageProps>(
             child.props.children,
@@ -228,9 +228,9 @@ If you want to use a custom component as your <Content />, you can use the menui
           ).targetChildren?.[0]
 
           if (imageChild) {
-            const { iosIconName } = imageChild.props
-            if (iosIconName) {
-              icon = iosIconName
+            const { androidIconName } = imageChild.props
+            if (androidIconName) {
+              icon = androidIconName
             } else {
               // require('react-native/Libraries/Network/RCTNetworking')
               // const { Image } =
@@ -404,7 +404,7 @@ If you want to use a custom component as your <Content />, you can use the menui
         onPressAction={({ nativeEvent }) => {
           callbacks[nativeEvent.event]()
         }}
-        shouldOpenOnLongPress={Menu === 'ContextMenu' ? true : false}
+        shouldOpenOnLongPress={Menu === 'ContextMenu'}
         actions={menuItems}
       >
         {trigger.targetChildren?.[0]}
diff --git a/packages/zeego/src/menu/types.ts b/packages/zeego/src/menu/types.ts
index 55c96fc..bc436f6 100644
--- a/packages/zeego/src/menu/types.ts
+++ b/packages/zeego/src/menu/types.ts
@@ -59,7 +59,13 @@ export type MenuItemIconProps = {
    */
   iosIconName?: string
   /**
-   * You can also pass the icon as a React Native component child. This will only work on Web, not iOS.
+   * The name of an android-only resource drawable. For a full list, see https://developer.android.com/reference/android/R.drawable.html.
+   *
+   * @platform android
+   */
+  androidIconName?: string
+  /**
+   * You can also pass the icon as a React Native component child. This will only work on Web, not iOS or android.
    */
   children?: React.ReactNode
   style?: ViewStyle
@@ -72,6 +78,12 @@ export type MenuItemImageProps = {
    * @platform ios
    */
   iosIconName?: string
+  /**
+   * The name of an android-only resource drawable. For a full list, see https://developer.android.com/reference/android/R.drawable.html.
+   *
+   * @platform android
+   */
+  androidIconName?: string
   /**
    * `source={require('path/to/image')}`
    */

From 87ee9891a782b13d7af56d3a79aeef23d8d1efda Mon Sep 17 00:00:00 2001
From: Nishan <nishanbende@gmail.com>
Date: Tue, 14 Jun 2022 23:28:33 +0530
Subject: [PATCH 6/6] add androidIconName in readme

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 662e950..f4e74e2 100644
--- a/README.md
+++ b/README.md
@@ -143,7 +143,7 @@ const DropdownMenuExample = () => {
               12 artists fit your search
             </DropdownMenu.ItemSubtitle>
           )}
-          <DropdownMenuItemIcon iosIconName="list.star">
+          <DropdownMenuItemIcon iosIconName="list.star" androidIconName="star_on">
             <Ionicons name="list" size={15} />
           </DropdownMenuItemIcon>
         </DropdownMenuItem>
@@ -153,7 +153,7 @@ const DropdownMenuExample = () => {
           key="second"
         >
           <DropdownMenuItemTitle>Favorite</DropdownMenuItemTitle>
-          <DropdownMenuItemIcon iosIconName="star.fill">
+          <DropdownMenuItemIcon iosIconName="star.fill" androidIconName="star_off">
             <Ionicons name="star" size={15} />
           </DropdownMenuItemIcon>
         </DropdownMenuItem>