[$1000] Make emojis larger in other contexts than just single character messages

[jboniface]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

This issue covers several related scenarios:

Scenario 1

Action Performed:

Add an emoji with other plain text characters in a message in the composer.

Expected Result:

The emoji should be larger (19pt) compared to the default size for text (15pt) in the composer. The emoji and text should appear vertically centered with respect to eachother, such that the baseline of the emoji is below the plain text and the middle of the text vertically aligns with the middle of the emoji (like the right-hand-side of this example.

Actual Result:

The emoji is the same size as the rest of the text.

Scenario 2

Action Performed:

Send a message with emoji and text.

Expected Result:

The emoji should be larger (19pt) compared to the default size for text (15pt) in the chat history. The emoji and text should appear vertically centered with respect to eachother, such that the baseline of the emoji is below the plain text and the middle of the text vertically aligns with the middle of the emoji (like the right-hand-side of this example

Actual Result:

The emoji is the same size as the rest of the text.

Scenario 3

Action Performed

Draft a message (of any length) with only emoji.

Expected Result

The emoji should appear very large (27pt) in the composer.

Actual Result

The emoji appear very small (15pt).

Scenario 4

Action Performed

Send a message (of any length) with only emoji.

Expected Result

The emoji should appear very large (27pt) in the report history.

Actual Result

The emoji only appear large in the report history if there is only one emoji in the message.

Scenario 5

Action Performed

Go to Settings -> Profile and add emoji(s) to your last name 😎

Expected Result

The emoji should appear larger (19pt) than the rest of the text (15pt) in the text input. The emoji and text should appear vertically centered with respect to eachother, such that the baseline of the emoji is below the plain text and the middle of the text vertically aligns with the middle of the emoji (like the right-hand-side of this example

Actual Result

The emoji appear the same size as the text.

Scenario 6

Action Performed

1. Go to Settings -> Profile and add emoji(s) to your last name 😎.
2. Save your profile.
3. Open the Settings RHP and look at your name:

Expected Result

The emoji should appear larger (21pt) than the rest of the text (17pt) in the text input. The emoji and text should appear vertically centered with respect to eachother, such that the baseline of the emoji is below the plain text and the middle of the text vertically aligns with the middle of the emoji (like the right-hand-side of this example

Actual Result

The emoji and text have the same height:

Scenario 7

Action Performed

1. Go to Settings -> Profile and add emoji(s) to your last name 😎.
2. Save your profile.
3. Open a chat with another user and send them a message. Take a look at your message in the report history.

Expected Result

The emoji should appear larger (19pt) than the rest of the test (15pt). The emoji and text should appear vertically centered with respect to eachother, such that the baseline of the emoji is below the plain text and the middle of the text vertically aligns with the middle of the emoji (like the right-hand-side of this example

Actual Result

The emoji appears the same size as the rest of the text.

Workaround:

no

Platform:

all

View all open jobs on Upwork

Issue Owner

Current Issue Owner: @JmillsExpensify

[MelvinBot]

Triggered auto assignment to @Christinadobrzyn (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

Triggered auto assignment to @ctkochan22 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[MelvinBot]

@jboniface, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

[MelvinBot]

Triggered auto assignment to @JmillsExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[VickyStash]

@shawnborton Did you take a look at the video from my comment above? The emojis doesn't increase the composer size when they are in one line and when there are several lines they are not overlapped.

But, I've tried to apply increased lineHeight to multiline emojis, and that's how it can look

test.mp4

But if it doesn't work to you I'm okay to update the logic with amount of emojis affecting the emojis size. Let's just mention it under Scenario 3 and 4 in the issue.

[shawnborton]

Ah okay, well then that would work for me but I'm curious how we would handle textwrapping when there is say 30 emojis in a row on various screen widths?

[VickyStash]

@shawnborton It looks this way (can't do android, cause dev seems to be down):

[shawnborton]

Okay nice, I think that can work. What do you think?

[VickyStash]

Okay nice, I think that can work. What do you think?

For me it looks okay as well. Also, that's doesn't look like super often case (sending the message with 20+ emojis only)

[JmillsExpensify]

Discussion on-going (Commenting to keep MelvinBot happy).

[VickyStash]

Updates:

• I've implemented scenario 5 and 6
• Tomorrow, I'll be OOO (15th Aug), but I think on Friday, I'll start the PR preparing/active testing on all of the platforms.

[VickyStash]

Updates: I've started to prepare the Draft PR and testing over platforms

[VickyStash]

Updates:
Continue to work on the Draft PR.
Today, I have tested the WEB platform. I've resolved the remaining TODO related to the correct comment text selection. Only one bug with composer height jumping/increasing when an emoji is entered is left on the WEB. I'll share my suggestions for its solutions tomorrow.

[VickyStash]

Updates:
I've resolved all of the issues I've found for now and started to combine the PR. I still need to add screenshots and clean the code in several places. If everything goes as expected, I should be able to open the PR for review tomorrow.

[VickyStash]

The PR has been opened for the review!

[parasharrajat]

Update: PR is in review with a couple of bugs under fixing. Next update in next week.

[VickyStash]

The latest updates can be found in the PR.

Note: I'm going to be OOO next week (Sept 16-20) 🌴

[tomekzaw]

FYI Please bump react-native-live-markdown to 0.1.150 to include Expensify/react-native-live-markdown#491 that fixes "Unsupported type: inline-image" error on Android.

[parasharrajat]

We should have the next update on Monday.

[VickyStash]

Updates: We are waiting for this PR with react-native-live-markdown update to be merged so we can start another round of the review.

[VickyStash]

Updates: The PR with react-native-live-markdown upgrade was reverted. But the new one has already been opened: #50047, so waiting for it. It's not possible to bumb the lib version outside of that PR cause inline images functionality was added in version 0.1.145.

[roryabraham]

@francoisl choosing you at random to take this over while I'm on parental leave. Hope you don't mind 🙃