Extract WorkspaceSettingsModalStackNavigator

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -1,8 +1,7 @@
 import type {ParamListBase} from '@react-navigation/routers';
 import type {StackNavigationOptions} from '@react-navigation/stack';
-import {CardStyleInterpolators, createStackNavigator} from '@react-navigation/stack';
-import React, {useMemo} from 'react';
-import useThemeStyles from '@hooks/useThemeStyles';
+import {createStackNavigator} from '@react-navigation/stack';
+import React from 'react';
 import type {
     AddPersonalBankAccountNavigatorParamList,
     DetailsNavigatorParamList,
@@ -35,6 +34,8 @@ import type {
 import type {ThemeStyles} from '@styles/index';
 import type {Screen} from '@src/SCREENS';
 import SCREENS from '@src/SCREENS';
+import useModalScreenOptions from './ModalStackNavigators/useModalScreenOptions';
+import WorkspaceSettingsModalStackNavigator from './ModalStackNavigators/WorkspaceSettingsModalStackNavigator';
 
 type Screens = Partial<Record<Screen, () => React.ComponentType>>;
 
@@ -48,19 +49,10 @@ function createModalStackNavigator<TStackParams extends ParamListBase>(screens:
     const ModalStackNavigator = createStackNavigator<TStackParams>();
 
     function ModalStack() {
-        const styles = useThemeStyles();
-
-        const defaultSubRouteOptions = useMemo(
-            (): StackNavigationOptions => ({
-                cardStyle: styles.navigationScreenCardStyle,
-                headerShown: false,
-                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
-            }),
-            [styles],
-        );
+        const screenOptions = useModalScreenOptions(getScreenOptions);
 
         return (
-            <ModalStackNavigator.Navigator screenOptions={getScreenOptions?.(styles) ?? defaultSubRouteOptions}>
+            <ModalStackNavigator.Navigator screenOptions={screenOptions}>
                 {Object.keys(screens as Required<Screens>).map((name) => (
                     <ModalStackNavigator.Screen
                         key={name}
@@ -184,25 +176,6 @@ const NewTeachersUniteNavigator = createModalStackNavigator<TeachersUniteNavigat
     [SCREENS.I_AM_A_TEACHER]: () => require('../../../pages/TeachersUnite/ImTeacherPage').default as React.ComponentType,
 });
 
-const WorkspaceSettingsModalStackNavigator = createModalStackNavigator(
-    {
-        [SCREENS.WORKSPACE.PROFILE]: () => require('../../../pages/workspace/WorkspaceProfilePage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.CARD]: () => require('../../../pages/workspace/card/WorkspaceCardPage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.WORKFLOWS]: () => require('../../../pages/workspace/workflows/WorkspaceWorkflowsPage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.REIMBURSE]: () => require('../../../pages/workspace/reimburse/WorkspaceReimbursePage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.BILLS]: () => require('../../../pages/workspace/bills/WorkspaceBillsPage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.INVOICES]: () => require('../../../pages/workspace/invoices/WorkspaceInvoicesPage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.TRAVEL]: () => require('../../../pages/workspace/travel/WorkspaceTravelPage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.MEMBERS]: () => require('../../../pages/workspace/WorkspaceMembersPage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.CATEGORIES]: () => require('../../../pages/workspace/categories/WorkspaceCategoriesPage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.MORE_FEATURES]: () => require('../../../pages/workspace/WorkspaceMoreFeaturesPage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.TAGS]: () => require('../../../pages/workspace/tags/WorkspaceTagsPage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.TAXES]: () => require('../../../pages/workspace/taxes/WorkspaceTaxesPage').default as React.ComponentType,
-        [SCREENS.WORKSPACE.DISTANCE_RATES]: () => require('../../../pages/workspace/distanceRates/PolicyDistanceRatesPage').default as React.ComponentType,
-    },
-    (styles) => ({cardStyle: styles.navigationScreenCardStyle, headerShown: false}),
-);
-
 const WorkspaceSwitcherModalStackNavigator = createModalStackNavigator<WorkspaceSwitcherNavigatorParamList>({
     [SCREENS.WORKSPACE_SWITCHER.ROOT]: () => require('../../../pages/WorkspaceSwitcherPage').default as React.ComponentType,
 });

src/libs/Navigation/AppNavigator/ModalStackNavigators/WorkspaceSettingsModalStackNavigator.tsx

@@ -0,0 +1,82 @@
+import {createStackNavigator} from '@react-navigation/stack';
+import React from 'react';
+import SCREENS from '@src/SCREENS';
+import useModalScreenOptions from './useModalScreenOptions';
+
+const StackNavigator = createStackNavigator();
+
+function WorkspaceSettingsModalStackNavigator() {
+    const screenOptions = useModalScreenOptions((styles) => ({cardStyle: styles.navigationScreenCardStyle, headerShown: false}));
+
+    return (
+        <StackNavigator.Navigator screenOptions={screenOptions}>
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.PROFILE}
+                name={SCREENS.WORKSPACE.PROFILE}
+                getComponent={() => require('@pages/workspace/WorkspaceProfilePage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.CARD}
+                name={SCREENS.WORKSPACE.CARD}
+                getComponent={() => require('@pages/workspace/card/WorkspaceCardPage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.WORKFLOWS}
+                name={SCREENS.WORKSPACE.WORKFLOWS}
+                getComponent={() => require('@pages/workspace/workflows/WorkspaceWorkflowsPage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.REIMBURSE}
+                name={SCREENS.WORKSPACE.REIMBURSE}
+                getComponent={() => require('@pages/workspace/reimburse/WorkspaceReimbursePage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.BILLS}
+                name={SCREENS.WORKSPACE.BILLS}
+                getComponent={() => require('@pages/workspace/bills/WorkspaceBillsPage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.INVOICES}
+                name={SCREENS.WORKSPACE.INVOICES}
+                getComponent={() => require('@pages/workspace/invoices/WorkspaceInvoicesPage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.TRAVEL}
+                name={SCREENS.WORKSPACE.TRAVEL}
+                getComponent={() => require('@pages/workspace/travel/WorkspaceTravelPage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.MEMBERS}
+                name={SCREENS.WORKSPACE.MEMBERS}
+                getComponent={() => require('@pages/workspace/WorkspaceMembersPage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.CATEGORIES}
+                name={SCREENS.WORKSPACE.CATEGORIES}
+                getComponent={() => require('@pages/workspace/categories/WorkspaceCategoriesPage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.MORE_FEATURES}
+                name={SCREENS.WORKSPACE.MORE_FEATURES}
+                getComponent={() => require('@pages/workspace/WorkspaceMoreFeaturesPage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.TAGS}
+                name={SCREENS.WORKSPACE.TAGS}
+                getComponent={() => require('@pages/workspace/tags/WorkspaceTagsPage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.TAXES}
+                name={SCREENS.WORKSPACE.TAXES}
+                getComponent={() => require('@pages/workspace/taxes/WorkspaceTaxesPage').default as React.ComponentType}
+            />
+            <StackNavigator.Screen
+                key={SCREENS.WORKSPACE.DISTANCE_RATES}
+                name={SCREENS.WORKSPACE.DISTANCE_RATES}
+                getComponent={() => require('@pages/workspace/distanceRates/PolicyDistanceRatesPage').default as React.ComponentType}
+            />
+        </StackNavigator.Navigator>
+    );
+}
+
+export default WorkspaceSettingsModalStackNavigator;

src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts

@@ -0,0 +1,22 @@
+import type {StackNavigationOptions} from '@react-navigation/stack';
+import {CardStyleInterpolators} from '@react-navigation/stack';
+import {useMemo} from 'react';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {ThemeStyles} from '@src/styles';
+
+function useModalScreenOptions(getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions) {
+    const styles = useThemeStyles();
+
+    const defaultSubRouteOptions = useMemo(
+        (): StackNavigationOptions => ({
+            cardStyle: styles.navigationScreenCardStyle,
+            headerShown: false,
+            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+        }),
+        [styles],
+    );
+
+    return getScreenOptions?.(styles) ?? defaultSubRouteOptions;
+}
+
+export default useModalScreenOptions;