diff --git a/src/App.native.tsx b/src/App.native.tsx
index b60d024d5a..9fa82e9cdb 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -4,7 +4,6 @@ import 'view/icons'
import React, {useEffect, useState} from 'react'
import {GestureHandlerRootView} from 'react-native-gesture-handler'
-import {KeyboardProvider} from 'react-native-keyboard-controller'
import {RootSiblingParent} from 'react-native-root-siblings'
import {
initialWindowMetrics,
@@ -157,9 +156,7 @@ function App() {
-
-
-
+
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 04f82f3dbf..5afcf2b3f6 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -43,13 +43,14 @@ import {useComposerControls} from '#/state/shell/composer'
import {useAnalytics} from 'lib/analytics/analytics'
import * as apilib from 'lib/api/index'
import {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'
@@ -65,7 +66,6 @@ import {UserAvatar} from '../util/UserAvatar'
import {CharProgress} from './char-progress/CharProgress'
import {ExternalEmbed} from './ExternalEmbed'
import {GifAltText} from './GifAltText'
-import {KeyboardAccessory} from './KeyboardAccessory'
import {LabelsBtn} from './labels/LabelsBtn'
import {Gallery} from './photos/Gallery'
import {OpenCameraBtn} from './photos/OpenCameraBtn'
@@ -112,6 +112,7 @@ export const ComposePost = observer(function ComposePost({
const discardPromptControl = Prompt.usePromptControl()
const {closeAllDialogs} = useDialogStateControlContext()
+ const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
const [isProcessing, setIsProcessing] = useState(false)
const [processingState, setProcessingState] = useState('')
const [error, setError] = useState('')
@@ -149,10 +150,11 @@ export const ComposePost = observer(function ComposePost({
const insets = useSafeAreaInsets()
const viewStyles = useMemo(
() => ({
- paddingBottom: isNative ? insets.bottom + (isIOS ? 80 : 0) : 0,
- paddingTop: isIOS ? insets.top - 12 : isMobile && isWeb ? 15 : 0,
+ paddingBottom:
+ isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
+ paddingTop: isMobile && isWeb ? 15 : 0,
}),
- [insets, isMobile],
+ [insets, isKeyboardVisible, isMobile],
)
const onPressCancel = useCallback(() => {
@@ -353,202 +355,199 @@ export const ComposePost = observer(function ComposePost({
)
return (
- <>
-
-
-
-
-
- Cancel
-
-
-
- {isProcessing ? (
- <>
- {processingState}
-
-
-
- >
- ) : (
- <>
-
+
+
+
+
+ Cancel
+
+
+
+ {isProcessing ? (
+ <>
+ {processingState}
+
+
+
+ >
+ ) : (
+ <>
+
+ {replyTo ? null : (
+
- {replyTo ? null : (
-
- )}
- {canPost ? (
-
-
-
- {replyTo ? (
- Reply
- ) : (
- Post
- )}
-
-
-
- ) : (
-
-
- Post
+ )}
+ {canPost ? (
+
+
+
+ {replyTo ? (
+ Reply
+ ) : (
+ Post
+ )}
-
- )}
- >
- )}
-
- {requireAltTextEnabled && gallery.needsAltText && (
-
-
-
-
-
- One or more images is missing alt text.
-
-
- )}
- {error !== '' && (
-
-
-
-
- {error}
-
- )}
-
- {replyTo ? : undefined}
-
-
-
-
-
-
-
- {gallery.isEmpty && extLink && (
-
- {
- setExtLink(undefined)
- setExtGif(undefined)
- }}
- />
-
-
- )}
- {quote ? (
-
-
-
+
+
+ ) : (
+
+
+ Post
+
- {quote.uri !== initQuote?.uri && (
- setQuote(undefined)} />
- )}
-
- ) : undefined}
-
-
+ )}
+ >
+ )}
-
+ {requireAltTextEnabled && gallery.needsAltText && (
+
+
+
+
+
+ One or more images is missing alt text.
+
+
+ )}
+ {error !== '' && (
+
+
+
+
+ {error}
+
+ )}
+
+ {replyTo ? : undefined}
-
-
-
-
-
- {!isMobile ? (
-
- ) : null}
+
+
+
+
+
+
+ {gallery.isEmpty && extLink && (
+
+ {
+ setExtLink(undefined)
+ setExtGif(undefined)
+ }}
+ />
+
+
+ )}
+ {quote ? (
+
+
+
+
+ {quote.uri !== initQuote?.uri && (
+ setQuote(undefined)} />
+ )}
+
+ ) : undefined}
+
+
+
+
+
+
+
+ {!isMobile ? (
+
+ ) : null}
+
+
+
+
-
-
-
-
+
- >
+
)
})
@@ -640,4 +639,12 @@ const styles = StyleSheet.create({
marginHorizontal: 10,
marginBottom: 4,
},
+ bottomBar: {
+ flexDirection: 'row',
+ paddingVertical: 4,
+ paddingLeft: 15,
+ paddingRight: 20,
+ alignItems: 'center',
+ borderTopWidth: 1,
+ },
})