Landscape UI - Unable to close FAB menu and notch is blocking some content from the preferences page - Reported by: @kakajann

[isagoico]

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. Navigate to LHN
2. Open FAB menu
3. Change orientation to landscape
4. Change back orientation to portrait
5. Navigate to settings
6. Open preferences
7. Change orientation to landscape.

Expected Result:

UI should not break after changing orientation to landscape.

Actual Result:

User is unable to exit the FAB menu in preferences some UI elements are blocked by notch.
Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.1.8-0

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Upwork job link: https://www.upwork.com/jobs/~017190bb5038fac386

Issue reported by: @kakajann
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1634299085343500

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @pecanoro (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @michaelhaxhiu (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[kakajann]

Proposal

1. Create a new component to handle SafeArea for iPhoneX

src/components/SafeArea/index.js

const SafeArea = ({children}) => children;

export default SafeArea;

src/components/SafeArea/index.ios.js

const SafeArea = ({children}) => (
    <SafeAreaView style={[styles.iPhoneXSafeArea]} edges={['left', 'right']}>
        {children}
    </SafeAreaView>
);

export default SafeArea;

2. Use it in App.js

<SafeArea>
    <Expensify />
</SafeArea>

This will solve the issue about blocked UI elements.

More Details

Apple suggests to use padding both sides in landscape mode on iPhoneX and this leads background color mismatch. Like this:

and I had to set safeArea backgroundColor black. Like this:

I don't think we can detect the orientation is left or right

[shawnborton]

I think it looks better with the black BG.

[MelvinBot]

@michaelhaxhiu Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MelvinBot]

@michaelhaxhiu 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[michaelhaxhiu]

Sorry on the delay guys - I got assigned this GH while I was OOO (somehow?).

I can confirm this GH is unique and reproducible. Upwork job is posted: https://www.upwork.com/jobs/~017190bb5038fac386

[MelvinBot]

Triggered auto assignment to @Julesssss (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[Julesssss]

@parasharrajat I saw you added a thumbs down to the proposal above, was there a specific reason for this?

[parasharrajat]

Wrapping the whole app in safe area is not a best approach.

Main LHN takes full screen ...etc. It will have side-effects.

[sidferreira]

@parasharrajat @Julesssss is this settled? I wanted to propose a slightly different approach

[michaelhaxhiu]

@sidferreira we are still reviewing proposals, feel free to post yours here.

[sidferreira]

Proposal

For most solution I agree with @kakajann but instead of using it app wise, I suggest to use it screen-based, for a better UI experience. This will allow the app to have a better result depending on what side it was rotated.

For example, the issue mentioned happens only if you rotate the device to the right, not if you rotate left.
As well the problem of adding the whole app to the SafeArea causes the FAB shadow to not be complete.

So whatever changes, should make sure that the FAB shadow will render til the border of the device.

Follows some examples of the issue in different screens/orientations:

I basically think that this is kinda bigger problem than just the FAB menu

[kakajann]

I don't think wrapping the app with custom SafeArea will be bad approach. Because it works with:

• Only on iOs devices
• Only on iPhone X and newer models
• Only on Landscape orientation

[sidferreira]

@kakajann I didn't want to mention it as a "bad" approach, sorry if sounded like that. The difference is about final results. Part of the expected UI behaviours on iOS is to have the content "bleeding" behind the notch, a behaviour that I personally enjoy, that's why I suggested a different approach.

[kakajann]

@sidferreira I was talking about @parasharrajat 's comment ) sorry I forgot to mention

[mallenexpensify]

@kakajann can you apply to the issue and comment here once you have?
https://www.upwork.com/jobs/~017190bb5038fac386

[kakajann]

Just applied. I'll raise a PR in a few days

[mallenexpensify]

Hired @kakajann in Upwork.
Reminder to self... @kakajann also reported the issue so the $250 reporting bonus is applicable

[Julesssss]

Merged, awaiting payment

[michaelhaxhiu]

Bug reporting bonus = $250
Job payout = $250
Company Offsite Hold = $250

Total = $750.

Just paid it, we should be all good here.

[botify]

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

• iPhoneX Landscape UI #6291

If no regressions arise, payment will be issued on 2021-12-06. 🎊

[parasharrajat]

There is a regression from this issues' PR. #6530. cc: @kakajann
Looks like the payment was made early. @michaelhaxhiu

[Julesssss]

The early payment is my fault, I mistakenly started the 7-day countdown when the issue was merged, instead of waiting for it to be deployed.

I agree this should still be treated as a regression that should be fixed 👍

[kakajann]

I'll submit fixing PR asap

[parasharrajat]

Thanks, @kakajann . Please request a review from me when you do and tag the other issue as well.

[botify]

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

• iPhoneX SafeArea regression fix #6559

If no regressions arise, payment will be issued on 2021-12-15. 🎊

[michaelhaxhiu]

Is this good to close now?

[mallenexpensify]

Looks like it, reopen if needed