Perf/native stack navigation

package.json

@@ -82,6 +82,7 @@
     "@react-native-picker/picker": "^2.4.3",
     "@react-navigation/material-top-tabs": "^6.6.3",
     "@react-navigation/native": "6.1.6",
+    "@react-navigation/native-stack": "^6.9.14",
     "@react-navigation/stack": "6.3.16",
     "@react-ng/bounds-observer": "^0.2.1",
     "@rnmapbox/maps": "^10.0.11",

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -1,14 +1,8 @@
 import _ from 'underscore';
 import React from 'react';
-import {createStackNavigator, CardStyleInterpolators} from '@react-navigation/stack';
-import styles from '../../../styles/styles';
+import createPlatformStackNavigator from '../PlatformStackNavigation/createPlatformStackNavigator';
 import SCREENS from '../../../SCREENS';
-
-const defaultSubRouteOptions = {
-    cardStyle: styles.navigationScreenCardStyle,
-    headerShown: false,
-    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
-};
+import defaultSubRouteOptions from './modalStackNavigatorOptions';
 
 /**
  * Create a modal stack navigator with an array of sub-screens.
@@ -17,7 +11,7 @@ const defaultSubRouteOptions = {
  * @returns {Function}
  */
 function createModalStackNavigator(screens) {
-    const ModalStackNavigator = createStackNavigator();
+    const ModalStackNavigator = createPlatformStackNavigator();
     return () => (
         <ModalStackNavigator.Navigator screenOptions={defaultSubRouteOptions}>
             {_.map(screens, (getComponent, name) => (

src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import {createStackNavigator} from '@react-navigation/stack';
+import createPlatformStackNavigator from '../../PlatformStackNavigation/createPlatformStackNavigator';
 import SCREENS from '../../../../SCREENS';
 import ReportScreenWrapper from '../ReportScreenWrapper';
 import getCurrentUrl from '../../currentUrl';
 import styles from '../../../../styles/styles';
 import FreezeWrapper from '../../FreezeWrapper';
 
-const Stack = createStackNavigator();
+const Stack = createPlatformStackNavigator();
 
 const url = getCurrentUrl();
 const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined;

src/libs/Navigation/AppNavigator/Navigators/Overlay.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Animated, View} from 'react-native';
+// TODO: migrate
 import {useCardAnimation} from '@react-navigation/stack';
 
 import PropTypes from 'prop-types';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import {createStackNavigator} from '@react-navigation/stack';
 import PropTypes from 'prop-types';
+import createPlatformStackNavigator from '../../PlatformStackNavigation/createPlatformStackNavigator';
 
 import * as ModalStackNavigators from '../ModalStackNavigators';
 import RHPScreenOptions from '../RHPScreenOptions';
@@ -10,7 +10,7 @@ import styles from '../../../../styles/styles';
 import Overlay from './Overlay';
 import NoDropZone from '../../../../components/DragAndDrop/NoDropZone';
 
-const Stack = createStackNavigator();
+const Stack = createPlatformStackNavigator();
 
 const propTypes = {
     /* Navigation functions provided by React Navigation */

src/libs/Navigation/AppNavigator/PublicScreens.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {createStackNavigator} from '@react-navigation/stack';
+import createPlatformStackNavigator from '../PlatformStackNavigation/createPlatformStackNavigator';
 import SignInPage from '../../../pages/signin/SignInPage';
 import ValidateLoginPage from '../../../pages/ValidateLoginPage';
 import LogInWithShortLivedAuthTokenPage from '../../../pages/LogInWithShortLivedAuthTokenPage';
@@ -10,7 +10,7 @@ import AppleSignInDesktopPage from '../../../pages/signin/AppleSignInDesktopPage
 import GoogleSignInDesktopPage from '../../../pages/signin/GoogleSignInDesktopPage';
 import SAMLSignInPage from '../../../pages/signin/SAMLSignInPage';
 
-const RootStack = createStackNavigator();
+const RootStack = createPlatformStackNavigator();
 
 function PublicScreens() {
     return (

src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.js

@@ -1,7 +1,7 @@
 import React, {useRef} from 'react';
 import PropTypes from 'prop-types';
 import {useNavigationBuilder, createNavigatorFactory} from '@react-navigation/native';
-import {StackView} from '@react-navigation/stack';
+import StackView from '../../PlatformStackNavigation/StackView';
 import CustomRouter from './CustomRouter';
 import useWindowDimensions from '../../../../hooks/useWindowDimensions';
 

src/libs/Navigation/AppNavigator/defaultScreenOptions/index.native.ts

@@ -0,0 +1,10 @@
+const defaultScreenOptions = {
+    contentStyle: {
+        overflow: 'visible',
+        flex: 1,
+    },
+    headerShown: false,
+    animationTypeForReplace: 'push',
+};
+
+export default defaultScreenOptions;

src/libs/Navigation/AppNavigator/getRightModalNavigatorOptions/index.native.ts

@@ -0,0 +1,7 @@
+import {NativeStackNavigationOptions} from '@react-navigation/native-stack';
+
+const rightModalNavigatorOptions = (): NativeStackNavigationOptions => ({
+    presentation: 'card',
+});
+
+export default rightModalNavigatorOptions;

src/libs/Navigation/AppNavigator/getRightModalNavigatorOptions/index.ts

@@ -0,0 +1,21 @@
+import {StackNavigationOptions} from '@react-navigation/stack';
+import getNavigationModalCardStyle from '../../../../styles/getNavigationModalCardStyles';
+import modalCardStyleInterpolator from '../modalCardStyleInterpolator';
+
+const rightModalNavigatorOptions = (isSmallScreenWidth: boolean): StackNavigationOptions => ({
+    cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
+    presentation: 'transparentModal',
+
+    // We want pop in RHP since there are some flows that would work weird otherwise
+    animationTypeForReplace: 'pop',
+    cardStyle: {
+        ...getNavigationModalCardStyle(),
+
+        // This is necessary to cover translated sidebar with overlay.
+        width: isSmallScreenWidth ? '100%' : '200%',
+        // Excess space should be on the left so we need to position from right.
+        right: 0,
+    },
+});
+
+export default rightModalNavigatorOptions;

src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js

@@ -3,6 +3,7 @@ import styles from '../../../styles/styles';
 import variables from '../../../styles/variables';
 import getNavigationModalCardStyle from '../../../styles/getNavigationModalCardStyles';
 import CONFIG from '../../../CONFIG';
+import getRightModalNavigatorOptions from './getRightModalNavigatorOptions';
 
 const commonScreenOptions = {
     headerShown: false,
@@ -15,26 +16,14 @@ const commonScreenOptions = {
 export default (isSmallScreenWidth) => ({
     rightModalNavigator: {
         ...commonScreenOptions,
-        cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
-        presentation: 'transparentModal',
-
-        // We want pop in RHP since there are some flows that would work weird otherwise
-        animationTypeForReplace: 'pop',
-        cardStyle: {
-            ...getNavigationModalCardStyle(),
-
-            // This is necessary to cover translated sidebar with overlay.
-            width: isSmallScreenWidth ? '100%' : '200%',
-            // Excess space should be on the left so we need to position from right.
-            right: 0,
-        },
+        ...getRightModalNavigatorOptions(isSmallScreenWidth),
     },
 
     homeScreen: {
         title: CONFIG.SITE_TITLE,
         ...commonScreenOptions,
+        // Note: The card* properties won't be applied on mobile platforms, as they use the native defaults.
         cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
-
         cardStyle: {
             ...getNavigationModalCardStyle(),
             width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
@@ -47,6 +36,7 @@ export default (isSmallScreenWidth) => ({
     // eslint-disable-next-line rulesdir/no-negated-variables
     fullScreen: {
         ...commonScreenOptions,
+
         cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props),
         cardStyle: {
             ...getNavigationModalCardStyle(),
@@ -60,8 +50,8 @@ export default (isSmallScreenWidth) => ({
         title: CONFIG.SITE_TITLE,
         ...commonScreenOptions,
         animationEnabled: isSmallScreenWidth,
-        cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props),
 
+        cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, true, props),
         cardStyle: {
             ...getNavigationModalCardStyle(),
             paddingRight: isSmallScreenWidth ? 0 : variables.sideBarWidth,

src/libs/Navigation/AppNavigator/modalStackNavigatorOptions/index.native.ts

@@ -0,0 +1,9 @@
+import {NativeStackNavigationOptions} from '@react-navigation/native-stack';
+import styles from '../../../../styles/styles';
+
+const defaultSubRouteOptions: NativeStackNavigationOptions = {
+    contentStyle: styles.navigationScreenCardStyle,
+    headerShown: false,
+};
+
+export default defaultSubRouteOptions;

src/libs/Navigation/AppNavigator/modalStackNavigatorOptions/index.ts

@@ -0,0 +1,10 @@
+import {CardStyleInterpolators, StackNavigationOptions} from '@react-navigation/stack';
+import styles from '../../../../styles/styles';
+
+const defaultSubRouteOptions: StackNavigationOptions = {
+    cardStyle: styles.navigationScreenCardStyle,
+    headerShown: false,
+    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+};
+
+export default defaultSubRouteOptions;

src/libs/Navigation/PlatformStackNavigation/StackView.native.ts

@@ -0,0 +1,3 @@
+import {NativeStackView} from '@react-navigation/native-stack';
+
+export default NativeStackView;

src/libs/Navigation/PlatformStackNavigation/StackView.ts

@@ -0,0 +1,3 @@
+import {StackView} from '@react-navigation/stack';
+
+export default StackView;

src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator.native.ts

@@ -0,0 +1,7 @@
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+
+function createPlatformStackNavigator() {
+    return createNativeStackNavigator();
+}
+
+export default createPlatformStackNavigator;

src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator.ts

@@ -0,0 +1,7 @@
+import {createStackNavigator} from '@react-navigation/stack';
+
+function createPlatformStackNavigator() {
+    return createStackNavigator();
+}
+
+export default createPlatformStackNavigator;

src/styles/getNavigationModalCardStyles/types.ts

@@ -1,7 +1,5 @@
 import {ViewStyle} from 'react-native';
 
-type GetNavigationModalCardStylesParams = {isSmallScreenWidth: number};
-
-type GetNavigationModalCardStyles = (params: GetNavigationModalCardStylesParams) => ViewStyle;
+type GetNavigationModalCardStyles = () => ViewStyle;
 
 export default GetNavigationModalCardStyles;