Merge pull request Expensify#32422 from tienifr/fix/31503

fix: 31503 Report gets blank after resizing

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js

@@ -1,6 +1,7 @@
 import {StackRouter} from '@react-navigation/native';
 import lodashFindLast from 'lodash/findLast';
 import _ from 'underscore';
+import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 
@@ -68,8 +69,9 @@ function CustomRouter(options) {
     return {
         ...stackRouter,
         getRehydratedState(partialState, {routeNames, routeParamList}) {
+            const isSmallScreenWidth = getIsSmallScreenWidth();
             // Make sure that there is at least one CentralPaneNavigator (ReportScreen by default) in the state if this is a wide layout
-            if (!isAtLeastOneCentralPaneNavigatorInState(partialState) && !options.getIsSmallScreenWidth()) {
+            if (!isAtLeastOneCentralPaneNavigatorInState(partialState) && !isSmallScreenWidth) {
                 // If we added a route we need to make sure that the state.stale is true to generate new key for this route
                 // eslint-disable-next-line no-param-reassign
                 partialState.stale = true;

src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js

@@ -57,8 +57,6 @@ function ResponsiveStackNavigator(props) {
         children: props.children,
         screenOptions: props.screenOptions,
         initialRouteName: props.initialRouteName,
-        // Options for useNavigationBuilder won't update on prop change, so we need to pass a getter for the router to have the current state of isSmallScreenWidth.
-        getIsSmallScreenWidth: () => isSmallScreenWidthRef.current,
     });
 
     const stateToRender = useMemo(() => {

src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.js

@@ -36,8 +36,6 @@ function ResponsiveStackNavigator(props) {
         children: props.children,
         screenOptions: props.screenOptions,
         initialRouteName: props.initialRouteName,
-        // Options for useNavigationBuilder won't update on prop change, so we need to pass a getter for the router to have the current state of isSmallScreenWidth.
-        getIsSmallScreenWidth: () => isSmallScreenWidthRef.current,
     });
 
     return (

src/libs/getIsSmallScreenWidth.ts

@@ -0,0 +1,6 @@
+import {Dimensions} from 'react-native';
+import variables from '@styles/variables';
+
+export default function getIsSmallScreenWidth(windowWidth = Dimensions.get('window').width) {
+    return windowWidth <= variables.mobileResponsiveWidthBreakpoint;
+}