switch back to formsheet

src/view/com/composer/Composer.tsx

@@ -43,14 +43,13 @@ import {useComposerControls} from '#/state/shell/composer'
 import {useAnalytics} from 'lib/analytics/analytics'
 import * as apilib from 'lib/api/index'
 import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
-import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {cleanError} from 'lib/strings/errors'
 import {insertMentionAt} from 'lib/strings/mention-manip'
 import {shortenLinks} from 'lib/strings/rich-text-manip'
 import {colors, gradients, s} from 'lib/styles'
-import {isAndroid, isIOS, isNative, isWeb} from 'platform/detection'
+import {isNative, isWeb} from 'platform/detection'
 import {useDialogStateControlContext} from 'state/dialogs'
 import {GalleryModel} from 'state/models/media/gallery'
 import {ComposerOpts} from 'state/shell/composer'
@@ -112,7 +111,6 @@ export const ComposePost = observer(function ComposePost({
   const discardPromptControl = Prompt.usePromptControl()
   const {closeAllDialogs} = useDialogStateControlContext()
 
-  const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
   const [isProcessing, setIsProcessing] = useState(false)
   const [processingState, setProcessingState] = useState('')
   const [error, setError] = useState('')
@@ -150,11 +148,10 @@ export const ComposePost = observer(function ComposePost({
   const insets = useSafeAreaInsets()
   const viewStyles = useMemo(
     () => ({
-      paddingBottom:
+      paddingBottom: isNative ? insets.bottom : 0,
-        isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
+      paddingTop: isMobile && isWeb ? 15 : 0,
-      paddingTop: isMobile && isWeb ? 15 : insets.top,
     }),
-    [insets, isKeyboardVisible, isMobile],
+    [insets, isMobile],
   )
 
   const onPressCancel = useCallback(() => {
@@ -358,6 +355,7 @@ export const ComposePost = observer(function ComposePost({
     <KeyboardAvoidingView
       testID="composePostView"
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={insets.bottom}
       style={a.flex_1}>
       <View style={[a.flex_1, viewStyles]} aria-modal accessibilityViewIsModal>
         <View style={[styles.topbar, isDesktop && styles.topbarDesktop]}>
@@ -569,10 +567,8 @@ const styles = StyleSheet.create({
   topbar: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: -14,
-    paddingBottom: 4,
     paddingHorizontal: 20,
-    height: 50,
+    height: 55,
     gap: 4,
   },
   topbarDesktop: {

src/view/shell/Composer.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import {Modal} from 'react-native'
+import {StatusBar} from 'expo-status-bar'
 import {observer} from 'mobx-react-lite'
 
+import {isIOS} from '#/platform/detection'
 import {Provider as LegacyModalProvider} from '#/state/modals'
 import {useComposerState} from 'state/shell/composer'
 import {ModalsContainer as LegacyModalsContainer} from '#/view/com/modals/Modal'
@@ -22,7 +24,7 @@ export const Composer = observer(function ComposerImpl({}: {
       aria-modal
       accessibilityViewIsModal
       visible={!!state}
-      presentationStyle="fullScreen"
+      presentationStyle="formSheet"
       animationType="slide"
       onRequestClose={() => ref.current?.onPressCancel()}>
       <LegacyModalProvider>
@@ -40,6 +42,7 @@ export const Composer = observer(function ComposerImpl({}: {
           <PortalOutlet />
         </PortalProvider>
       </LegacyModalProvider>
+      {isIOS && <StatusBar style="light" />}
     </Modal>
   )
 })