Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LHN list re-render #36927

Merged
merged 9 commits into from
Mar 12, 2024
3 changes: 1 addition & 2 deletions src/libs/Navigation/FreezeWrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
import React, {useEffect, useRef, useState} from 'react';
import {Freeze} from 'react-freeze';
import {InteractionManager} from 'react-native';
import type ChildrenProps from '@src/types/utils/ChildrenProps';

type FreezeWrapperProps = ChildrenProps & {
Expand Down Expand Up @@ -29,7 +28,7 @@ function FreezeWrapper({keepVisible = false, children}: FreezeWrapperProps) {
// we don't want to freeze the screen if it's the previous screen because the freeze placeholder
// would be visible at the beginning of the back animation then
if ((navigation.getState()?.index ?? 0) - (screenIndexRef.current ?? 0) > 1) {
InteractionManager.runAfterInteractions(() => setIsScreenBlurred(true));
hayata-suenaga marked this conversation as resolved.
Show resolved Hide resolved
setIsScreenBlurred(true);
} else {
setIsScreenBlurred(false);
}
Expand Down
5 changes: 1 addition & 4 deletions src/pages/home/sidebar/SidebarScreen/index.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import React from 'react';
import useWindowDimensions from '@hooks/useWindowDimensions';
import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
import BaseSidebarScreen from './BaseSidebarScreen';
import sidebarPropTypes from './sidebarPropTypes';

function SidebarScreen(props) {
const {isSmallScreenWidth} = useWindowDimensions();

return (
<FreezeWrapper keepVisible={!isSmallScreenWidth}>
<FreezeWrapper>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you remove this? Is the sidebar still clickable if you e.g. navigate to different reports twice? I think it was handling a case where you have the sidebar visible all the time and navigate deeper in the main stack, but maybe the navigation structure changed in a way that it is not necessary right now?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI I tested this fix locally and the list is still fully clickable on the web, and causes no issues on mobile. It seems plausible that the nav structure changed and this is no loner a case

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

keepVisible completely disables freezing for a 'big' screen. I believe the original idea of this chunk was to freeze it directly in such cases. I wonder why we used this approach before. It might be a leftover from the previous navigation structure

<BaseSidebarScreen
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
Expand Down
Loading