diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 9c380eb336c3..5423216a8876 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -12,6 +12,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable'; import * as EmojiUtils from '@libs/EmojiUtils'; +import CONST from '@src/CONST'; import type {ComposerProps} from './types'; const excludeNoStyles: Array = []; @@ -39,6 +40,10 @@ function Composer( ) { const textInput = useRef(null); const {isFocused, shouldResetFocusRef} = useResetComposerFocus(textInput); + const doesTextContainEmojis = useMemo(() => { + const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g')); + return emojisRegex.test(value ?? ''); + }, [value]); const doesTextContainOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]); const theme = useTheme(); const markdownStyle = useMarkdownStyle(doesTextContainOnlyEmojis, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles); @@ -73,10 +78,17 @@ function Composer( }, [shouldClear, onClear]); const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]); - const composerStyle = useMemo( - () => StyleSheet.flatten([style, doesTextContainOnlyEmojis ? styles.onlyEmojisTextLineHeight : styles.emojisWithTextLineHeight]), - [style, doesTextContainOnlyEmojis, styles], - ); + const composerStyle = useMemo(() => { + let lineHeightStyle; + + if (doesTextContainOnlyEmojis) { + lineHeightStyle = styles.onlyEmojisTextLineHeight; + } else if (doesTextContainEmojis) { + lineHeightStyle = styles.emojisWithTextLineHeight; + } + + return StyleSheet.flatten([style, lineHeightStyle]); + }, [style, doesTextContainEmojis, doesTextContainOnlyEmojis, styles]); return (