Expense - Side arrow to navigate to next month is hidden behind navigation bar.

@rushatgabhane

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: V9.3.54
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #85229
Email or phone of affected tester (no customers): dreamnitethedragon+vegst@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Redmi note 10s android 13
App Component: Workspace Settings

Action Performed:

Launch app
Open an expense
Tap date
Turn to landscape
Note side arrow to navigate to next month

Expected Result:

Side arrow to navigate to next month must not be hidden behind navigation bar.

Actual Result:

Side arrow to navigate to next month is hidden behind navigation bar.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug7124608_1775640085641.Screenrecorder-2026-04-08-14-48-11-565.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @rushatgabhane

@mjasikowski

@mjasikowski recently merged #85229, but they are OOO right now, so I'll auto-assign someone else.

@deetergp

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

💬 A slack conversation has been started in #expensify-open-source

👋 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:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

Proposal

What is the root cause of that problem?

The date picker opens as a BOTTOM_DOCKED modal on native (PopoverWithMeasuredContent/index.tsx:34). In landscape on Android, the modal container has width: '100%' and overflow: 'hidden' (ModalStyleUtils.ts:230-234), which refers to the full-screen window (including behind system bars, since statusBarTranslucent is enabled).

The calendar header's month navigation arrows are positioned with justifyContentEnd and mrn2 (marginRight: -8) (CalendarPicker/index.tsx:219), pushing them as close to the right content edge as possible.

On Android devices with 3-button navigation (like the Redmi Note 10s), the system navigation bar moves to the side of the screen in landscape mode. While getModalPaddingStyles applies paddingRight from safe area insets (styles/utils/index.ts:654), the NavigationBar component inside the modal only handles the bottom case (stickToBottom style) and doesn't account for side-positioned system bars in landscape (NavigationBar/index.android.tsx:19).

Additionally, RN <Modal> on Android creates a separate window, and there is no SafeAreaProvider inside the modal — the insets come from the app root's provider. This can cause useSafeAreaInsets() to return incorrect left/right values inside the modal window in landscape, resulting in insufficient padding and the arrows being hidden behind the system navigation bar.

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

Two options (not mutually exclusive):

Add a SafeAreaView or SafeAreaProvider inside the modal to ensure correct insets are reported for the modal's own window context. This would make paddingRight/paddingLeft from getModalPaddingStyles accurate in landscape.
Update the NavigationBar component (index.android.tsx) to handle landscape orientation — when the system nav bar is on the side, render the translucent background on the appropriate side (right or left) instead of always at the bottom.

The first option is the more robust fix since it addresses the root issue (incorrect insets inside Modal), which would fix not just this calendar picker but any BOTTOM_DOCKED modal content in landscape.

What alternative solutions did you explore? (Optional)

Removing the mrn2 negative margin from the calendar header arrow container would give slightly more breathing room, but doesn't address the fundamental safe area issue.
Adding hardcoded landscape padding to the calendar picker would be a narrow workaround that doesn't fix other modals.

Investigation details

Key code path:

User taps date → DatePicker → DatePickerModal → PopoverWithMeasuredContent
On native, this returns a BOTTOM_DOCKED Modal directly
BaseModal renders ReanimatedModal (RN <Modal> with statusBarTranslucent=true)
Modal container: width: '100%', overflow: 'hidden', paddingRight from useSafeAreaInsets()
In landscape: maxHeight: windowHeight * 0.75, content wrapped in ScrollView
CalendarPicker header arrows at right edge with mrn2 negative margin

Introduced by: Expensify/App#85229 ("Unlock landscape mode") — merged 2026-04-07. This PR enabled landscape orientation on mobile devices, exposing this safe area handling gap in modals.

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

already fixed here

@rushatgabhane

@rushatgabhane Eep! 4 days overdue now. Issues have feelings too...

@rushatgabhane

@rushatgabhane Still overdue 6 days?! Let's take care of this!

@rushatgabhane

@rushatgabhane Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

deployed to staging

This is one of 4 issues linked in the below PR, if payment is due, it'll be handled here

[Due for payment 2026-04-28] Android - Radio buttons are hidden behind navigation bar, unable to scroll down filters #87307 (comment)

We can close this one and handle the payment in the parent issue once all are done.

Navigation Menu

Expense - Side arrow to navigate to next month is hidden behind navigation bar. #87374

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Expense - Side arrow to navigate to next month is hidden behind navigation bar. #87374

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Apr 8, 2026

melvin-bot commented on Apr 8, 2026

melvin-bot commented on Apr 8, 2026

github-actions commented on Apr 8, 2026

MelvinBot commented on Apr 8, 2026

Proposal

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

3 remaining items

GCyganek commented on Apr 10, 2026

melvin-bot commented on Apr 13, 2026

melvin-bot commented on Apr 15, 2026

melvin-bot commented on Apr 17, 2026

GCyganek commented on Apr 20, 2026

mallenexpensify commented on Apr 28, 2026

truph01 commented on Apr 29, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions