Merge pull request #35845 from software-mansion-labs/ideal-nav-fix-ipad

[Wave 8] [Ideal Nav] Fix iPad navigation

src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/CustomFullScreenRouter.tsx

@@ -1,6 +1,6 @@
 import type {ParamListBase, PartialState, RouterConfigOptions, StackNavigationState} from '@react-navigation/native';
 import {StackRouter} from '@react-navigation/native';
-import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
+import getIsNarrowLayout from '@libs/getIsNarrowLayout';
 import SCREENS from '@src/SCREENS';
 import type {FullScreenNavigatorRouterOptions} from './types';
 
@@ -9,11 +9,11 @@ type StackState = StackNavigationState<ParamListBase> | PartialState<StackNaviga
 const isAtLeastOneInState = (state: StackState, screenName: string): boolean => !!state.routes.find((route) => route.name === screenName);
 
 function adaptStateIfNecessary(state: StackState) {
-    const isSmallScreenWidth = getIsSmallScreenWidth();
+    const isNarrowLayout = getIsNarrowLayout();
     // If the screen is wide, there should be at least two screens inside:
     // - SETINGS.ROOT to cover left pane.
     // - SETTINGS_CENTRAL_PANE to cover central pane.
-    if (!isSmallScreenWidth) {
+    if (!isNarrowLayout) {
         if (!isAtLeastOneInState(state, SCREENS.SETTINGS.ROOT)) {
             // @ts-expect-error Updating read only property
             // noinspection JSConstantReassignment

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

@@ -1,7 +1,7 @@
 import type {RouterConfigOptions, StackNavigationState} from '@react-navigation/native';
 import {getPathFromState, StackRouter} from '@react-navigation/native';
 import type {ParamListBase} from '@react-navigation/routers';
-import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
+import getIsNarrowLayout from '@libs/getIsNarrowLayout';
 import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute';
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import linkingConfig from '@libs/Navigation/linkingConfig';
@@ -38,10 +38,10 @@ function compareAndAdaptState(state: StackNavigationState<RootStackParamList>) {
 
     // We need to be sure that the bottom tab state is defined.
     const topmostBottomTabRoute = getTopmostBottomTabRoute(state);
-    const isSmallScreenWidth = getIsSmallScreenWidth();
+    const isNarrowLayout = getIsNarrowLayout();
 
     // This solutions is heuristics and will work for our cases. We may need to improve it in the future if we will have more cases to handle.
-    if (topmostBottomTabRoute && !isSmallScreenWidth) {
+    if (topmostBottomTabRoute && !isNarrowLayout) {
         const fullScreenRoute = state.routes.find((route) => route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR);
 
         // If there is fullScreenRoute we don't need to add anything.

src/libs/Navigation/linkTo.ts

@@ -1,7 +1,7 @@
 import {getActionFromState} from '@react-navigation/core';
 import type {NavigationAction, NavigationContainerRef, NavigationState, PartialState} from '@react-navigation/native';
 import type {Writable} from 'type-fest';
-import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
+import getIsNarrowLayout from '@libs/getIsNarrowLayout';
 import {extractPolicyIDFromPath, getPathWithoutPolicyID} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
@@ -212,7 +212,7 @@ 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()) {
+            if (!getIsNarrowLayout()) {
                 // 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)!;

src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

@@ -1,7 +1,7 @@
 import type {NavigationState, PartialState} from '@react-navigation/native';
 import {getStateFromPath} from '@react-navigation/native';
 import {isAnonymousUser} from '@libs/actions/Session';
-import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
+import getIsNarrowLayout from '@libs/getIsNarrowLayout';
 import getTopmostNestedRHPRoute from '@libs/Navigation/getTopmostNestedRHPRoute';
 import type {BottomTabName, CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
 import {extractPolicyIDFromPath, getPathWithoutPolicyID} from '@libs/PolicyUtils';
@@ -132,7 +132,7 @@ function getMatchingRootRouteForRHPRoute(
 }
 
 function getAdaptedState(state: PartialState<NavigationState<RootStackParamList>>, policyID?: string): GetAdaptedStateReturnType {
-    const isSmallScreenWidth = getIsSmallScreenWidth();
+    const isNarrowLayout = getIsNarrowLayout();
     const metainfo = {
         isCentralPaneAndBottomTabMandatory: true,
         isFullScreenNavigatorMandatory: true,
@@ -194,7 +194,7 @@ function getAdaptedState(state: PartialState<NavigationState<RootStackParamList>
                 policyID,
             ),
         );
-        if (!isSmallScreenWidth) {
+        if (!isNarrowLayout) {
             routes.push(
                 createCentralPaneNavigator({
                     name: SCREENS.REPORT,
@@ -226,7 +226,7 @@ function getAdaptedState(state: PartialState<NavigationState<RootStackParamList>
                 policyID,
             ),
         );
-        if (!isSmallScreenWidth) {
+        if (!isNarrowLayout) {
             routes.push(createCentralPaneNavigator({name: SCREENS.REPORT}));
         }
         routes.push(fullScreenNavigator);
@@ -254,7 +254,7 @@ function getAdaptedState(state: PartialState<NavigationState<RootStackParamList>
         // Routes
         // - found bottom tab
         // - matching central pane on desktop layout
-        if (isSmallScreenWidth) {
+        if (isNarrowLayout) {
             return {
                 adaptedState: state,
                 metainfo,

src/libs/Navigation/switchPolicyID.ts

@@ -2,7 +2,7 @@ import {getActionFromState} from '@react-navigation/core';
 import type {NavigationAction, NavigationContainerRef, NavigationState, PartialState} from '@react-navigation/native';
 import {getPathFromState} from '@react-navigation/native';
 import type {ValueOf, Writable} from 'type-fest';
-import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
+import getIsNarrowLayout from '@libs/getIsNarrowLayout';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import type {Route} from '@src/ROUTES';
@@ -95,7 +95,7 @@ export default function switchPolicyID(navigation: NavigationContainerRef<RootSt
     }
 
     // If the layout is wide we need to push matching central pane route to the stack.
-    if (!getIsSmallScreenWidth()) {
+    if (!getIsNarrowLayout()) {
         // Case when the user selects "All" workspace from the specific workspace settings
         if (checkIfActionPayloadNameIsEqual(actionForBottomTabNavigator, SCREENS.ALL_SETTINGS) && !policyID) {
             root.dispatch({

src/libs/getIsNarrowLayout/index.native.ts

@@ -0,0 +1,3 @@
+export default function getIsNarrowLayout() {
+    return true;
+}

src/libs/getIsNarrowLayout/index.ts

@@ -0,0 +1,5 @@
+import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
+
+export default function getIsNarrowLayout() {
+    return getIsSmallScreenWidth();
+}