diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index cd75a6d31fdb..83afabda66c2 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -1,5 +1,6 @@ import type {ParamListBase} from '@react-navigation/routers'; import type {StackNavigationOptions} from '@react-navigation/stack'; +import {createStackNavigator} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import useThemeStyles from '@hooks/useThemeStyles'; import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; @@ -45,38 +46,46 @@ type Screens = Partial React.ComponentType>>; * @param screens key/value pairs where the key is the name of the screen and the value is a functon that returns the lazy-loaded component * @param getScreenOptions optional function that returns the screen options, override the default options */ -function createModalStackNavigator(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType { - const ModalStackNavigator = createPlatformStackNavigator(); - - function ModalStack() { - const styles = useThemeStyles(); - - const defaultSubRouteOptions = useMemo( - (): StackNavigationOptions => ({ - ...subRouteOptions, - cardStyle: styles.navigationScreenCardStyle, - }), - [styles], - ); - - return ( - - {Object.keys(screens as Required).map((name) => ( - )[name as Screen]} - /> - ))} - - ); - } - - ModalStack.displayName = 'ModalStack'; - - return ModalStack; +function createModalStackNavigatorFactory(factory: typeof createPlatformStackNavigator) { + return function createNestedModalStackNavigator( + screens: Screens, + getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions, + ): React.ComponentType { + const ModalStackNavigator = factory(); + + function ModalStack() { + const styles = useThemeStyles(); + + const defaultSubRouteOptions = useMemo( + (): StackNavigationOptions => ({ + ...subRouteOptions, + cardStyle: styles.navigationScreenCardStyle, + }), + [styles], + ); + + return ( + + {Object.keys(screens as Required).map((name) => ( + )[name as Screen]} + /> + ))} + + ); + } + + ModalStack.displayName = 'ModalStack'; + + return ModalStack; + }; } +const createModalStackNavigator = createModalStackNavigatorFactory(createPlatformStackNavigator); +const createJSModalStackNavigator = createModalStackNavigatorFactory(createStackNavigator); + const MoneyRequestModalStackNavigator = createModalStackNavigator({ [SCREENS.MONEY_REQUEST.START]: () => require('../../../pages/iou/request/IOURequestRedirectToStartPage').default as React.ComponentType, [SCREENS.MONEY_REQUEST.CREATE]: () => require('../../../pages/iou/request/IOURequestStartPage').default as React.ComponentType, @@ -156,7 +165,7 @@ const RoomInviteModalStackNavigator = createModalStackNavigator require('../../../pages/RoomInvitePage').default as React.ComponentType, }); -const SearchModalStackNavigator = createModalStackNavigator({ +const SearchModalStackNavigator = createJSModalStackNavigator({ [SCREENS.SEARCH_ROOT]: () => require('../../../pages/SearchPage').default as React.ComponentType, });