From 1578aa521b29f4c77eab43416917c97649ea4c6b Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 4 Dec 2023 11:59:28 +0700 Subject: [PATCH] fix: 31503 --- .../AppNavigator/createCustomStackNavigator/CustomRouter.js | 4 +++- .../AppNavigator/createCustomStackNavigator/index.js | 2 -- .../AppNavigator/createCustomStackNavigator/index.native.js | 2 -- src/libs/getIsSmallScreenWidth.ts | 6 ++++++ 4 files changed, 9 insertions(+), 5 deletions(-) create mode 100644 src/libs/getIsSmallScreenWidth.ts diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js index 5d3eb38d49dc..05cc2e1f7976 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js +++ b/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; diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js index 8924b01e2acb..2e929c685648 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js +++ b/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(() => { diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.js b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.js index ae36f4aff9ad..a97e3f2e4ce5 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.js +++ b/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 ( diff --git a/src/libs/getIsSmallScreenWidth.ts b/src/libs/getIsSmallScreenWidth.ts new file mode 100644 index 000000000000..6fba45ea1319 --- /dev/null +++ b/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; +}