diff --git a/src/components/Composer/implementation/index.tsx b/src/components/Composer/implementation/index.tsx index 39ce908cb2a9..c817c1dbc4fa 100755 --- a/src/components/Composer/implementation/index.tsx +++ b/src/components/Composer/implementation/index.tsx @@ -20,7 +20,6 @@ import {isMobileSafari, isSafari} from '@libs/Browser'; import {containsOnlyEmojis} from '@libs/EmojiUtils'; import {base64ToFile} from '@libs/fileDownload/FileUtils'; import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; -import variables from '@styles/variables'; import CONST from '@src/CONST'; const excludeNoStyles: Array = []; @@ -73,7 +72,6 @@ function Composer( start: selectionProp.start, end: selectionProp.end, }); - const [hasMultipleLines, setHasMultipleLines] = useState(false); const [isRendered, setIsRendered] = useState(false); // On mobile safari, the cursor will move from right to left with inputMode set to none during report transition @@ -349,15 +347,15 @@ function Composer( const inputStyleMemo = useMemo( () => [ StyleSheet.flatten([style, {outline: 'none'}]), - StyleUtils.getComposeTextAreaPadding(isComposerFullSize), + StyleUtils.getComposeTextAreaPadding(isComposerFullSize, textContainsOnlyEmojis), isMobileSafari() || isSafari() ? styles.rtlTextRenderForSafari : {}, scrollStyleMemo, StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), isComposerFullSize ? {height: '100%', maxHeight: 'none'} : undefined, - textContainsOnlyEmojis && hasMultipleLines ? styles.onlyEmojisTextLineHeight : {}, + textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}, ], - [style, styles.rtlTextRenderForSafari, styles.onlyEmojisTextLineHeight, scrollStyleMemo, hasMultipleLines, StyleUtils, maxLines, isComposerFullSize, textContainsOnlyEmojis], + [style, styles.rtlTextRenderForSafari, styles.onlyEmojisTextLineHeight, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize, textContainsOnlyEmojis], ); return ( @@ -379,7 +377,6 @@ function Composer( onSelectionChange={addCursorPositionToSelectionChange} onContentSizeChange={(e) => { setPrevHeight(e.nativeEvent.contentSize.height); - setHasMultipleLines(e.nativeEvent.contentSize.height > variables.componentSizeLarge); }} disabled={isDisabled} onKeyPress={handleKeyPress} diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index bbfa1e5515be..b5ceefa5f1b9 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -944,18 +944,21 @@ function getEmojiPickerListHeight(isRenderingShortcutRow: boolean, windowHeight: } /** - * Returns padding vertical based on number of lines + * Returns vertical padding based on number of lines. */ -function getComposeTextAreaPadding(isComposerFullSize: boolean): TextStyle { - let paddingValue = 5; +function getComposeTextAreaPadding(isComposerFullSize: boolean, textContainsOnlyEmojis: boolean): TextStyle { + let paddingTop = 8; + let paddingBottom = 8; // Issue #26222: If isComposerFullSize paddingValue will always be 5 to prevent padding jumps when adding multiple lines. if (!isComposerFullSize) { - paddingValue = 8; + paddingTop = 8; + paddingBottom = 8; } - return { - paddingTop: paddingValue, - paddingBottom: paddingValue, - }; + // We need to reduce the top padding because emojis have a bigger font height. + if (textContainsOnlyEmojis) { + paddingTop = 3; + } + return {paddingTop, paddingBottom}; } /**