Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix emojis display #46478

Closed
wants to merge 3 commits into from
Closed

Fix emojis display #46478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aaf24d3
Fix emojis overlap with each other
VickyStash Jul 30, 2024
95aa3a1
Fix "Write something..." display
VickyStash Jul 30, 2024
f35c2b7
Fix emoji is cut off in workspace description
VickyStash Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions src/components/Composer/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<keyof MarkdownStyle> = [];
Expand Down Expand Up @@ -39,6 +40,10 @@ function Composer(
) {
const textInput = useRef<AnimatedMarkdownTextInputRef | null>(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);
Expand Down Expand Up @@ -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]);
Comment on lines +81 to +91
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is not a good idea as it will change the design for composer for different text. We want to keep the composer to always look same regardless of the text or formatting.

I will test and it how it looks.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe on iOS the emojis always will be cut off/overlapped if we leave the line-height 20 for emojis font size 19
image


return (
<RNMarkdownTextInput
Expand Down
3 changes: 2 additions & 1 deletion src/components/Composer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,9 +345,10 @@ function Composer(
scrollStyleMemo,
StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize),
isComposerFullSize ? ({height: '100%', maxHeight: 'none' as DimensionValue} as TextStyle) : undefined,
doesTextContainOnlyEmojis ? styles.onlyEmojisTextLineHeight : undefined,
],

[style, styles.rtlTextRenderForSafari, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize],
[style, doesTextContainOnlyEmojis, styles.onlyEmojisTextLineHeight, styles.rtlTextRenderForSafari, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize],
);

return (
Expand Down
1 change: 1 addition & 0 deletions src/components/TextInput/BaseTextInput/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,6 +348,7 @@ function BaseTextInput(
inputProps.secureTextEntry && styles.secureInput,

!isMultiline && {height, lineHeight: undefined},
isMultiline && isMarkdownEnabled ? {lineHeight: variables.lineHeightEmojisWithTextComposer} : null,

// Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
...(autoGrowHeight
Expand Down
Loading