put dropdown in fullscreenoverlay on iOS (#4284)

3 files changed, 37 insertions, 25 deletions

diff --git a/src/view/com/composer/select-language/SelectLangBtn.tsx b/src/view/com/composer/select-language/SelectLangBtn.tsx
index 785622225..7a086789a 100644
--- a/src/view/com/composer/select-language/SelectLangBtn.tsx
+++ b/src/view/com/composer/select-language/SelectLangBtn.tsx
@@ -1,27 +1,28 @@
 import React, {useCallback, useMemo} from 'react'
-import {StyleSheet, Keyboard} from 'react-native'
+import {Keyboard, StyleSheet} from 'react-native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
-import {Text} from 'view/com/util/text/Text'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useModalControls} from '#/state/modals'
+import {
+  hasPostLanguage,
+  toPostLanguages,
+  useLanguagePrefs,
+  useLanguagePrefsApi,
+} from '#/state/preferences/languages'
+import {usePalette} from 'lib/hooks/usePalette'
+import {isNative} from 'platform/detection'
 import {
   DropdownButton,
   DropdownItem,
   DropdownItemButton,
 } from 'view/com/util/forms/DropdownButton'
-import {usePalette} from 'lib/hooks/usePalette'
-import {isNative} from 'platform/detection'
+import {Text} from 'view/com/util/text/Text'
 import {codeToLanguageName} from '../../../../locale/helpers'
-import {useModalControls} from '#/state/modals'
-import {
-  useLanguagePrefs,
-  useLanguagePrefsApi,
-  toPostLanguages,
-  hasPostLanguage,
-} from '#/state/preferences/languages'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 
 export function SelectLangBtn() {
   const pal = usePalette('default')
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
 }
diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index 00233f66a..c9c604f11 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -1,15 +1,16 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import Animated, {FadeIn, FadeInDown, FadeOut} from 'react-native-reanimated'
-import {ComposePost} from '../com/composer/Composer'
-import {useComposerState} from 'state/shell/composer'
+
+import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
+import {useComposerState} from 'state/shell/composer'
 import {
   EmojiPicker,
   EmojiPickerState,
 } from 'view/com/composer/text-input/web/EmojiPicker.web'
+import {ComposePost} from '../com/composer/Composer'
 
 const BOTTOM_BAR_HEIGHT = 61