From cee09d269b45d15c3fdcb1d40bd309b5f3f4b7ef Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 23 Feb 2024 18:16:22 +0100 Subject: [PATCH 1/2] fix: broken search screen on Android --- .../AppNavigator/ModalStackNavigators.tsx | 66 ++++++++++--------- 1 file changed, 36 insertions(+), 30 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index cd75a6d31fdb..92a5940ee5b4 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,43 @@ 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]} - /> - ))} - - ); +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; } - - 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 +162,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, }); From b6f71a104a39bf0845443e614f5bfd6b2f9ddb96 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 23 Feb 2024 19:22:43 +0100 Subject: [PATCH 2/2] fix: prettier --- src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index 92a5940ee5b4..83afabda66c2 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -47,7 +47,10 @@ type Screens = Partial React.ComponentType>>; * @param getScreenOptions optional function that returns the screen options, override the default options */ function createModalStackNavigatorFactory(factory: typeof createPlatformStackNavigator) { - return function createNestedModalStackNavigator(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType { + return function createNestedModalStackNavigator( + screens: Screens, + getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions, + ): React.ComponentType { const ModalStackNavigator = factory(); function ModalStack() { @@ -77,7 +80,7 @@ function createModalStackNavigatorFactory(factory: typeof createPlatformStackNav ModalStack.displayName = 'ModalStack'; return ModalStack; - } + }; } const createModalStackNavigator = createModalStackNavigatorFactory(createPlatformStackNavigator);