[$250] When using the account switcher on iOS there is no safe area

[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: 9.0.26-1
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: @AndrewGable
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1724946621382309

Action Performed:

1.Launch the app and login
2. Tap settings > Account switcher arrows

Expected Result:

No display issues and modal view is scrollable

Actual Result

There is no safe area when using the account switcher

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

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021831817133463086139
• Upwork Job ID: 1831817133463086139
• Last Price Increase: 2024-09-05
• Automatic offers:
• nkdengineer | Contributor | 103922536

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @s77rt

[melvin-bot]

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

[dangrous]

cc @rushatgabhane on this one

[RachCHopkins]

Launch the app

Which app? Hybrid app?

Tap settings > Account switcher arrows

I don't know what this means.

Can we get some more detailed instructions for testing/reproducing, please?

[RachCHopkins]

Ok, looks like it's:

Launch the New Expensify app.
Go to Settings > tap username at the top to switch accounts

I can confirm I can't scroll in the list. I'm not sure what "safe area" means, but if I try to select my own account, the app crashes.

[RachCHopkins]

Waiting to see what @rushatgabhane has to add here! However this is supposed to work, it's definitely not working like it should.

[dangrous]

safe area means the area where default phone interface stuff should be (like in the screenshot, it's overlapping with the wifi symbols, etc.)\

I think we can go ahead and assign @rushatgabhane here for a solution! I can also take this on from the engineering side

[melvin-bot]

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

[dangrous]

We might want to make this external to clear @rushatgabhane's plate since a contributor should be able to propose

[melvin-bot]

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

[melvin-bot]

Current assignee @rushatgabhane is eligible for the External assigner, not assigning anyone new.

[RachCHopkins]

@dangrous do we need to remove @rushatgabhane?

[ItxAltaf]

You can use SafeAreaView property if you are working with react native

[melvin-bot]

📣 @ItxAltaf! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[ItxAltaf]

Contributor details
Your Expensify account email: itxaltaf789@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01ff545e274abdf999?mp_source=share

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[kishan-dhankecha]

You can add a SafeArea widget as the scaffold body. So that AppBar and such things won't affect with the padding, it is also safe for content.

[s77rt]

@nkdengineer Can you elaborate? How come only the header is visible? You should be able to make it work. If not, can you explain the problem?

[nkdengineer]

I tested with a View that wrap the SelectionList, if I fix the height of View component it works on both web and native. If not the bugs I mentioned above happens.

[s77rt]

@Expensify/design How is the account switcher list supposed to look when the list contains too many accounts?

Currently it's broken, no safearea consideration, the list is not scrollable and the popover cannot be dismissed

After fixing the safearea and the scroll issues, it will look like this but it's still not dismissible

Can we have a design view for this case? And is the push to page an option here? (like we done with the workspace switcher)

[rushatgabhane]

@s77rt i think there would be a max height (50% of the screen) so you can still tap outside to close the modal

[shawnborton]

I think push to page is a bit heavy for this solution - I think a majority of the use cases won't have so many copilots that it fills the screen.

I agree with the comment about making the modal have a smaller max-height though. Perhaps we cap it at something like 75% or something so there is still amply area to tap to close outside of it?

[s77rt]

Sounds good

[s77rt]

@nkdengineer Can you update your proposal based on the above? (and with SelectionList)

[rushatgabhane]

If we're using SelectionList then keyboard should navigation should work too, right?

It'll also fix #48245 then

[nkdengineer]

@s77rt Update my proposal

[s77rt]

@rushatgabhane It will not fix the arrow navigation issue because the SelectionList arrow activation logic is based on screen focus. PopoverMenu on the other hand works because the activation logic is based on the visibility of the modal.

PopoverMenu may be the more appropriate option here but I think it lacks scroll support. (It also lacks the safe area support but that shouldn't be a concern anymore)

cc @nkdengineer Can you update your proposal to support keyboard navigation as well

[nkdengineer]

Let me check again.

[nkdengineer]

@s77rt I updated proposal with alternative solution for PopoverMenu.

[s77rt]

@nkdengineer Thanks for the update. The proposal overall looks good to me.

🎀 👀 🎀 C+ reviewed
Link to proposal

[melvin-bot]

Current assignee @dangrous is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[dangrous]

works for me!

[melvin-bot]

📣 @nkdengineer 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[nkdengineer]

@s77rt The PR is ready #49051.

[melvin-bot]

This issue has not been updated in over 15 days. @dangrous, @s77rt, @RachCHopkins, @nkdengineer eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[s77rt]

Still trying to fix a performance issue