[Due for payment 2025-03-25] [$250] Web - Login - "isReportTopmostSplitNavigator" console error when navigating to the login

[IuliiaHerets]

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.1.4-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #56932
Issue reported by: Applause Internal Team
Device used: Windows 10 / Chrome
App Component: Other

Action Performed:

1. Open Chrome and Press F12 to open the console
2. Navigate to https://staging.new.expensify.com/

Expected Result:

There shouldn't be any console errors.

Actual Result:

"isReportTopmostSplitNavigator" console error when navigating to the login page. It can also repro by refreshing the page when the user is logged in.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6750670_1740205712005.bandicam_2025-02-22_07-23-13-189.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021894565992813801912
• Upwork Job ID: 1894565992813801912
• Last Price Increase: 2025-03-05
• Automatic offers:
• samranahm | Contributor | 106456704

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

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

[samranahm]

Proposal

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

Web - Login - "isReportTopmostSplitNavigator" console error when navigating to the login

What is the root cause of that problem?

Navigation object is being accessed before React Navigation has been properly initialized

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

Here

App/src/libs/Navigation/helpers/isReportTopmostSplitNavigator.ts

Lines 6 to 11 in 0b6d1a0

	const isReportTopmostSplitNavigator = (): boolean => {
	const rootState = navigationRef.getRootState() as State<RootNavigatorParamList>;
	if (!rootState) {
	return false;
	}

we should add a check to early return if navigation object is not ready yet

const isReportTopmostSplitNavigator = (): boolean => {
    if (!navigationRef.isReady()) {
        return false;
    }
    const rootState = navigationRef.getRootState() as State<RootNavigatorParamList>;

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)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[daledah]

Proposal

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

"isReportTopmostSplitNavigator" console error when navigating to the login page. It can also repro by refreshing the page when the user is logged in.

What is the root cause of that problem?

In this useEffect:

App/src/components/VideoPlayerContexts/PlaybackContext.tsx

Line 122 in 7e30096

if ((!currentReportID && isReportTopmostSplitNavigator()) || (!prevCurrentReportID && !isReportTopmostSplitNavigator()) || currentReportID === prevCurrentReportID) {

we call isReportTopmostSplitNavigator(), which internally uses navigationRef.getRootState():

App/src/libs/Navigation/helpers/isReportTopmostSplitNavigator.ts

Line 7 in 0b6d1a0

const rootState = navigationRef.getRootState() as State<RootNavigatorParamList>;

If the navigation ref is not ready, this will trigger the error mentioned in the bug.

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

• To fix this, we should wrap this logic inside Navigation.isNavigationReady().then:

        Navigation.isNavigationReady().then(() => {
            if ((!currentReportID && isReportTopmostSplitNavigator()) || (!prevCurrentReportID && !isReportTopmostSplitNavigator()) || currentReportID === prevCurrentReportID) {
                return;
            }

            // We call another setStatusAsync inside useLayoutEffect on the video component,
            // so we add a delay here to prevent the error from appearing.
            setTimeout(() => {
                resetVideoPlayerData();
            }, 0);
        });

• Explaination: The updated logic ensures that isReportTopmostSplitNavigator() is only called when the navigation ref is ready, rather than defaulting its result to false when the navigation ref is not yet available. This approach is similar to how the navigate method handles navigation:

• When Navigation.navigate(route) is called before the navigation ref is not ready, it doesn't simply fail. Instead, it stores the route as a pending action and waits until the navigation ref is ready before executing it:
  

  App/src/libs/Navigation/Navigation.ts

  Lines 162 to 163 in f1fd32f

  	Log.hmmm(`[Navigation] Container not yet ready, storing route as pending: ${route}`);
  	pendingRoute = route;

  
  

  App/src/libs/Navigation/Navigation.ts

  Line 421 in f1fd32f

  goToPendingRoute();

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

NA

What alternative solutions did you explore? (Optional)

[strepanier03]

Able to reproduce.

[melvin-bot]

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

[melvin-bot]

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