[HOLD for payment 2024-12-11] [$250] Android & iOS - Start chat - Add to group button is top-aligned instead of centered

[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: 9.0.68-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+232803@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch ND or hybrid app
2. Open FAB > Start chat

Expected Result:

"Add to group" button will be centered on the right (web and mweb behavior)

Actual Result:

"Add to group" button is top-aligned on the right

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6679248_1732810860716.ScreenRecording_11-29-2024_00-18-18_1.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021862203018243480384
• Upwork Job ID: 1862203018243480384
• Last Price Increase: 2024-11-28
• Automatic offers:
• neonbhai | Contributor | 105126607

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

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

[neonbhai]

Proposal

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

Android & iOS - Start chat - Add to group button is top-aligned instead of centered

What is the root cause of that problem?

From PR: #53223

We applied extra margin according to bottom inset to the Add to group button:

App/src/pages/NewChatPage.tsx

Lines 253 to 255 in 60e9c7c

	<Button
	onPress={() => toggleOption(item)}
	style={[styles.pl2, insets.bottom ? styles.mb5 : undefined]}

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

The bottom inset style is not needed for the button here, we should change it to:

<Button 
    ...
    style={[styles.pl2]}
/>

Result:

Before

After

[zanyrenney]

adding external

[melvin-bot]

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

[melvin-bot]

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

[zanyrenney]

cc @Expensify/design