2 files changed, 58 insertions, 27 deletions
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 12e57c411..5746454c2 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -1,7 +1,13 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {
   ActivityIndicator,
-  BackHandler,
   Keyboard,
   ScrollView,
   StyleSheet,
@@ -79,6 +85,10 @@ import {TextInput, TextInputRef} from './text-input/TextInput'
 import {ThreadgateBtn} from './threadgate/ThreadgateBtn'
 import {useExternalLinkFetch} from './useExternalLinkFetch'
 
+type CancelRef = {
+  onPressCancel: () => void
+}
+
 type Props = ComposerOpts
 export const ComposePost = observer(function ComposePost({
   replyTo,
@@ -88,7 +98,10 @@ export const ComposePost = observer(function ComposePost({
   openPicker,
   text: initText,
   imageUris: initImageUris,
-}: Props) {
+  cancelRef,
+}: Props & {
+  cancelRef?: React.RefObject<CancelRef>
+}) {
   const {currentAccount} = useSession()
   const agent = useAgent()
   const {data: currentProfile} = useProfileQuery({did: currentAccount!.did})
@@ -145,7 +158,7 @@ export const ComposePost = observer(function ComposePost({
     () => ({
       paddingBottom:
         isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
-      paddingTop: isAndroid ? insets.top : isMobile ? 15 : 0,
+      paddingTop: isMobile && isWeb ? 15 : insets.top,
     }),
     [insets, isKeyboardVisible, isMobile],
   )
@@ -167,23 +180,8 @@ export const ComposePost = observer(function ComposePost({
     discardPromptControl,
     onClose,
   ])
-  // android back button
-  useEffect(() => {
-    if (!isAndroid) {
-      return
-    }
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        onPressCancel()
-        return true
-      },
-    )
 
-    return () => {
-      backHandler.remove()
-    }
-  }, [onPressCancel])
+  useImperativeHandle(cancelRef, () => ({onPressCancel}))
 
   // listen to escape key on desktop web
   const onEscape = useCallback(
@@ -583,19 +581,18 @@ export const ComposePost = observer(function ComposePost({
   )
 })
 
+export function useComposerCancelRef() {
+  return useRef<CancelRef>(null)
+}
+
 const styles = StyleSheet.create({
-  outer: {
-    flexDirection: 'column',
-    flex: 1,
-    height: '100%',
-  },
   topbar: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingTop: 6,
+    marginTop: -14,
     paddingBottom: 4,
     paddingHorizontal: 20,
-    height: 55,
+    height: 50,
     gap: 4,
   },
   topbarDesktop: {
diff --git a/src/view/com/composer/KeyboardAccessory.tsx b/src/view/com/composer/KeyboardAccessory.tsx
new file mode 100644
index 000000000..983a87dae
--- /dev/null
+++ b/src/view/com/composer/KeyboardAccessory.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import {View} from 'react-native'
+import {KeyboardStickyView} from 'react-native-keyboard-controller'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+
+import {isWeb} from '#/platform/detection'
+import {atoms as a, useTheme} from '#/alf'
+
+export function KeyboardAccessory({children}: {children: React.ReactNode}) {
+  const t = useTheme()
+  const {bottom} = useSafeAreaInsets()
+
+  const style = [
+    a.flex_row,
+    a.py_xs,
+    a.pl_sm,
+    a.pr_xl,
+    a.align_center,
+    a.border_t,
+    t.atoms.border_contrast_medium,
+    t.atoms.bg,
+  ]
+
+  // todo: when iPad support is added, it should also not use the KeyboardStickyView
+  if (isWeb) {
+    return <View style={style}>{children}</View>
+  }
+
+  return (
+    <KeyboardStickyView offset={{closed: -bottom}} style={style}>
+      {children}
+    </KeyboardStickyView>
+  )
+}