Merge pull request #34396 from Expensify/vit-revertfireroom2024-01-11

[CP Staging] Revert "Merge pull request #32422 from tienifr/fix/31503"

(cherry picked from commit ee96c56)

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

@@ -1,7 +1,6 @@
 import type {NavigationState, PartialState, RouterConfigOptions, StackNavigationState} from '@react-navigation/native';
 import {StackRouter} from '@react-navigation/native';
 import type {ParamListBase} from '@react-navigation/routers';
-import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import type {ResponsiveStackNavigatorRouterOptions} from './types';
@@ -65,9 +64,8 @@ function CustomRouter(options: ResponsiveStackNavigatorRouterOptions) {
     return {
         ...stackRouter,
         getRehydratedState(partialState: StackNavigationState<ParamListBase>, {routeNames, routeParamList, routeGetIdList}: RouterConfigOptions): StackNavigationState<ParamListBase> {
-            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) && !isSmallScreenWidth) {
+            if (!isAtLeastOneCentralPaneNavigatorInState(partialState) && !options.getIsSmallScreenWidth()) {
                 // 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

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

@@ -24,6 +24,8 @@ function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) {
         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/Navigation/AppNavigator/createCustomStackNavigator/index.tsx

@@ -46,6 +46,8 @@ function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) {
         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/types.ts

@@ -5,7 +5,9 @@ type ResponsiveStackNavigatorConfig = {
     isSmallScreenWidth: boolean;
 };
 
-type ResponsiveStackNavigatorRouterOptions = StackRouterOptions;
+type ResponsiveStackNavigatorRouterOptions = StackRouterOptions & {
+    getIsSmallScreenWidth: () => boolean;
+};
 
 type ResponsiveStackNavigatorProps = DefaultNavigatorOptions<ParamListBase, StackNavigationState<ParamListBase>, StackNavigationOptions, StackNavigationEventMap> &
     ResponsiveStackNavigatorConfig;