Contact methods - Offline indicator is below Verify button and not bottom of the page

[IuliiaHerets]

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.28-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp #48320
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Launch New Expensify app.
2. Go to Account settings.
3. Go to Profile > Contact methods.
4. Tap New contact method.
5. Enter a new contact method > Next.
6. Go offline.

Expected Result:

Offline indicator will be at the bottom of the page (above keyboard if keyboard is up).

Actual Result:

Offline indicator is below Verify button.

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

Bug6591240_1725323746829.ScreenRecording_09-03-2024_08-29-18_1.mp4

View all open jobs on GitHub

[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.

[melvin-bot]

Triggered auto assignment to @mountiny (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[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.

[etCoderDysto]

Edited by proposal-police: This proposal was edited at 2024-09-03 09:24:30 UTC.

Proposal

Offending PR: #48320
I am available to raise a PR if the author is not available at the time

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

Contact methods - Offline indicator is below Verify button and not bottom of the page

What is the root cause of that problem?

We are not passing margin top auto to offlineIndicatorStyle below

App/src/pages/settings/Profile/Contacts/ValidateContactActionPage.tsx

Lines 41 to 44 in 0e9f918

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	shouldEnableMaxHeight
	testID={ValidateContactActionPage.displayName}

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

We should pass margin top auto
offlineIndicatorStyle={themeStyles.mtAuto}

What alternative solutions did you explore? (Optional)

[MariaHCD]

@getusha @hungvu193 This would also be another follow up improvement from #48320

[hungvu193]

@getusha @hungvu193 This would also be another follow up improvement from #48320

Ah yes. Thanks for letting me know, we will tackle this one as well 👍