Revert "use KeyboardPadding over KeyboardAvoidingView"

This reverts commit 5122c20e56.

src/components/KeyboardPadding.android.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import {useKeyboardHandler} from 'react-native-keyboard-controller'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated'
+
+export function KeyboardPadding({maxHeight}: {maxHeight?: number}) {
+  const keyboardHeight = useSharedValue(0)
+
+  useKeyboardHandler(
+    {
+      onMove: e => {
+        'worklet'
+
+        if (maxHeight && e.height > maxHeight) {
+          keyboardHeight.value = maxHeight
+        } else {
+          keyboardHeight.value = e.height
+        }
+      },
+    },
+    [maxHeight],
+  )
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: keyboardHeight.value,
+  }))
+
+  return <Animated.View style={animatedStyle} />
+}

src/components/KeyboardPadding.tsx

@@ -1,40 +1,3 @@
-import React from 'react'
+export function KeyboardPadding({maxHeight: _}: {maxHeight?: number}) {
-import {useKeyboardHandler} from 'react-native-keyboard-controller'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated'
-
-import {isAndroid} from 'platform/detection'
-
-export function KeyboardPadding({androidOnly = true}: {androidOnly?: boolean}) {
-  if (!isAndroid && androidOnly) {
   return null
-  }
-  return <KeyboardPaddingInner />
-}
-
-function KeyboardPaddingInner({maxHeight}: {maxHeight?: number}) {
-  const keyboardHeight = useSharedValue(0)
-
-  useKeyboardHandler(
-    {
-      onMove: e => {
-        'worklet'
-
-        if (maxHeight && e.height > maxHeight) {
-          keyboardHeight.value = maxHeight
-        } else {
-          keyboardHeight.value = e.height
-        }
-      },
-    },
-    [maxHeight],
-  )
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    height: keyboardHeight.value,
-  }))
-
-  return <Animated.View style={animatedStyle} />
 }

src/view/com/composer/Composer.tsx

@@ -13,7 +13,10 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import {KeyboardStickyView} from 'react-native-keyboard-controller'
+import {
+  KeyboardAvoidingView,
+  KeyboardStickyView,
+} from 'react-native-keyboard-controller'
 import Animated, {
   interpolateColor,
   useAnimatedStyle,
@@ -52,13 +55,14 @@ import {useComposerControls} from '#/state/shell/composer'
 import {useAnalytics} from 'lib/analytics/analytics'
 import * as apilib from 'lib/api/index'
 import {HITSLOP_10, MAX_GRAPHEME_LENGTH} from 'lib/constants'
+import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {cleanError} from 'lib/strings/errors'
 import {insertMentionAt} from 'lib/strings/mention-manip'
 import {shortenLinks} from 'lib/strings/rich-text-manip'
 import {colors, gradients, s} from 'lib/styles'
-import {isIOS, isNative, isWeb} from 'platform/detection'
+import {isAndroid, isIOS, isNative, isWeb} from 'platform/detection'
 import {useDialogStateControlContext} from 'state/dialogs'
 import {GalleryModel} from 'state/models/media/gallery'
 import {ComposerOpts} from 'state/shell/composer'
@@ -66,7 +70,6 @@ import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
-import {KeyboardPadding} from '#/components/KeyboardPadding'
 import * as Prompt from '#/components/Prompt'
 import {QuoteEmbed, QuoteX} from '../util/post-embeds/QuoteEmbed'
 import {Text} from '../util/text/Text'
@@ -122,6 +125,7 @@ export const ComposePost = observer(function ComposePost({
   const {closeAllDialogs} = useDialogStateControlContext()
   const t = useTheme()
 
+  const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
   const [isProcessing, setIsProcessing] = useState(false)
   const [processingState, setProcessingState] = useState('')
   const [error, setError] = useState('')
@@ -157,6 +161,13 @@ export const ComposePost = observer(function ComposePost({
   }, [closeComposer])
 
   const insets = useSafeAreaInsets()
+  const viewStyles = useMemo(
+    () => ({
+      paddingBottom:
+        isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
+    }),
+    [insets, isKeyboardVisible],
+  )
 
   const hasScrolled = useSharedValue(0)
   const scrollHandler = useAnimatedScrollHandler({
@@ -390,11 +401,12 @@ export const ComposePost = observer(function ComposePost({
 
   return (
     <>
-      <View
+      <KeyboardAvoidingView
-        style={[s.flex1]}
         testID="composePostView"
-        aria-modal
+        behavior="padding"
-        accessibilityViewIsModal>
+        style={s.flex1}
+        keyboardVerticalOffset={replyTo ? 60 : isAndroid ? 120 : 100}>
+        <View style={[s.flex1, viewStyles]} aria-modal accessibilityViewIsModal>
           <Animated.View
             style={[
               styles.topbar,
@@ -556,8 +568,8 @@ export const ComposePost = observer(function ComposePost({
             ) : undefined}
           </Animated.ScrollView>
           <SuggestedLanguage text={richtext.text} />
-        <KeyboardPadding androidOnly={false} />
         </View>
+      </KeyboardAvoidingView>
       <KeyboardStickyView
         offset={{closed: isIOS ? -insets.bottom : 0, opened: 0}}>
         {replyTo ? null : (