revert: native stack

package.json

@@ -86,7 +86,6 @@
     "@react-native-picker/picker": "2.5.1",
     "@react-navigation/material-top-tabs": "^6.6.3",
     "@react-navigation/native": "6.1.8",
-    "@react-navigation/native-stack": "^6.9.17",
     "@react-navigation/stack": "6.3.16",
     "@react-ng/bounds-observer": "^0.2.1",
     "@rnmapbox/maps": "^10.1.11",

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -1,9 +1,8 @@
 import type {ParamListBase} from '@react-navigation/routers';
 import type {StackNavigationOptions} from '@react-navigation/stack';
-import {createStackNavigator} from '@react-navigation/stack';
+import {CardStyleInterpolators, createStackNavigator} from '@react-navigation/stack';
 import React, {useMemo} from 'react';
 import useThemeStyles from '@hooks/useThemeStyles';
-import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
 import type {
     AddPersonalBankAccountNavigatorParamList,
     DetailsNavigatorParamList,
@@ -36,7 +35,6 @@ import type {
 import type {ThemeStyles} from '@styles/index';
 import type {Screen} from '@src/SCREENS';
 import SCREENS from '@src/SCREENS';
-import subRouteOptions from './modalStackNavigatorOptions';
 
 type Screens = Partial<Record<Screen, () => React.ComponentType>>;
 
@@ -46,46 +44,39 @@ 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 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;
-    };
+function createModalStackNavigator<TStackParams extends ParamListBase>(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType {
+    const ModalStackNavigator = createStackNavigator<TStackParams>();
+
+    function ModalStack() {
+        const styles = useThemeStyles();
+
+        const defaultSubRouteOptions = useMemo(
+            (): StackNavigationOptions => ({
+                cardStyle: styles.navigationScreenCardStyle,
+                headerShown: false,
+                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+            }),
+            [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;
 }
 
-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,
@@ -165,7 +156,7 @@ const RoomInviteModalStackNavigator = createModalStackNavigator<RoomInviteNaviga
     [SCREENS.ROOM_INVITE_ROOT]: () => require('../../../pages/RoomInvitePage').default as React.ComponentType,
 });
 
-const SearchModalStackNavigator = createJSModalStackNavigator<SearchNavigatorParamList>({
+const SearchModalStackNavigator = createModalStackNavigator<SearchNavigatorParamList>({
     [SCREENS.SEARCH_ROOT]: () => require('../../../pages/SearchPage').default as React.ComponentType,
 });
 

src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx

@@ -1,12 +1,12 @@
+import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
-import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
 import type {CentralPaneNavigatorParamList} from '@navigation/types';
 import SCREENS from '@src/SCREENS';
 
-const Stack = createPlatformStackNavigator<CentralPaneNavigatorParamList>();
+const Stack = createStackNavigator<CentralPaneNavigatorParamList>();
 
 const url = getCurrentUrl();
 const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined;

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

@@ -1,20 +1,20 @@
 import type {StackScreenProps} from '@react-navigation/stack';
+import {createStackNavigator} from '@react-navigation/stack';
 import React, {useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions';
 import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
-import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
 import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types';
 import type NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import Overlay from './Overlay';
 
 type RightModalNavigatorProps = StackScreenProps<AuthScreensParamList, typeof NAVIGATORS.RIGHT_MODAL_NAVIGATOR>;
 
-const Stack = createPlatformStackNavigator<RightModalNavigatorParamList>();
+const Stack = createStackNavigator<RightModalNavigatorParamList>();
 
 function RightModalNavigator({navigation}: RightModalNavigatorProps) {
     const styles = useThemeStyles();

src/libs/Navigation/AppNavigator/PublicScreens.tsx

@@ -1,5 +1,5 @@
+import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
-import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
 import type {PublicScreensParamList} from '@navigation/types';
 import LogInWithShortLivedAuthTokenPage from '@pages/LogInWithShortLivedAuthTokenPage';
 import AppleSignInDesktopPage from '@pages/signin/AppleSignInDesktopPage';
@@ -12,7 +12,7 @@ import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import defaultScreenOptions from './defaultScreenOptions';
 
-const RootStack = createPlatformStackNavigator<PublicScreensParamList>();
+const RootStack = createStackNavigator<PublicScreensParamList>();
 
 function PublicScreens() {
     return (