[HOLD for payment 2024-08-05] [$250] Bottom docked button views does not use correct SafeSpace in mobile

[m-natarajan]

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.86-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1718816465053499

Action Performed:

1. Open app
2. Tap avatar
3. Tap display name
4. Observe the space at the bottom of docked button

Expected Result:

There should be proper bottom SafeSpace below the button

Actual Result:

Bottom button is very close to the home bar

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cab23d89474f1097
• Upwork Job ID: 1804290933858433766
• Last Price Increase: 2024-06-28
• Automatic offers:
• allgandalf | Reviewer | 102958436
• truph01 | Contributor | 102958440

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @sakluger / @sakluger

[melvin-bot]

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

[truph01]

Proposal

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

• Bottom button is very close to the home bar

What is the root cause of that problem?

• We do not use includeSafeAreaPaddingBottom:
  

  App/src/pages/settings/Profile/DisplayNamePage.tsx

  Line 71 in 7561439

  includeSafeAreaPaddingBottom={false}

  
  so there is no safe area padding bottom is applied.

• Also, currently, the "Save" button has style:
  

  App/src/components/Form/FormWrapper.tsx

  Line 117 in 29e4c54

  containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles]}

• As we can see, the "Save" button is always at the bottom of the screen without any safe area on its bottom side.

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

• We should add an addtional style safeAreaPaddingBottomStyle.paddingBottom && styles.pb5 to the containerStyles:
  

  App/src/components/Form/FormWrapper.tsx

  Line 117 in 29e4c54

  containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles]}

                        containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles, safeAreaPaddingBottomStyle.paddingBottom && styles.pb5]}

• With the above change: In the device where there is no safe area padding-bottom (web, desktop), we do not need to add the additional padding-bottom value 20px, in other words, keep it as it is. In the devices that have safe area padding-bottom (native), add the addtional padding-bottom value as mentioned in here.

What alternative solutions did you explore? (Optional)

• We have two positions that add the padding-bottom to the screen:

• One in ScreenWrapper:
  

  App/src/components/ScreenWrapper.tsx

  Lines 239 to 242 in 403cecb

  	// We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
  	if (includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator)) {
  	paddingStyle.paddingBottom = paddingBottom;
  	}

  
  and one in FormWrapper:
  

  App/src/components/Form/FormWrapper.tsx

  Line 105 in 403cecb

  style={[style, safeAreaPaddingBottomStyle.paddingBottom ? safeAreaPaddingBottomStyle : styles.pb5]}

• Let say the safeAreaPaddingBottomStyle.paddingBottom is 20. If we use includeSafeAreaPaddingBottom={true} in ScreenWrapper, both of these above padding styles are applied, the real padding-bottom will be 20*2 = 40. If we use includeSafeAreaPaddingBottom={false}, the real padding-bottom will be 20.

• In case of this bug, we already applied the safe area padding-bottom, 20, but the design team think it is not enough. And if we need to add more padding-bottom value in case applying safe area padding-bottom is not enough, we can update this:
  

  App/src/components/Form/FormWrapper.tsx

  Line 105 in 403cecb

  style={[style, safeAreaPaddingBottomStyle.paddingBottom ? safeAreaPaddingBottomStyle : styles.pb5]}

  
  to:

                style={[style, safeAreaPaddingBottomStyle.paddingBottom ? {paddingBottom: safeAreaPaddingBottomStyle + 15} : styles.pb5]}

In there, 15 is just the example, we can modify in the future.

[shawnborton]

@truph01 I think you have the right solution but I think we need to make sure we implement this on all pages that use the bottom-docked green button, not just the display name page.

[truph01]

@shawnborton We can do it by remove includeSafeAreaPaddingBottom={false} in all screen as I mentioned.

[neonbhai]

Proposal

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

Onboarding modal uses incorrect row hover style when hovering over the options

What is the root cause of that problem?

We disable safeAreaPadding for screens with forms as because it is already accounted for in Form Provider here

This is also mentioned in docs here:

App/contributingGuides/FORMS.md

Lines 323 to 331 in 6dc6f81

	Any `FormProvider.js` that has a button will also add safe area padding by default. If the `<FormProvider>` is inside a `<ScreenWrapper>`, we will want to disable the default safe area padding applied there e.g.
	```jsx
	<ScreenWrapper includeSafeAreaPaddingBottom={false}>
	<FormProvider>
	{...}
	</FormProvider>
	</ScreenWrapper>
	```

​

We still seem to be missing the extra padding below the Form Submit button as we have not configured the styles correctly

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

We will remove the bottom padding style.pb5 added here in #40473:

App/src/components/Form/FormWrapper.tsx

Line 105 in 29e4c54

style={[style, safeAreaPaddingBottomStyle.paddingBottom ? safeAreaPaddingBottomStyle : styles.pb5]}

​
and apply it here:

App/src/components/Form/FormWrapper.tsx

Line 117 in 29e4c54

containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles]}

[shawnborton]

Cool, I agree that removing includeSafeAreaPaddingBottom={false} is the way to go for native devices. cc @sakluger I think we are ready to open this one up.

[allgandalf]

@sakluger , can i be the C+ here? As i have context about this bug and it was found during the PR:

[melvin-bot]

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