fix: broken search screen on Android

Expensify · Feb 23, 2024 · cee09d2 · cee09d2
1 parent 4a885f5
commit cee09d2
Showing 1 changed file with 36 additions and 30 deletions.
diff --git 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<Record<Screen, () => 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<TStackParams extends ParamListBase>(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType {
-    const ModalStackNavigator = createPlatformStackNavigator<TStackParams>();
-
-    function ModalStack() {
-        const styles = useThemeStyles();
-
-        const defaultSubRouteOptions = useMemo(
-            (): StackNavigationOptions => ({
-                ...subRouteOptions,
-                cardStyle: styles.navigationScreenCardStyle,
-            }),
-            [styles],
-        );
-
-        return (
-            <ModalStackNavigator.Navigator screenOptions={getScreenOptions?.(styles) ?? defaultSubRouteOptions}>
-                {Object.keys(screens as Required<Screens>).map((name) => (
-                    <ModalStackNavigator.Screen
-                        key={name}
-                        name={name}
-                        getComponent={(screens as Required<Screens>)[name as Screen]}
-                    />
-                ))}
-            </ModalStackNavigator.Navigator>
-        );
+function createModalStackNavigatorFactory(factory: typeof createPlatformStackNavigator) {
+    return function createNestedModalStackNavigator<TStackParams extends ParamListBase>(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType {
+        const ModalStackNavigator = factory<TStackParams>();
+
+        function ModalStack() {
+            const styles = useThemeStyles();
+
+            const defaultSubRouteOptions = useMemo(
+                (): StackNavigationOptions => ({
+                    ...subRouteOptions,
+                    cardStyle: styles.navigationScreenCardStyle,
+                }),
+                [styles],
+            );
+
+            return (
+                <ModalStackNavigator.Navigator screenOptions={getScreenOptions?.(styles) ?? defaultSubRouteOptions}>
+                    {Object.keys(screens as Required<Screens>).map((name) => (
+                        <ModalStackNavigator.Screen
+                            key={name}
+                            name={name}
+                            getComponent={(screens as Required<Screens>)[name as Screen]}
+                        />
+                    ))}
+                </ModalStackNavigator.Navigator>
+            );
+        }
+
+        ModalStack.displayName = 'ModalStack';
+
+        return ModalStack;
     }
-
-    ModalStack.displayName = 'ModalStack';
-
-    return ModalStack;
 }
 
+const createModalStackNavigator = createModalStackNavigatorFactory(createPlatformStackNavigator);
+const createJSModalStackNavigator = createModalStackNavigatorFactory(createStackNavigator);
+
 const MoneyRequestModalStackNavigator = createModalStackNavigator<MoneyRequestNavigatorParamList>({
     [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<RoomInviteNaviga
     [SCREENS.ROOM_INVITE_ROOT]: () => require('../../../pages/RoomInvitePage').default as React.ComponentType,
 });
 
-const SearchModalStackNavigator = createModalStackNavigator<SearchNavigatorParamList>({
+const SearchModalStackNavigator = createJSModalStackNavigator<SearchNavigatorParamList>({
     [SCREENS.SEARCH_ROOT]: () => require('../../../pages/SearchPage').default as React.ComponentType,
 });