fix crash after loggin in

software-mansion-labs · Dec 19, 2023 · 88cc5f9 · 88cc5f9
1 parent f496947
commit 88cc5f9
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 17 deletions.
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -19,7 +19,12 @@ function BottomTabBar() {
     const styles = useThemeStyles();
 
     // Parent navigator of the bottom tab bar is the root navigator.
-    const currentTabName = useNavigationState<RootStackParamList, string>((state) => getTopmostBottomTabRoute(state).name);
+    const currentTabName = useNavigationState<RootStackParamList, string | undefined>((state) => {
+        const topmostBottomTabRoute = getTopmostBottomTabRoute(state);
+        if (topmostBottomTabRoute) {
+            return topmostBottomTabRoute.name;
+        }
+    });
 
     return (
         <View style={styles.bottomTabBarContainer}>

diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts
@@ -19,7 +19,9 @@ const isAtLeastOneInState = (state: State, screenName: string): boolean => !!sta
  * @param state - react-navigation state
  */
 const addCentralPaneNavigatorRoute = (state: State<RootStackParamList>) => {
-    const matchingCentralPaneRoute = getMatchingCentralPaneRouteForState(state);
+    // We only add the route if the bottom tab state is defined therefore matchingCentralPaneRoute will be defined.
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const matchingCentralPaneRoute = getMatchingCentralPaneRouteForState(state)!;
 
     const bottomTabRoute = state.routes.filter((route) => route.name === NAVIGATORS.BOTTOM_TAB_NAVIGATOR);
     const centralPaneRoutes = state.routes.filter((route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR);
@@ -105,19 +107,23 @@ function CustomRouter(options: ResponsiveStackNavigatorRouterOptions) {
     return {
         ...stackRouter,
         getRehydratedState(partialState: StackNavigationState<RootStackParamList>, {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
-            const topmostCentralPaneRoute = getTopmostCentralPaneRoute(partialState);
             const topmostBottomTabRoute = getTopmostBottomTabRoute(partialState);
+            const isSmallScreenWidth = getIsSmallScreenWidth();
 
-            const isBottomTabMatchingCentralPane = topmostCentralPaneRoute && TAB_TO_CENTRAL_PANE_MAPPING[topmostBottomTabRoute.name].includes(topmostCentralPaneRoute.name);
-
-            if (!isSmallScreenWidth && !isBottomTabMatchingCentralPane) {
-                // If we added a route we need to make sure that the state.stale is true to generate new key for this route
-                // @ts-expect-error Updating read only property
-                // noinspection JSConstantReassignment
-                partialState.stale = true; // eslint-disable-line
-                addCentralPaneNavigatorRoute(partialState);
+            // If we log in there is a few rehydrations where the state for the bottomTab doesn't exist yet.
+            // isSmallScreen is checked here to avoid calling check functions for optimazation purposes.
+            if (topmostBottomTabRoute && !isSmallScreenWidth) {
+                const topmostCentralPaneRoute = getTopmostCentralPaneRoute(partialState);
+                const isBottomTabMatchingCentralPane = topmostCentralPaneRoute && TAB_TO_CENTRAL_PANE_MAPPING[topmostBottomTabRoute.name].includes(topmostCentralPaneRoute.name);
+
+                if (!isSmallScreenWidth && !isBottomTabMatchingCentralPane) {
+                    // If we added a route we need to make sure that the state.stale is true to generate new key for this route
+                    // @ts-expect-error Updating read only property
+                    // noinspection JSConstantReassignment
+                    partialState.stale = true; // eslint-disable-line
+                    addCentralPaneNavigatorRoute(partialState);
+                }
             }
             handleSettingsOpened(partialState);
             const state = stackRouter.getRehydratedState(partialState, {routeNames, routeParamList, routeGetIdList});

diff --git a/src/libs/Navigation/getMatchingCentralPaneRouteForState.ts b/src/libs/Navigation/getMatchingCentralPaneRouteForState.ts
@@ -32,9 +32,13 @@ const getTopMostReportIDFromRHP = (state: State): string => {
 };
 
 // Get matching central pane route for bottom tab navigator. e.g HOME -> REPORT
-function getMatchingCentralPaneRouteForState(state: State<RootStackParamList>): NavigationPartialRoute<CentralPaneName> {
+function getMatchingCentralPaneRouteForState(state: State<RootStackParamList>): NavigationPartialRoute<CentralPaneName> | undefined {
     const topmostBottomTabRoute = getTopmostBottomTabRoute(state);
 
+    if (!topmostBottomTabRoute) {
+        return;
+    }
+
     const centralPaneName = TAB_TO_CENTRAL_PANE_MAPPING[topmostBottomTabRoute.name][0];
 
     if (topmostBottomTabRoute.name === SCREENS.WORKSPACE.INITIAL) {

diff --git a/src/libs/Navigation/getTopmostBottomTabRoute.ts b/src/libs/Navigation/getTopmostBottomTabRoute.ts
@@ -1,10 +1,11 @@
 import {BottomTabName, NavigationPartialRoute, RootStackParamList, State} from './types';
 
-function getTopmostBottomTabRoute(state: State<RootStackParamList>): NavigationPartialRoute<BottomTabName> {
+function getTopmostBottomTabRoute(state: State<RootStackParamList>): NavigationPartialRoute<BottomTabName> | undefined {
     const bottomTabNavigatorRoute = state.routes[0];
 
+    // The bottomTabNavigatorRoute state may be empty if we just logged in.
     if (!bottomTabNavigatorRoute || bottomTabNavigatorRoute.name !== 'BottomTabNavigator' || bottomTabNavigatorRoute.state === undefined) {
-        throw new Error('There is no bottomTabNavigator route mounted as the first route in the root state.');
+        return undefined;
     }
 
     const topmostBottomTabRoute = bottomTabNavigatorRoute.state.routes.at(-1);

diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts
@@ -124,7 +124,7 @@ export default function linkTo(navigation: NavigationContainerRef<RootStackParam
             // We need to push a tab if the tab doesn't match the central pane route that we are going to push.
             const topmostBottomTabRoute = getTopmostBottomTabRoute(rootState);
             const matchingBottomTabRoute = getMatchingBottomTabRouteForState(stateFromPath);
-            if (topmostBottomTabRoute.name !== matchingBottomTabRoute.name) {
+            if (topmostBottomTabRoute && topmostBottomTabRoute.name !== matchingBottomTabRoute.name) {
                 root.dispatch({
                     type: CONST.NAVIGATION.ACTION_TYPE.PUSH,
                     payload: matchingBottomTabRoute,
@@ -155,7 +155,9 @@ export default function linkTo(navigation: NavigationContainerRef<RootStackParam
             root.dispatch(actionForBottomTabNavigator);
             // If the layout is wide we need to push matching central pane route to the stack.
             if (!getIsSmallScreenWidth()) {
-                const matchingCentralPaneRoute = getMatchingCentralPaneRouteForState(stateFromPath);
+                // stateFromPath should always include bottom tab navigator state, so getMatchingCentralPaneRouteForState will be always defined.
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const matchingCentralPaneRoute = getMatchingCentralPaneRouteForState(stateFromPath)!;
                 root.dispatch({
                     type: CONST.NAVIGATION.ACTION_TYPE.PUSH,
                     payload: {