[Hold for Payment on 2 August] Some emojis have a different style and size than the rest of the emojis

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel! Upwork post here

---

Action Performed:

1. Log in to e.cash
2. Navigate to a conversation and open the emoji picker
3. Search for the skull emoji or the airplane emoji

Expected Result:

Emojis should all be displayed with the same size and style.

Actual Result:

There are some emojis that don't have the same style and size in the emoji list.

Workaround:

None needed, visual issue.

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App ✔️
Mobile Web

Version Number: 1.0.79-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:
Here are some example emojis that are behaving strangely in e.cash.

• Airplane and small airplane
  

• Skull with bones:
  

• Shopping bags
  -

There are more but I'm not sure if it's helpful if I list them all.

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

From @AndrewGable https://expensify.slack.com/archives/C01GTK53T8Q/p1626793714014200

☠️ emoji on web looks like a different size compared to rest of emojis

[MelvinBot]

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

[MelvinBot]

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

[alex-mechler]

Looks nice and ripe for a contributor to fix!

[rdjuric]

I think this happens because some unicode characters can be represented in text style and in emoji style.

This is controlled by adding a variant selector to the base unicode of our emoji. We can display our unicode chars in emoji style by appending the VS16 unicode (U+FE0F) to its base unicode.

We can do it here by changing {props.emoji} to {props.emoji+'\uFE0F'}

App/src/pages/home/report/EmojiPickerMenuItem.js

Lines 41 to 43 in 683bcf4

	<Text style={[styles.emojiText, props.emojiSize]}>
	{props.emoji}
	</Text>

And we get the correct representation

[parasharrajat]

I don't think this fixes the core issue. As we are not seeing text version of emoji but still the size is small.

[SofiedeVreese]

I'm going to reassign this issue as I'm out of office, on vacation, from this afternoon for 10 days.

[MelvinBot]

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

[rdjuric]

I don't think this fixes the core issue. As we are not seeing text version of emoji but still the size is small.

But we're seeing the text style of those unicode chars, at least in the screenshots shared here and in my tests in the main branch. It's not only the size that is small, we're displaying a different variant than the one we intended.

[MelvinBot]

Triggered auto assignment to @NikkiWines (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[FredericoGauz]

But we're seeing the text style of those unicode chars, at least in the screenshots shared here and in my tests in the main branch. It's not only the size that is small, we're displaying a different variant than the one we intended.

I was taking a look at that... It seems that, indeed, if we use the emoji of the unicode char the problem is fixed automatically. Only its not the same design, but like @rdjuric said, the emoji version of that character.

[NikkiWines]

@rdjuric your proposal looks good! @laurenreidexpensify can you hire them for this job? Thanks!!

[laurenreidexpensify]

@rdjuric pls submit a proposal in Upwork and I will hire you there so you can get started on the PR

[rdjuric]

Done @laurenreidexpensify

[laurenreidexpensify]

@rdjuric Just to let you know payment will be on Monday because of the 31st falling on a weekend - working across timezones sometimes means the 7 days is more like 8 :)

[laurenreidexpensify]

Paid 👍🏽