[$500] Report gets blank after resizing

[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: 1.4.0.3
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: @shubham1206agra
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1700236291136659

Action Performed:

(watch the vid before you try to reproduce, it'll be more clear)

1. Open any report in full size
2. Go to small screen view
3. Press back header
4. Go to large view (>800) again

Expected Result:

All the messages should be loading

Actual Result:

Report becomes blank

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

Recording.243.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0195fdcb43d1c84e8f
• Upwork Job ID: 1725605698649042944
• Last Price Increase: 2023-11-24
• Automatic offers:
• alitoshmatov | Reviewer | 27909873
• tienifr | Contributor | 27909877

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[mallenexpensify]

Was able to reproduce after watching vid, def something we want t ofix. I feel like a version of this bug has existed before, I couldn't find any GHs for it though.

[tienifr]

Proposal

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

Report becomes blank

What is the root cause of that problem?

The getRehydratedState here is run before the useWindowDimensions hook render again, leading to the isSmallScreenWidth is still true when getRehydratedState is run while it actually should be false. This causes the Central Pane not to be added when resizing the screen and the report is blank.

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

In here, calculate the isSmallScreenWidth by using the Dimensions.get('window').width inside getRehydratedState to get the latest value.

const windowWidth = Dimensions.get('window').width;
const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;

The logic is the same as the existing isSmallScreenWidth calculation here, just that it uses current value of the window dimension instead of using a hook, and should be used in cases like this the isSmallScreenWidth needs to be retrieved immediately without delay of a hook render. The logic can be extracted to a getIsSmallScreenWidth method for reuse.

Then we can clean up the existing getIsSmallScreenWidth here in web since it's not used any more

What alternative solutions did you explore? (Optional)

NA

[barros001]

Proposal

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

When on a report, and switching screen to the small view (mobile), clicking back on the report (which takes you to LHN), and then switching back to desktop view, central panel will be empty. The same happens if you load the app on mobile view (which will land you on LHN) and expanding the window to desktop size, no central panel will be loaded.

What is the root cause of that problem?

The root problem is is the sequence in which things are rendered. The app is structured this way (very simplified)

<NavigatorRoot>
  <AuthScreens>
    <Navigator>...</Navigator>
  </AuthScreens>
</NavigatorRoot>

When you switch from mobile to desktop (and vice versa), these components would all re-render because they all relay on isSmallScreenWidth, which comes from useWindowDimensions hook. Normally things would happen in the correct sequence, but when switching views, things get out of order. Here's why:

App/src/libs/Navigation/NavigationRoot.js

Lines 74 to 80 in 3f7e66a

	useEffect(() => {
	if (!navigationRef.isReady() || !props.authenticated) {
	return;
	}
	// We need to force state rehydration so the CustomRouter can add the CentralPaneNavigator route if necessary.
	navigationRef.resetRoot(navigationRef.getRootState());
	}, [isSmallScreenWidth, props.authenticated]);

When isSmallScreenWidth, this hook gets executed which in turn will call navigationRef.resetRoot(navigationRef.getRootState());. That will trigger getRehydratedState which will look for isSmallScreenWidth. This all happens before <Navigation> gets a chance to re-render and update the value of isSmallScreenWidth. For that reason getRehydratedState will have a stale value and it will not add the central panel.

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

We need to delay calling navigationRef.resetRoot(navigationRef.getRootState()); until everything have been re-rendered. To accomplish that we have two options:

1. Move this useEffect into createCustomStackNavigator.js:

We can remove the use effect from NavigatorRoot and add to createCustomStackNavigator as follows:

    useEffect(() => {
        if (!navigationRef.isReady()) {
            return;
        }
        // We need to force state rehydration so the CustomRouter can add the CentralPaneNavigator route if necessary.
        navigationRef.resetRoot(navigationRef.getRootState());
    }, [isSmallScreenWidth]);

That will bring the logic closer to where it affects while making sure it only calls resetRoot when we have the correct value for isSmallScreenWidth.

2. Delay calling resetRoot:

    useEffect(() => {
        if (!navigationRef.isReady() || !props.authenticated) {
            return;
        }
        // We need to force state rehydration so the CustomRouter can add the CentralPaneNavigator route if necessary.
        setTimeout(() => {
            navigationRef.resetRoot(navigationRef.getRootState());
        }, 0);
    }, [isSmallScreenWidth, props.authenticated]);

Wrapping the call to resetRoot in a setTimeout with a 0 delay will just let javascript process everything in the queue first, which means it will let react re-render everything before going back to it. This solves the problem and the central panel is added back.

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.

[DevWithDerick]

Proposal

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

Report becomes blank when switching from desktop to mobile view, pressing back button and then going back to the desktop view

What is the root cause of that problem?

getRehydratedState function inside the CustomRouter is not called immediately after we switch from mobile to desktop (and other way around)

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

In the ResponsiveStackNavigator, we should add simple useEffect that is triggered when isSmallScreenWidth is changed and call navigation.reset(state); This will manually call getRehydratedState every time we have a transition desktop-mobile or mobile-desktop transition.