diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts index 10cee2c85952..020719e2dc36 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts +++ b/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, {routeNames, routeParamList, routeGetIdList}: RouterConfigOptions): StackNavigationState { - 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 diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx index 151dd0a0f893..5f1010da2ed1 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx +++ b/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 ( diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx index 3f6025d5ff0c..06845e6e6f61 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx +++ b/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(() => { diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts index 09d35e2a1680..ea94fed19b11 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts +++ b/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, StackNavigationOptions, StackNavigationEventMap> & ResponsiveStackNavigatorConfig; diff --git a/src/libs/getIsSmallScreenWidth.ts b/src/libs/getIsSmallScreenWidth.ts deleted file mode 100644 index 6fba45ea1319..000000000000 --- a/src/libs/getIsSmallScreenWidth.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {Dimensions} from 'react-native'; -import variables from '@styles/variables'; - -export default function getIsSmallScreenWidth(windowWidth = Dimensions.get('window').width) { - return windowWidth <= variables.mobileResponsiveWidthBreakpoint; -}