fix: click menu outside to close

react-native-menu/menu#853

app/_layout.tsx

@@ -1,5 +1,6 @@
 import '../theme/unistyles'
 
+import { PortalProvider } from '@gorhom/portal'
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
 import { useMigrations } from 'drizzle-orm/expo-sqlite/migrator'
 import { useDrizzleStudio } from 'expo-drizzle-studio-plugin'
@@ -111,14 +112,16 @@ export default function Root() {
         },
       }}
     >
-      <ToastProvider offsetTop={100} duration={1000} placement="top">
-        <ThemeProvider
-          value={UnistylesRuntime.colorScheme === 'light' ? DefaultTheme : DarkTheme}
-        >
-          {__DEV__ && <DrizzleStudio />}
-          <Slot />
-        </ThemeProvider>
-      </ToastProvider>
+      <PortalProvider>
+        <ToastProvider offsetTop={100} duration={1000} placement="top">
+          <ThemeProvider
+            value={UnistylesRuntime.colorScheme === 'light' ? DefaultTheme : DarkTheme}
+          >
+            {__DEV__ && <DrizzleStudio />}
+            <Slot />
+          </ThemeProvider>
+        </ToastProvider>
+      </PortalProvider>
     </SWRConfig>
   )
 }

components/menu.tsx

@@ -0,0 +1,38 @@
+import { Portal } from '@gorhom/portal'
+import type { MenuComponentProps } from '@react-native-menu/menu'
+import { MenuView } from '@react-native-menu/menu'
+import { useState } from 'react'
+import type { ViewStyle } from 'react-native'
+import { Dimensions, Pressable } from 'react-native'
+
+export type MenuProps = MenuComponentProps
+
+export default function Menu({ children, ...props }: MenuProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const onPressAction: MenuComponentProps['onPressAction'] = ({ nativeEvent }) => {
+    setIsOpen(false)
+    props.onPressAction?.({ nativeEvent })
+  }
+
+  return (
+    <MenuView {...props} onPressAction={onPressAction}>
+      <Pressable onPress={() => setIsOpen(true)}>{children}</Pressable>
+      <Portal>
+        {isOpen && <Pressable style={absoluteViewStyle} onPress={() => setIsOpen(false)} />}
+      </Portal>
+    </MenuView>
+  )
+}
+
+const screenSize = Dimensions.get('screen')
+
+const absoluteViewStyle: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: screenSize.width,
+  height: screenSize.height,
+
+  zIndex: 999,
+}

components/view-actions.tsx

@@ -1,4 +1,3 @@
-import { MenuView } from '@react-native-menu/menu'
 import { useRouter } from 'expo-router'
 import { useAtom } from 'jotai'
 
@@ -7,11 +6,13 @@ import type { TabViewIndex } from '~/atom/layout'
 import { viewLayoutMapAtom } from '~/atom/layout'
 import { Iconify } from '~/components'
 
+import Menu from './menu'
+
 export function ViewActions({ view }: { view: TabViewIndex }) {
   const [viewLayoutMap, setViewLayoutMap] = useAtom(viewLayoutMapAtom)
   const router = useRouter()
   return (
-    <MenuView
+    <Menu
       actions={[
         {
           id: 'mark-as-read',
@@ -59,6 +60,6 @@ export function ViewActions({ view }: { view: TabViewIndex }) {
       <Iconify
         icon="mingcute:more-2-fill"
       />
-    </MenuView>
+    </Menu>
   )
 }

package.json

@@ -20,6 +20,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@gorhom/portal": "^1.0.14",
     "@radix-ui/colors": "^3.0.0",
     "@react-native-menu/menu": "^1.1.2",
     "@react-navigation/elements": "^1.3.31",