diff --git a/package.json b/package.json
index 8b4da4ea43..cb61dd22be 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-masked-view/masked-view": "0.3.1",
+ "@react-native-menu/menu": "^1.1.2",
"@react-native-picker/picker": "2.7.7",
"@react-navigation/bottom-tabs": "^6.6.1",
"@react-navigation/drawer": "^6.7.2",
diff --git a/src/view/com/util/forms/NativeDropdown.tsx b/src/view/com/util/forms/NativeDropdown.tsx
index c8e5fb2daf..d4401d3385 100644
--- a/src/view/com/util/forms/NativeDropdown.tsx
+++ b/src/view/com/util/forms/NativeDropdown.tsx
@@ -1,9 +1,15 @@
import React from 'react'
-import {Platform, Pressable, StyleSheet, View, ViewStyle} from 'react-native'
+import {
+ NativeSyntheticEvent,
+ Platform,
+ Pressable,
+ StyleSheet,
+ View,
+ ViewStyle,
+} from 'react-native'
import {IconProp} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import * as DropdownMenu from 'zeego/dropdown-menu'
-import {MenuItemCommonProps} from 'zeego/lib/typescript/menu'
+import {MenuAction, MenuView, NativeActionEvent} from '@react-native-menu/menu'
import {HITSLOP_10} from 'lib/constants'
import {usePalette} from 'lib/hooks/usePalette'
@@ -175,6 +181,33 @@ export function NativeDropdown({
const dropDownBackgroundColor =
theme.colorScheme === 'dark' ? pal.btn : pal.viewLight
+ const actions = React.useMemo(() => {
+ const _actions: MenuAction[] = []
+ let subGroup: MenuAction[] = []
+ for (const item of items) {
+ if (item.label === 'separator') {
+ if (subGroup) {
+ _actions.push({
+ title: 'Subgroup',
+ subactions: subGroup,
+ displayInline: true,
+ })
+ }
+ subGroup = []
+ } else {
+ subGroup.push({
+ title: item.label,
+ })
+ }
+ }
+ return _actions
+ }, [items])
+
+ const onPressAction = (e: NativeActionEvent) => {
+ const item = items.find(item => item.label === e.nativeEvent.event)
+ item?.onPress?.()
+ }
+
return (
<>
{isIOS && isOpen && (
@@ -182,71 +215,72 @@ export function NativeDropdown({
)}
-
-
- {children}
-
-
- {items.map((item, index) => {
- if (item.label === 'separator') {
- return (
-
- )
- }
- if (index > 1 && items[index - 1].label === 'separator') {
- return (
-
-
- {item.label}
- {item.icon && (
-
-
-
- )}
-
-
- )
- }
- return (
-
- {item.label}
- {item.icon && (
-
-
-
- )}
-
- )
- })}
-
-
+
+ {/**/}
+ {/* */}
+ {/* {children}*/}
+ {/* */}
+ {/* */}
+ {/* {items.map((item, index) => {*/}
+ {/* if (item.label === 'separator') {*/}
+ {/* return (*/}
+ {/* */}
+ {/* )*/}
+ {/* }*/}
+ {/* if (index > 1 && items[index - 1].label === 'separator') {*/}
+ {/* return (*/}
+ {/* */}
+ {/* */}
+ {/* {item.label}*/}
+ {/* {item.icon && (*/}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* )}*/}
+ {/* */}
+ {/* */}
+ {/* )*/}
+ {/* }*/}
+ {/* return (*/}
+ {/* */}
+ {/* {item.label}*/}
+ {/* {item.icon && (*/}
+ {/* */}
+ {/* */}
+ {/* */}
+ {/* )}*/}
+ {/* */}
+ {/* )*/}
+ {/* })}*/}
+ {/* */}
+ {/**/}
>
)
}
diff --git a/yarn.lock b/yarn.lock
index 08ddd5648f..1a70dba863 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5619,6 +5619,11 @@
resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.1.tgz#5bd76f17004a6ccbcec03856893777ee91f23d29"
integrity sha512-uVm8U6nwFIlUd1iDIB5cS+lDadApKR+l8k4k84d9hn+GN4lzAIJhUZ9syYX7c022MxNgAlbxoFLt0pqKoyaAGg==
+"@react-native-menu/menu@^1.1.2":
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-1.1.2.tgz#972406d25296a0d01614dc36fae7884c2a08dafd"
+ integrity sha512-I7JWiwmIwRp+Tee2OJHPwzVKdLjzgUkdChHQ75oyEWo1YcVsXEjLVGmxWCTA6JExzS6SQW/ACmjuXLJFTvu9Pw==
+
"@react-native-picker/picker@2.7.7":
version "2.7.7"
resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.7.7.tgz#6e19c3a72a482be015f5194794e6c14efe8762e8"