[$250] Expense - split expense date selector: unnecessary additional tap on back button to close the modal

[burczu]

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.1.65-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): bartek.dybowski@callstack.com

Action Performed:

1. Open App
2. Go to workspace chat and tap "+"
3. Tap "Split expense"
4. Provide the amount and go next
5. Tap "Show more"
6. Tap "Date"
7. Tap back button twice

Expected Result:

It should close the modal right away after the first tap on the back button

Actual Result:

First tap on the back button closes the date picker, the second one actually closes the modal.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2025-06-08.at.18.49.02.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021935364869221520609
• Upwork Job ID: 1935364869221520609
• Last Price Increase: 2025-08-27

Issue Owner

Current Issue Owner: @ahmedGaber93

[melvin-bot]

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

[MobileMage]

Proposal

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

When using the date selector in the split expense flow, users need to tap the back button twice to close the modal - once to close the date picker and again to close the modal itself. This creates a poor user experience as it requires an unnecessary additional interaction.

What is the root cause of that problem?

The root cause is that the back button navigation is not properly handled at the screen level. The current implementation doesn't properly integrate with React Navigation's navigation lifecycle, causing the back button to only handle the date picker's state before actually navigating back. This creates a two-step process when it should be a single action.

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

We should modify the IOURequestStepDate component to use React Navigation's useFocusEffect hook to handle the back button press. This will ensure that a single back button press properly closes both the date picker and the modal. The implementation will use a single navigation handler that properly integrates with React Navigation's lifecycle.

Here's the key change:

import {useFocusEffect} from '@react-navigation/native';

function IOURequestStepDate({...props}) {
    const navigateBack = () => {
        Navigation.goBack(backTo);
    };

    useFocusEffect(
        useCallback(() => {
            const onBackPress = () => {
                navigateBack();
                return true;
            };

            const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
            return () => subscription.remove();
        }, []),
    );

    // ... rest of the component
}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

We should add a test that verifies the back button behavior in the date selector modal:

describe('IOURequestStepDate', () => {
    it('should close the modal with a single back button press', () => {
        // Test implementation
        const {getByTestId} = render(<IOURequestStepDate {...props} />);
        fireEvent.press(getByTestId('back-button'));
        expect(mockNavigation.goBack).toHaveBeenCalledTimes(1);
    });
});

What alternative solutions did you explore? (Optional)

We explored three alternative solutions:

1. Using useEffect with BackHandler in the main component
2. Adding back button handling at the CalendarPicker level
3. Modifying the DatePicker component to emit additional events

This solution was chosen because it provides the cleanest integration with React Navigation and maintains a single source of truth for navigation handling.

[thelullabyy]

Proposal

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

• Expense - split expense date selector: unnecessary additional tap on back button to close the modal

What is the root cause of that problem?

• The DatePickerModal is rendered as a modal with a backdrop, as seen here.
• Because of this backdrop behavior, interacting with the app back button while the date picker modal is open dismisses only the date picker modal. A second press is required to close the RHP.

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

• In the DatePickerModal component here, we can pass the withoutOverlay prop to avoid the backdrop behavior.
• In the Popover component here, we should update the logic by using isSmallScreenWidth instead of shouldUseNarrowLayout. This change should be gated by a new flag to ensure it only applies in the intended scenarios and does not affect other components.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• N/A

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ahmedGaber93 (External)

[ahmedGaber93]

we should update the logic by using isSmallScreenWidth instead of shouldUseNarrowLayout

@thelullabyy could you first explain why we use !shouldUseNarrowLayout here?

App/src/components/Popover/index.tsx

Line 84 in 7b6e4e1

if (withoutOverlay && !shouldUseNarrowLayout) {