put dropdown in fullscreenoverlay on iOS (#4284)

1 files changed, 19 insertions, 9 deletions

diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx
index 2285b0615..14b97161d 100644
--- a/src/view/com/util/forms/DropdownButton.tsx
+++ b/src/view/com/util/forms/DropdownButton.tsx
@@ -2,6 +2,7 @@ import React, {PropsWithChildren, useMemo, useRef} from 'react'
 import {
   Dimensions,
   GestureResponderEvent,
+  Platform,
   StyleProp,
   StyleSheet,
   TouchableOpacity,
@@ -10,18 +11,20 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import RootSiblings from 'react-native-root-siblings'
+import {FullWindowOverlay} from 'react-native-screens'
+import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Text} from '../text/Text'
-import {Button, ButtonType} from './Button'
-import {colors} from 'lib/styles'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {HITSLOP_10} from 'lib/constants'
 import {usePalette} from 'lib/hooks/usePalette'
+import {colors} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
-import {HITSLOP_10} from 'lib/constants'
-import {useLingui} from '@lingui/react'
-import {msg} from '@lingui/macro'
 import {isWeb} from 'platform/detection'
+import {Text} from '../text/Text'
+import {Button, ButtonType} from './Button'
 
 const ESTIMATED_BTN_HEIGHT = 50
 const ESTIMATED_SEP_HEIGHT = 16
@@ -239,7 +242,7 @@ const DropdownItems = ({
   // - (On mobile) be buttons by default, accept `label` and `nativeID`
   // props, and always have an explicit label
   return (
-    <>
+    <Wrapper>
       {/* This TouchableWithoutFeedback renders the background so if the user clicks outside, the dropdown closes */}
       <TouchableWithoutFeedback
         onPress={onOuterPress}
@@ -304,10 +307,17 @@ const DropdownItems = ({
           return null
         })}
       </View>
-    </>
+    </Wrapper>
   )
 }
 
+// on iOS, due to formSheet presentation style, we need to render the overlay
+// as a full screen overlay
+const Wrapper = Platform.select({
+  ios: FullWindowOverlay,
+  default: ({children}) => <>{children}</>,
+})
+
 function isSep(item: DropdownItem): item is DropdownItemSeparator {
   return 'sep' in item && item.sep
 }