[HOLD for payment 2024-03-25] [HOLD for payment 2024-03-22] IOU - Add stop button is not aligned in the center

[lanitochka17]

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: 1.4.52
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com
2. Tap fab ---Request money--Distance
3. Enter start and stop point
4. Note Add stop button

Expected Result:

Add stop button must be aligned in the center

Actual Result:

Add stop button is not aligned in the center

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

[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 @marcaaron (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

Production:

[lanitochka17]

@marcaaron 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

[lanitochka17]

We think that this bug might be related to #vip-vsp
CC @quinthar

[shubham1206agra]

Offending PR #37966

[marcaaron]

cc @luacmartins

[narefyev91]

will take a look

[ahmedGaber93]

Proposal

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

IOU - Add stop button is not aligned in the center

What is the root cause of that problem?

react native paddingHorizontal not ovveride paddingLeft.
and we use in getButtonStyleWithIcon paddingLeft 12 and ovveride it with innerStyles have paddingHorizontal 40 here

App/src/components/Button/index.tsx

Line 316 in b7a230e

style={[

but react native not ovveride paddingLeft with paddingHorizontal

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

we can pass styles.pl10, styles.pr10 instead of ph10 here

What alternative solutions did you explore? (Optional)

[ahmedGaber93]

@narefyev91 if you will fix this issue as regression and this will not go to external you can take alook in my proposal.

[luacmartins]

This is fixed in staging

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker 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 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.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker 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 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.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• [CP Staging] Fix icons after regression #38275

If no regressions arise, payment will be issued on 2024-03-22. 🎊

For reference, here are some details about the assignees on this issue:

• @narefyev91 does not require payment (Contractor)

[melvin-bot]

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

• [CP Staging] Fix icons after regression #38275

If no regressions arise, payment will be issued on 2024-03-25. 🎊

For reference, here are some details about the assignees on this issue:

• @narefyev91 does not require payment (Contractor)