2 files changed, 91 insertions, 0 deletions
diff --git a/src/view/shell/mobile/Composer.tsx b/src/view/shell/mobile/Composer.tsx
new file mode 100644
index 000000000..62bc7304d
--- /dev/null
+++ b/src/view/shell/mobile/Composer.tsx
@@ -0,0 +1,83 @@
+import React, {useEffect} from 'react'
+import {observer} from 'mobx-react-lite'
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolate,
+  Easing,
+} from 'react-native-reanimated'
+import {IconProp} from '@fortawesome/fontawesome-svg-core'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {HomeIcon, UserGroupIcon, BellIcon} from '../../lib/icons'
+import {ComposePost} from '../../com/composer/ComposePost'
+import {useStores} from '../../../state'
+import {ComposerOpts} from '../../../state/models/shell'
+import {s, colors} from '../../lib/styles'
+
+export const Composer = observer(
+  ({
+    active,
+    winHeight,
+    replyTo,
+    onPost,
+    onClose,
+  }: {
+    active: boolean
+    winHeight: number
+    replyTo?: ComposerOpts['replyTo']
+    onPost?: ComposerOpts['onPost']
+    onClose: () => void
+  }) => {
+    const store = useStores()
+    const initInterp = useSharedValue<number>(0)
+
+    useEffect(() => {
+      if (active) {
+        initInterp.value = withTiming(1, {
+          duration: 300,
+          easing: Easing.out(Easing.exp),
+        })
+      } else {
+        initInterp.value = 0
+      }
+    }, [initInterp, active])
+    const wrapperAnimStyle = useAnimatedStyle(() => ({
+      top: interpolate(initInterp.value, [0, 1.0], [winHeight, 0]),
+    }))
+
+    // events
+    // =
+
+    // rendering
+    // =
+
+    if (!active) {
+      return <View />
+    }
+
+    return (
+      <Animated.View style={[styles.wrapper, wrapperAnimStyle]}>
+        <ComposePost replyTo={replyTo} onPost={onPost} onClose={onClose} />
+      </Animated.View>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: '100%',
+    backgroundColor: '#fff',
+    paddingTop: 20,
+  },
+})
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index 7b5dd4e91..60188f89f 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -30,6 +30,7 @@ import {Login} from '../../screens/Login'
 import {Modal} from '../../com/modals/Modal'
 import {MainMenu} from './MainMenu'
 import {TabsSelector} from './TabsSelector'
+import {Composer} from './Composer'
 import {s, colors} from '../../lib/styles'
 import {GridIcon, HomeIcon, BellIcon} from '../../lib/icons'
 
@@ -217,6 +218,13 @@ export const MobileShell: React.FC = observer(() => {
         active={isTabsSelectorActive}
         onClose={() => setTabsSelectorActive(false)}
       />
+      <Composer
+        active={store.shell.isComposerActive}
+        onClose={() => store.shell.closeComposer()}
+        winHeight={winDim.height}
+        replyTo={store.shell.composerOpts?.replyTo}
+        onPost={store.shell.composerOpts?.onPost}
+      />
     </View>
   )
 })