use <Modal> to display composer

src/view/com/composer/Composer.tsx

@@ -139,7 +139,7 @@ export const ComposePost = observer(function ComposePost({
     () => ({
       paddingBottom:
         isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
-      paddingTop: isAndroid ? insets.top : isMobile ? 15 : 0,
+      paddingTop: isAndroid ? insets.top : isMobile && isWeb ? 15 : 0,
     }),
     [insets, isKeyboardVisible, isMobile],
   )

src/view/shell/Composer.tsx

@@ -1,77 +1,30 @@
-import React, {useEffect} from 'react'
+import React from 'react'
+import {Modal} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {Animated, Easing, Platform, StyleSheet, View} from 'react-native'
-import {ComposePost} from '../com/composer/Composer'
-import {useComposerState} from 'state/shell/composer'
-import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
-import {usePalette} from 'lib/hooks/usePalette'
 
-export const Composer = observer(function ComposerImpl({
-  winHeight,
-}: {
+import {useComposerState} from 'state/shell/composer'
+import {ComposePost} from '../com/composer/Composer'
+
+export const Composer = observer(function ComposerImpl({}: {
   winHeight: number
 }) {
   const state = useComposerState()
-  const pal = usePalette('default')
-  const initInterp = useAnimatedValue(0)
-
-  useEffect(() => {
-    if (state) {
-      Animated.timing(initInterp, {
-        toValue: 1,
-        duration: 300,
-        easing: Easing.out(Easing.exp),
-        useNativeDriver: true,
-      }).start()
-    } else {
-      initInterp.setValue(0)
-    }
-  }, [initInterp, state])
-  const wrapperAnimStyle = {
-    transform: [
-      {
-        translateY: initInterp.interpolate({
-          inputRange: [0, 1],
-          outputRange: [winHeight, 0],
-        }),
-      },
-    ],
-  }
-
-  // rendering
-  // =
-
-  if (!state) {
-    return <View />
-  }
 
   return (
-    <Animated.View
-      style={[styles.wrapper, pal.view, wrapperAnimStyle]}
+    <Modal
       aria-modal
-      accessibilityViewIsModal>
+      accessibilityViewIsModal
+      visible={!!state}
+      presentationStyle="formSheet"
+      animationType="slide">
       <ComposePost
-        replyTo={state.replyTo}
-        onPost={state.onPost}
-        quote={state.quote}
-        mention={state.mention}
-        text={state.text}
-        imageUris={state.imageUris}
+        replyTo={state?.replyTo}
+        onPost={state?.onPost}
+        quote={state?.quote}
+        mention={state?.mention}
+        text={state?.text}
+        imageUris={state?.imageUris}
       />
-    </Animated.View>
+    </Modal>
   )
 })
-
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    width: '100%',
-    ...Platform.select({
-      ios: {
-        paddingTop: 24,
-      },
-    }),
-  },
-})