diff --git a/src/libs/Navigation/AppNavigator/Navigators/SettingsSplitNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/SettingsSplitNavigator.tsx index f912c3f5a225..dbc3f04f2d27 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/SettingsSplitNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/SettingsSplitNavigator.tsx @@ -4,11 +4,11 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import createSplitStackNavigator from '@libs/Navigation/AppNavigator/createSplitStackNavigator'; +import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions'; import type {SettingsSplitNavigatorParamList} from '@libs/Navigation/types'; import withPrepareCentralPaneScreen from '@src/components/withPrepareCentralPaneScreen'; import SCREENS from '@src/SCREENS'; import type ReactComponentModule from '@src/types/utils/ReactComponentModule'; -import getRootNavigatorScreenOptions from '../getRootNavigatorScreenOptions'; const loadInitialSettingsPage = () => require('../../../../pages/settings/InitialSettingsPage').default; diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts index 0ff878f48bc7..47346ec55ac4 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts @@ -120,7 +120,7 @@ function CustomRouter(options: ResponsiveStackNavigatorRouterOptions) { if (!lastRoute?.name || !MODAL_ROUTES_TO_DISMISS.includes(lastRoute?.name)) { Log.hmmm('[Navigation] dismissModal failed because there is no modal stack to dismiss'); - return; + return null; } return stackRouter.getStateForAction(state, newAction, configOptions); diff --git a/src/libs/Navigation/AppNavigator/createSplitStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createSplitStackNavigator/index.tsx index d90b60d2ac4d..80cf27eb1fe6 100644 --- a/src/libs/Navigation/AppNavigator/createSplitStackNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createSplitStackNavigator/index.tsx @@ -2,7 +2,7 @@ import type {ParamListBase, StackActionHelpers, StackNavigationState} from '@rea import {createNavigatorFactory, useNavigationBuilder, useRoute} from '@react-navigation/native'; import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack'; import {StackView} from '@react-navigation/stack'; -import React from 'react'; +import React, {useMemo} from 'react'; import {View} from 'react-native'; import FocusTrapForScreens from '@components/FocusTrap/FocusTrapForScreen'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -14,10 +14,25 @@ import type {SplitStackNavigatorProps, SplitStackNavigatorRouterOptions} from '. import useHandleScreenResize from './useHandleScreenResize'; import usePrepareSplitStackNavigatorChildren from './usePrepareSplitStackNavigatorChildren'; +function getStateToRender(state: StackNavigationState, isSmallScreenWidth: boolean): StackNavigationState { + const sidebarScreenRoute = state.routes.at(0); + const centralScreenRoutes = state.routes.slice(1); + const routes = isSmallScreenWidth ? state.routes.slice(-2) : [sidebarScreenRoute, ...centralScreenRoutes.slice(-2)]; + + // Routes passed to the state have to be defined + const definedRoutes = routes.filter((route) => route !== undefined); + + return { + ...state, + routes: definedRoutes, + index: routes.length - 1, + }; +} + function SplitStackNavigator(props: SplitStackNavigatorProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const {shouldUseNarrowLayout} = useResponsiveLayout(); + const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles, StyleUtils); const children = usePrepareSplitStackNavigatorChildren(props.children, props.sidebarScreen, screenOptions.homeScreen); @@ -43,6 +58,8 @@ function SplitStackNavigator(props: SplitStackN useHandleScreenResize(navigation); + const stateToRender = useMemo(() => getStateToRender(state, isSmallScreenWidth), [state, isSmallScreenWidth]); + return ( @@ -50,7 +67,7 @@ function SplitStackNavigator(props: SplitStackN