diff --git a/app/screens/edit_post/edit_post.tsx b/app/screens/edit_post/edit_post.tsx index a0f07d953..c785727e8 100644 --- a/app/screens/edit_post/edit_post.tsx +++ b/app/screens/edit_post/edit_post.tsx @@ -3,7 +3,7 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'; import {useIntl} from 'react-intl'; -import {Alert, Keyboard, type LayoutChangeEvent, Platform, SafeAreaView, View} from 'react-native'; +import {Alert, Keyboard, type LayoutChangeEvent, Platform, SafeAreaView, View, StyleSheet} from 'react-native'; import {deletePost, editPost} from '@actions/remote/post'; import Autocomplete from '@components/autocomplete'; @@ -18,7 +18,6 @@ import {useInputPropagation} from '@hooks/input'; import useNavButtonPressed from '@hooks/navigation_button_pressed'; import PostError from '@screens/edit_post/post_error'; import {buildNavigationButton, dismissModal, setButtons} from '@screens/navigation'; -import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import EditPostInput, {type EditPostInputRef} from './edit_post_input'; @@ -27,21 +26,18 @@ import type {AvailableScreens} from '@typings/screens/navigation'; const AUTOCOMPLETE_SEPARATION = 8; -const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { - return { - body: { - flex: 1, - backgroundColor: changeOpacity(theme.centerChannelColor, 0.03), - }, - container: { - flex: 1, - }, - loader: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - }, - }; +const styles = StyleSheet.create({ + body: { + flex: 1, + }, + container: { + flex: 1, + }, + loader: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, }); const RIGHT_BUTTON = buildNavigationButton('edit-post', 'edit_post.save.button'); @@ -70,7 +66,6 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach const theme = useTheme(); const intl = useIntl(); const serverUrl = useServerUrl(); - const styles = getStyleSheet(theme); useEffect(() => { toggleSaveButton(false); @@ -202,6 +197,8 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach const autocompletePosition = overlap + AUTOCOMPLETE_SEPARATION; const autocompleteAvailableSpace = containerHeight - autocompletePosition; + const inputHeight = containerHeight - overlap; + const [animatedAutocompletePosition, animatedAutocompleteAvailableSpace] = useAutocompleteDefaultAnimatedValues(autocompletePosition, autocompleteAvailableSpace); if (isUpdating) { @@ -230,6 +227,7 @@ const EditPost = ({componentId, maxPostSize, post, closeButtonId, hasFilesAttach /> } ({ }, })); -const HEIGHT_DIFF = Platform.select({android: 40, default: 30}); - export type EditPostInputRef = { focus: () => void; } type PostInputProps = { + inputHeight: number; message: string; hasError: boolean; onTextSelectionChange: (curPos: number) => void; @@ -39,21 +38,23 @@ type PostInputProps = { } const EditPostInput = forwardRef(({ - message, onChangeText, onTextSelectionChange, hasError, + inputHeight, + message, + onChangeText, + onTextSelectionChange, + hasError, }: PostInputProps, ref) => { const intl = useIntl(); const theme = useTheme(); const styles = getStyleSheet(theme); - const {height} = useWindowDimensions(); const managedConfig = useManagedConfig(); - const textInputHeight = (height / 2) - HEIGHT_DIFF; const disableCopyAndPaste = managedConfig.copyAndPasteProtection === 'true'; const inputRef = useRef(); const inputStyle = useMemo(() => { - return [styles.input, {height: textInputHeight}]; - }, [textInputHeight, styles]); + return [styles.input, {height: inputHeight}]; + }, [inputHeight, styles]); const onSelectionChange = useCallback((event: NativeSyntheticEvent) => { const curPos = event.nativeEvent.selection.end; @@ -63,8 +64,8 @@ const EditPostInput = forwardRef(({ const containerStyle = useMemo(() => [ styles.inputContainer, hasError && {marginTop: 0}, - {height: textInputHeight}, - ], [styles, textInputHeight]); + {height: inputHeight}, + ], [styles, inputHeight]); useImperativeHandle(ref, () => ({ focus: () => inputRef.current?.focus(),