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, + }, })