Add getStateToRender to createSplitStackNavigator, splits types fixes

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<ReactComponentModule>('../../../../pages/settings/InitialSettingsPage').default;
 

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);

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<ParamListBase>, isSmallScreenWidth: boolean): StackNavigationState<ParamListBase> {
+    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<ParamList extends ParamListBase>(props: SplitStackNavigatorProps<ParamList>) {
     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,14 +58,16 @@ function SplitStackNavigator<ParamList extends ParamListBase>(props: SplitStackN
 
     useHandleScreenResize(navigation);
 
+    const stateToRender = useMemo(() => getStateToRender(state, isSmallScreenWidth), [state, isSmallScreenWidth]);
+
     return (
         <FocusTrapForScreens>
             <View style={styles.rootNavigatorContainerStyles(shouldUseNarrowLayout)}>
                 <NavigationContent>
                     <StackView
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...props}
-                        state={state}
+                        state={stateToRender}
                         descriptors={descriptors}
                         navigation={navigation}
                     />