[$250] Android - Chat - Emoji list in the emoji picker is misaligned

[lanitochka17]

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

---

Version Number: 1.4.25-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Precondition: User account has a few emojis in the emoji recently used history

1. Go to any chat
2. Open emoji picker

Expected Result:

Emoji list in the emoji picker is aligned properly

Actual Result:

Emoji list in the emoji picker is misaligned

Workaround:

Unknown

Platforms:

So far we have been only able to reproduce in specific devices:

• Samsung Galaxy Note 10+
• Pixel 7 Pro

Which of our officially supported platforms is this issue occurring on?

• Android: Native (only specific devices, see list above)
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6343252_1705340178594.Screen_Recording_20240115_212103_New_Expensify__2_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0142f3abb24fd4c0ef
• Upwork Job ID: 1746982665813213184
• Last Price Increase: 2024-02-05
• Automatic offers:
• s77rt | Reviewer | 0

Issue Owner

Current Issue Owner: @JmillsExpensify

Issue Owner

Current Issue Owner: @JmillsExpensify

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $250

[mountiny]

@lanitochka17 @kavimuru is this reliably reproducible across android devices?

[ishpaul777]

not able to repro on main

[aldo-expensify]

I'm failing to reproduce in Android native in staging.

[mountiny]

@lanitochka17 @kavimuru @mvtglobally Can you please retest again/ add better reproduction steps if still repro under some specific ocnditions? thanks

[melvin-bot]

Triggered auto assignment to @michaelhaxhiu (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@mountiny Issue is still reproducible on the latest build v.1.4.25-7 with a new account. There is no specific conditions.
Samsung Galaxy Note 10+ / Android 12

Screen_Recording_20240117_004655_New.Expensify.mp4

[lanitochka17]

Not.correct.emojis.position.mp4

[aldo-expensify]

I tested with the account [email protected] (same account used here) in staging (v1.4.25-8) in Android native, and couldn't reproduce:

I'm guessing that this can only be reproduced in very specific devices like: Samsung Galaxy Note 10+ / Android 12

[mountiny]

@lanitochka17 can you update the op with the specific device and os version?

Ideally we can know how common this is, if its an outlier we can close but i think we should try to confirm that somehow

@mvtglobally could your team please check this on various android devices and versions?

[samilabud]

Proposal

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

Android - Chat - Emoji list in the emoji picker is misaligned

What is the root cause of that problem?

After this PR this issue seems to be caused for using FlashList to render and maintain the same css for [small screens].(

App/src/hooks/useWindowDimensions/index.ts

Line 14 in eb47b90

const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;

) . This is because the renderItem function is splitting the emojis using a View as Header but the parent container is using flex direction row so, when the resolution is small the Header and Emojis are too close and the header is mixed with the emojis and get misaligned.

On the other hand the FlashList component renders the content based on the estimated size of the container, this is calculated whenever we indicate the number of columns to the component. Right now we are using exactly the same windowWidth that comes from the hook useWindowDimensions but we are adding a horizontal padding to the container that makes the estimated calculation erroneous, this causes the strange behavior to occur:

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

We should add a margin of 1 in emojiHeaderContainer class like below to fix the misaligned issue.

emojiHeaderContainer: {
            backgroundColor: theme.componentBG,
            display: 'flex',
            height: CONST.EMOJI_PICKER_HEADER_HEIGHT,
            justifyContent: 'center',
            marginTop: 1,
        }

And to fix the estrange behavior mentioned before we should decrease the horizontal padding in FlashList to get the same with calculated in the estimatedListSize, this should be the padding for container:

contentContainerStyle={styles.ph3}

Result:
Before changes:

Screen.Recording.2024-01-16.at.7.57.04.PM.mov

After changes:

Screen.Recording.2024-01-16.at.9.12.58.PM.mov

[aldo-expensify]

@s77rt you are right, reproduced in native. Assigning @dragnoir then.

[melvin-bot]

📣 @s77rt 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @dragnoir You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[aldo-expensify]

@dragnoir 👋 , when do you think you can create a PR with the fix?

[dragnoir]

PR ready #36674

[dragnoir]

Payment will be automatically handled?

[dragnoir]

@s77rt when do you think payment will be released? Seem automation not working here!

[s77rt]

@dragnoir Right, Melvin been away for a while. I think this is due payment now cc @JmillsExpensify

[dragnoir]

@JmillsExpensify friendly reminder :)

[dragnoir]

@JmillsExpensify the job is removed from upwork and I have not been paid. Can you pls check!

[dragnoir]

@s77rt can you pls help?

[s77rt]

@aldo-expensify Please remove the Reviewing label and move this to Daily

[dragnoir]

@aldo-expensify the job is removed from upwork and I have not been paid. Can you pls check!

[aldo-expensify]

@aldo-expensify the job is removed from upwork and I have not been paid. Can you pls check!

I don't think I have access, @JmillsExpensify should be able to check

[JmillsExpensify]

Please reach out to me via DM when the payment automation fail. I'm on hundreds of issues, so it's real hard to get to these in a timeline manner when that failure happens.

[JmillsExpensify]

Payment summary:

• Contributor: @dragnoir $250
• Contributor+: @s77rt

Offer sent to contributor and C+ has been paid out.

[dragnoir]

Offer accepted

[JmillsExpensify]

Thanks! All contributors paid via Upwork.