Composer - Use sheet presentation on iOS (#4278)

* use sheet presentation + tweak spacing

* line up elements + add hitslop to cancel

* fixing spacing on replies

1 files changed, 32 insertions, 6 deletions

diff --git a/src/view/shell/Composer.tsx b/src/view/shell/Composer.tsx
index 17348a30c..ce53ffc01 100644
--- a/src/view/shell/Composer.tsx
+++ b/src/view/shell/Composer.tsx
@@ -1,11 +1,15 @@
-import React from 'react'
+import React, {useLayoutEffect} from 'react'
 import {Modal, View} from 'react-native'
+import {StatusBar} from 'expo-status-bar'
+import * as SystemUI from 'expo-system-ui'
 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 {useComposerState} from '#/state/shell/composer'
 import {ModalsContainer as LegacyModalsContainer} from '#/view/com/modals/Modal'
-import {useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
+import {getBackgroundColor, useThemeName} from '#/alf/util/useColorModeTheme'
 import {
   Outlet as PortalOutlet,
   Provider as PortalProvider,
@@ -19,15 +23,17 @@ export const Composer = observer(function ComposerImpl({}: {
   const state = useComposerState()
   const ref = useComposerCancelRef()
 
+  const open = !!state
+
   return (
     <Modal
       aria-modal
       accessibilityViewIsModal
-      visible={!!state}
-      presentationStyle="overFullScreen"
+      visible={open}
+      presentationStyle="formSheet"
       animationType="slide"
       onRequestClose={() => ref.current?.onPressCancel()}>
-      <View style={[t.atoms.bg, {flex: 1}]}>
+      <View style={[t.atoms.bg, a.flex_1]}>
         <LegacyModalProvider>
           <PortalProvider>
             <ComposePost
@@ -43,7 +49,27 @@ export const Composer = observer(function ComposerImpl({}: {
             <PortalOutlet />
           </PortalProvider>
         </LegacyModalProvider>
+        {isIOS && <IOSModalBackground active={open} />}
       </View>
     </Modal>
   )
 })
+
+// Generally, the backdrop of the app is the theme color, but when this is open
+// we want it to be black due to the modal being a form sheet.
+function IOSModalBackground({active}: {active: boolean}) {
+  const theme = useThemeName()
+
+  useLayoutEffect(() => {
+    SystemUI.setBackgroundColorAsync('black')
+
+    return () => {
+      SystemUI.setBackgroundColorAsync(getBackgroundColor(theme))
+    }
+  }, [theme])
+
+  // Set the status bar to light - however, only if the modal is active
+  // If we rely on this component being mounted to set this,
+  // there'll be a delay before it switches back to default.
+  return active ? <StatusBar style="light" animated /> : null
+}