[jank] add composer route with presentation formSheet

src/Navigation.tsx

@@ -54,6 +54,7 @@ import {
   shouldRequestEmailConfirmation,
 } from './state/shell/reminders'
 import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
+import {ComposerScreen} from './view/screens/Composer'
 import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
 import {DebugModScreen} from './view/screens/DebugMod'
 import {FeedsScreen} from './view/screens/Feeds'
@@ -103,6 +104,16 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
 
   return (
     <>
+      <Stack.Screen
+        name="Composer"
+        getComponent={() => ComposerScreen}
+        options={{
+          title: title(msg`Compose`),
+          requireAuth: true,
+          presentation: 'formSheet',
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name="NotFound"
         getComponent={() => NotFoundScreen}

src/lib/routes/types.ts

@@ -4,6 +4,7 @@ import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
 export type {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 export type CommonNavigatorParams = {
+  Composer: undefined
   NotFound: undefined
   Lists: undefined
   Moderation: undefined

src/view/com/composer/Composer.tsx

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

src/view/screens/Composer.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {useComposerState} from '#/state/shell/composer'
+import {ComposePost} from '../com/composer/Composer'
+
+export function ComposerScreen() {
+  const state = useComposerState()
+  const navigation = useNavigation<NavigationProp>()
+
+  if (!state) {
+    navigation.goBack()
+    return null
+  }
+
+  return (
+    <ComposePost
+      replyTo={state.replyTo}
+      quote={state.quote}
+      onPost={state.onPost}
+      mention={state.mention}
+      text={state.text}
+    />
+  )
+}

src/view/shell/Composer.tsx

@@ -1,77 +1,19 @@
-import React, {useEffect} from 'react'
+import {useEffect} from 'react'
+import {useNavigation} from '@react-navigation/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,
-}: {
-  winHeight: number
-}) {
+import {NavigationProp} from '#/lib/routes/types'
+import {useComposerState} from 'state/shell/composer'
+
+export const Composer = observer(function ComposerImpl() {
   const state = useComposerState()
-  const pal = usePalette('default')
-  const initInterp = useAnimatedValue(0)
+  const navigation = useNavigation<NavigationProp>()
 
   useEffect(() => {
     if (state) {
-      Animated.timing(initInterp, {
-        toValue: 1,
-        duration: 300,
-        easing: Easing.out(Easing.exp),
-        useNativeDriver: true,
-      }).start()
-    } else {
-      initInterp.setValue(0)
+      navigation.navigate('Composer')
     }
-  }, [initInterp, state])
-  const wrapperAnimStyle = {
-    transform: [
-      {
-        translateY: initInterp.interpolate({
-          inputRange: [0, 1],
-          outputRange: [winHeight, 0],
-        }),
-      },
-    ],
-  }
+  }, [state, navigation])
 
-  // rendering
-  // =
-
-  if (!state) {
-    return <View />
-  }
-
-  return (
-    <Animated.View
-      style={[styles.wrapper, pal.view, wrapperAnimStyle]}
-      aria-modal
-      accessibilityViewIsModal>
-      <ComposePost
-        replyTo={state.replyTo}
-        onPost={state.onPost}
-        quote={state.quote}
-        mention={state.mention}
-        text={state.text}
-        imageUris={state.imageUris}
-      />
-    </Animated.View>
-  )
-})
-
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    width: '100%',
-    ...Platform.select({
-      ios: {
-        paddingTop: 24,
-      },
-    }),
-  },
+  return null
 })