[HOLD for payment 2022-11-24] [$1000] Composer text and icon not aligned vertically centre for native app - reported by dhairyasenjaliya

[trjExpensify]

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

---

Action Performed:

1. Login in iOS app
2. Go to any chat
3. Type message in composer and notice the send icon and text written is aligned more to bottom rather than centre vertically

Expected Result:

Text should be proper aligned to vertically centre

Actual Result:

Text not aligned to vertically centre

Workaround:

unknown

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.1.86-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Upwork job URL: https://www.upwork.com/jobs/~01b7d0ca259c9797ca
Issue reported by: dhairyasenjaliya @roryabraham
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1657875961211239
https://expensify.slack.com/archives/C01GTK53T8Q/p1659011710209859

View all open jobs on GitHub

[melvin-bot]

Current assignee @Julesssss is eligible for the Engineering assigner, not assigning anyone new.

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[trjExpensify]

For the avoidance of doubt, can we confirm in the OP for the contributor what the padding should be? it's 6px top and bottom isn't it? CC: @shawnborton

I'm also curious what PR broke this, I took a cursory look at recent ones and perhaps this?

[thesahindia]

I took a cursory look at recent ones and perhaps this?

I don't think it's related because that PR is only related to edit composer.

[shawnborton]

I agree that it's not vertically aligned. I think we want some default padding on top and bottom, but regardless, the text should be vertically aligned in the remaining space. There is a way to do this easily on Android I believe, but I'm not sure how we do it on iOS.

[roryabraham]

Heads up! It looks like there are actually two (potentially separate) alignment issues at play here:

1. Text misalignment

   

2. Icon misalignment

   

[Julesssss]

Thanks Rory. I recalled an existing issue for the icon, but can't find anything in our open issues 🤷

I updated the description and title to include both issues and will open up for contributors.

[melvin-bot]

Current assignee @trjExpensify is eligible for the External assigner, not assigning anyone new.

[trjExpensify]

Upwork job here: https://www.upwork.com/jobs/~01cb430b907eadaa26

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported)

[melvin-bot]

Current assignee @Julesssss is eligible for the Exported assigner, not assigning anyone new.

[swiftpipe]

Hi, This error occurs because the text input is set to multi-line mode, I've had this problem before

[swiftpipe]

Proposal
I think the problem may be because the line height is not correct so the text is not centered
Solution:
borderWidth: 0, borderRadius: 0, height: 'auto', lineHeight: 16,

I tried it and it seems to work fine!

[melvin-bot]

📣 @fedirjh You have been assigned to this job by @Julesssss!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[trjExpensify]

Awesome!! @fedirjh - I've sent you the job offer on Upwork! Please accept, and let us know the ETA of when we should expect a PR for this? 🚀

[fedirjh]

Awesome!! @fedirjh - I've sent you the job offer on Upwork! Please accept, and let us know the ETA of when we should expect a PR for this?

Thanks @trjExpensify , Offer accepted and #12669 created

[trjExpensify]

Awesome! Over to you @Santhosh-Sellavel!

[Julesssss]

The PR is reviewed and looks great. We just need to add some comments and create a new Test rail case to help prevent regressions.

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• @trjExpensify A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here: https://github.com/Expensify/Expensify/issues/243111
• @Santhosh-Sellavel @Julesssss The PR that introduced the bug has been identified. Link to the PR: Add a button to expand the composer to full screen when the input has 3+ lines #9031 & [IS-1500] Fixed compose field alignment issue #1557
• @trjExpensify The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: iOS | Android
• @trjExpensify A discussion in #contributor-plus has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: https://expensify.slack.com/archives/C01SKUP7QR0/p1668513758765179
• @trjExpensify Payment has been made to the issue reporter (if applicable)
• @trjExpensify Payment has been made to the contributor that fixed the issue (if applicable)
• @trjExpensify Payment has been made to the contributor+ that helped on the issue (if applicable)

[Julesssss]

I simply don't have time to locate a specific PR that introduced this, there are MULTIPLE regressions from weeks-months ago.

[fedirjh]

The PR that introduced the bug : #9031 and #1557

[trjExpensify]

Yeah I was about to say @Julesssss, both of the offending PRs were referenced in this comment, I thought.

[Julesssss]

Oh great, thanks. I didn't have a chance to review the comments 👍

[trjExpensify]

Cool, completed 1-4 on the checklist. Will circle back once payment is due. Dropping to Weekly until then.

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.28-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [Fix] Composer text and icon not aligned center vertically for native app #12669

If no regressions arise, payment will be issued on 2022-11-24. 🎊

[trjExpensify]

Alrighty, payment time! @dhairyasenjaliya has been paid for reporting the issue.

@fedirjh & @Santhosh-Sellavel - 50% bonus for merging the PR within 3 days applies. @fedirjh, I've settled up. @Santhosh-Sellavel I've sent you an offer as you hadn't applied.

[trjExpensify]

Cool, thanks @Santhosh-Sellavel. Settled!