[HOLD E/PR #535] [$250] Chat - In mWeb, text is centered but in Android text is dropping down

[IuliiaHerets]

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: V9. 0.64-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Open both mWeb and app
2. Open a chat
3. Enter > # hai

Expected Result:

In mWeb, text is centered but in Android text must not drop down.

Actual Result:

In mWeb, text is centered but in Android text is dropping down.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6670752_1732113789398.az_recorder_20241120_200615_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863815952930925048
• Upwork Job ID: 1863815952930925048
• Last Price Increase: 2024-12-10

Issue Owner

Current Issue Owner: @alitoshmatov

[melvin-bot]

Triggered auto assignment to @alexpensify (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.

[QichenZhu]

Proposal

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

Headings are not vertically centered on Android.

What is the root cause of that problem?

The line height is enlarged on Android to fix overlapping lines.

However, the text is bottom-aligned in MarkdownLineHeightSpan.

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

Fine-tune the fm.ascent, fm.descent, fm.top, fm.bottom properties to vertically center the text. The code below refers to this implementation. It’s not the final version and might need confirmation from the design team.

  @Override
  public void chooseHeight(CharSequence text, int start, int end, int spanstartv, int lineHeight, Paint.FontMetricsInt fm) {
    float leading = mLineHeight - ((-fm.ascent) + fm.descent);
    fm.ascent -= (int)Math.ceil(leading / 2.0);
    fm.descent += (int)Math.floor(leading / 2.0);

    // The top of the first line, and the bottom of the last line, may influence bounds of the
    // paragraph, so we match them to the text ascent/descent. It is otherwise desirable to allow
    // line boxes to overlap (to allow too large glyphs to be drawn outside them), so we do not
    // adjust the top/bottom of interior line-boxes.
    if (start == 0) {
      fm.top = fm.ascent;
    }
    if (end == text.length()) {
      fm.bottom = fm.descent;
    }
  }

Screenshots

Before	After

What alternative solutions did you explore? (Optional)

N/A

[alexpensify]

I didn't get to test this one before going OOO. This week, I'll try to log in to confirm the next steps.

[melvin-bot]

@alexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[alexpensify]

No update

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@alitoshmatov - I was able to replicate the experience. Can you please verify if this proposal will fix the issue? Thanks!

[melvin-bot]

@alexpensify @alitoshmatov this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@alexpensify, @alitoshmatov Whoops! This issue is 2 days overdue. Let's get this updated quick!

[alitoshmatov]

@QichenZhu Are you suggestion that this should be fixed in react-native-live-markdown

[QichenZhu]

@alitoshmatov That’s correct.

[melvin-bot]

@alexpensify, @alitoshmatov Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[alexpensify]

Weekly Update: Expensify/react-native-live-markdown#535 is still under review

[alexpensify]

Weekly update: same as last week

[alexpensify]

Weekly Update: No movement in the PR

[tomekzaw]

Just FYI, I wasn't actively working on this PR because I was hoping that RN 0.76 upgrade would fix this. Unfortunately this is not the case so I'll need to resume working on this PR once I complete my current tasks.

[alexpensify]

Oh no, thank you for the update. Keep us posted when you have a better timeline to get to this one. Thanks!

[alexpensify]

Weekly Update: Waiting for @tomekzaw to have a free cycle

[alexpensify]

Weekly Update: Same

[alexpensify]

Weekly Update: Same update, but I'm back online.

[tomekzaw]

Update: I'm working on it, Android already works fine, iOS is almost working but needs some final touches.

Latest updates here:

• Customize line height for headings react-native-live-markdown#535 (comment)
• Customize line height for headings react-native-live-markdown#535 (comment)
• Customize line height for headings react-native-live-markdown#535 (comment)
• Customize line height for headings react-native-live-markdown#535 (comment)

[alexpensify]

Thank you, @tomekzaw, for the update!

---

🚨 Heads up! I'll be offline until Monday, April 7, 2025, and won’t be actively monitoring this GitHub during that time.

If this GitHub requires an urgent update, please reapply the bug label or reach out in the #expensify-open-source Slack room for help. Otherwise, I'll pick things up when I'm back online. Thanks!

[melvin-bot]

This issue has not been updated in over 15 days. @alexpensify, @alitoshmatov 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!

[alexpensify]

@tomekzaw is there any update here? Thanks!

[tomekzaw]

@alexpensify I've pushed some changes to Expensify/react-native-live-markdown#535 but found out that a proper solution requires some small changes in react-native code. There's also another PR (Expensify/react-native-live-markdown#520) that I'd like to merge prior to this one.

[melvin-bot]

This issue has not been updated in over 15 days. @alexpensify, @alitoshmatov 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!

[alexpensify]

Still waiting on Expensify/react-native-live-markdown#535