[$50] [Repro needed] Android - Profile - Some emojis are displayed as ellipsis in status

[IuliiaHerets]

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

---

Version Number: v9.0.46-1 Reproducible in staging?: Y Reproducible in production?: Y Issue reported by: Applause Internal Team

Action Performed:

1. Launch app
2. Tap profile icon -- profile -- status
3. Select 🫢 🫡

Expected Result:

Some emojis must not be displayed as ellipsis samsung device.

Actual Result:

Some emojis are displayed as ellipsis in samsung device.

Workaround:

Unknown

Platforms:

• [x] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/0a65bc84-f350-4523-9ef9-0963e91df2aa

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021845940732835928891
• Upwork Job ID: 1845940732835928891
• Last Price Increase: 2024-10-14

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot[bot]]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

@strepanier03 FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[layacat]

Edited by proposal-police: This proposal was edited at 2024-10-08 15:41:39 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Android - Profile - Some emojis are displayed as ellipsis in status

What is the root cause of that problem?

This problem arises due to variations in font rendering and text layout across different Android devices. Especially in devices that has low resolution which causes the emoji bigger => it's cut off => we saw this issue.

What changes do you think we should make in order to solve the problem?

Adjust Alignment and Text Layout Properties Set alignment and text layout properties to ensure proper text rendering in here: https://github.com/Expensify/App/blob/bdc3a157b5504f05ae2c0a56555de2c8839c21cf/src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx#L77

By adding:

alignSelf: 'stretch',
textAlign: 'center',
lineHeight: 30, // optional

to styles.emojiPickerButtonDropdownIcon.

What alternative solutions did you explore? (Optional)

Add flex: 1 to styles.emojiPickerButtonDropdownIcon so it can fill up the space.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[strepanier03]

I need to test this still and it's on my todo for tomorrow.

[strepanier03]

Can't repro via Browserstack and I don't have a Samsung so asking for help in Slack for testing.

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~021845940732835928891

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @DylanDylann (External)

[melvin-bot[bot]]

Upwork job price has been updated to $50

[strepanier03]

In light of this type of bug, we have lowered the price to $50.

We would be willing to increase that if the contributor selected to fix this wants to review all emoji on the various devices to find other bugs to lump into this one.

Please let us know if that is the case.

[Ariqkip]

Proposal

Problem:

On some Samsung devices, specific emojis are being displayed as ellipsis (...) rather than as the intended emoji icons.

Root Cause: This issue often occurs due to compatibility problems with certain emojis on specific Samsung device models, especially if the emoji characters are not supported natively by the device’s font. Samsung devices may also have older emoji support, which might not fully recognize newer or less common emojis, resulting in these emojis rendering as ellipsis. Additionally, the React Native Text component can sometimes have trouble rendering emojis if the font is incompatible with the emoji set.

Proposed Solution:

Font Compatibility Check: Ensure that the font used for the Text component supports a wide range of emojis. Samsung devices, in particular, may not support all emojis if using a custom font. You could use a platform-specific font or the default system font on Android for maximum compatibility with emojis. Update your Text component as follows:

<Text
    style={[styles.emojiPickerButtonDropdownIcon, { fontFamily: Platform.OS === 'android' ? 'sans-serif' : undefined }]}
    numberOfLines={1}
>

Fallback Mechanism: Add a fallback option where you detect whether the emoji has rendered correctly, and if not, display a generic emoji or icon as a fallback. You can do this by checking the emoji’s width and height, or by using a library such as react-native-unicode-emoji.

Use SVGs for Specific Emojis: Consider using an SVG or PNG icon for certain emojis instead of Unicode emojis, especially for Samsung devices. This avoids issues with the device’s native emoji font. You can implement this by conditionally rendering an SVG icon if you detect a Samsung device.

Alternative Solutions Explored (Optional)

Cross-Platform Emoji Libraries: Libraries like emoji-mart or react-native-emoji-picker allow for a consistent emoji experience across devices, as they rely on images or SVGs instead of the device's font. However, this increases the app's bundle size.

Custom Emoji Font: You could include a custom emoji font within the app to ensure consistent emoji rendering. This solution might be overkill unless your app heavily relies on emoji display.

[melvin-bot[bot]]

📣 @Ariqkip! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[Ariqkip]

Proposal

Problem On some Samsung devices, specific emojis are being displayed as ellipsis (...) rather than as the intended emoji icons.

Root Cause

This issue often occurs due to compatibility problems with certain emojis on specific Samsung device models, especially if the emoji characters are not supported natively by the device’s font. Samsung devices may also have older emoji support, which might not fully recognize newer or less common emojis, resulting in these emojis rendering as ellipsis. Additionally, the React Native Text component can sometimes have trouble rendering emojis if the font is incompatible with the emoji set.

Proposed Solution

• Font Compatibility Check:

Ensure that the font used for the Text component supports a wide range of emojis. Samsung devices, in particular, may not support all emojis if using a custom font. You could use a platform-specific font or the default system font on Android for maximum compatibility with emojis. Update your Text component as follows:

<Text
    style={[styles.emojiPickerButtonDropdownIcon, { fontFamily: Platform.OS === 'android' ? 'sans-serif' : undefined }]}
    numberOfLines={1}
>

• Fallback Mechanism:

Add a fallback option where you detect whether the emoji has rendered correctly, and if not, display a generic emoji or icon as a fallback. You can do this by checking the emoji’s width and height, or by using a library such as react-native-unicode-emoji.

• Use SVGs for Specific Emojis:

Consider using an SVG or PNG icon for certain emojis instead of Unicode emojis, especially for Samsung devices. This avoids issues with the device’s native emoji font. You can implement this by conditionally rendering an SVG icon if you detect a Samsung device.

Alternative Solutions Explored (Optional)

• Cross-Platform Emoji Libraries:

Libraries like emoji-mart or react-native-emoji-picker allow for a consistent emoji experience across devices, as they rely on images or SVGs instead of the device's font. However, this increases the app's bundle size.

• Custom Emoji Font:

You could include a custom emoji font within the app to ensure consistent emoji rendering. This solution might be overkill unless your app heavily relies on emoji display.

[Ariqkip]

Contributor details Your Expensify account email: ericokip402@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~01e8fca580ad3567b3

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[Ariqkip]

Proposal

Problem On some Samsung devices, specific emojis are being displayed as ellipsis (...) rather than as the intended emoji icons.

Root Cause

This issue often occurs due to compatibility problems with certain emojis on specific Samsung device models, especially if the emoji characters are not supported natively by the device’s font. Samsung devices may also have older emoji support, which might not fully recognize newer or less common emojis, resulting in these emojis rendering as ellipsis. Additionally, the React Native Text component can sometimes have trouble rendering emojis if the font is incompatible with the emoji set.

Proposed Solution

• Font Compatibility Check:

Ensure that the font used for the Text component supports a wide range of emojis. Samsung devices, in particular, may not support all emojis if using a custom font. You could use a platform-specific font or the default system font on Android for maximum compatibility with emojis. Update your Text component as follows:

<Text
    style={[styles.emojiPickerButtonDropdownIcon, { fontFamily: Platform.OS === 'android' ? 'sans-serif' : undefined }]}
    numberOfLines={1}
>

• Fallback Mechanism:

Add a fallback option where you detect whether the emoji has rendered correctly, and if not, display a generic emoji or icon as a fallback. You can do this by checking the emoji’s width and height, or by using a library such as react-native-unicode-emoji.

• Use SVGs for Specific Emojis:

Consider using an SVG or PNG icon for certain emojis instead of Unicode emojis, especially for Samsung devices. This avoids issues with the device’s native emoji font. You can implement this by conditionally rendering an SVG icon if you detect a Samsung device.

Alternative Solutions Explored (Optional)

• Cross-Platform Emoji Libraries:

Libraries like emoji-mart or react-native-emoji-picker allow for a consistent emoji experience across devices, as they rely on images or SVGs instead of the device's font. However, this increases the app's bundle size.

• Custom Emoji Font:

You could include a custom emoji font within the app to ensure consistent emoji rendering. This solution might be overkill unless your app heavily relies on emoji display.

[DylanDylann]

@Ariqkip @layacat Could you guys provide videos to see how your solutions work? (Include video before applying change and video after applying change)

[DylanDylann]

Which device you use to reproduce this issue?