Merge branch 'Expensify:main' into krishna2323/issue/32291

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001044309
-        versionName "1.4.43-9"
+        versionCode 1001044311
+        versionName "1.4.43-11"
     }
 
     flavorDimensions "default"

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.43.9</string>
+	<string>1.4.43.11</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.43.9</string>
+	<string>1.4.43.11</string>
 </dict>
 </plist>

ios/NotificationServiceExtension/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.4.43</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.43.9</string>
+	<string>1.4.43.11</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.43-9",
+  "version": "1.4.43-11",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -86,6 +86,7 @@
     "@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",

patches/@react-navigation+native-stack+6.9.17.patch

@@ -0,0 +1,39 @@
+diff --git a/node_modules/@react-navigation/native-stack/src/types.tsx b/node_modules/@react-navigation/native-stack/src/types.tsx
+index 206fb0b..7a34a8e 100644
+--- a/node_modules/@react-navigation/native-stack/src/types.tsx
++++ b/node_modules/@react-navigation/native-stack/src/types.tsx
+@@ -490,6 +490,14 @@ export type NativeStackNavigationOptions = {
+    * Only supported on iOS and Android.
+    */
+   freezeOnBlur?: boolean;
++  // partial changes from https://github.com/react-navigation/react-navigation/commit/90cfbf23bcc5259f3262691a9eec6c5b906e5262
++  // patch can be removed when new version of `native-stack` will be released
++  /**
++   * Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
++   *
++   * Only supported on iOS
++   */
++  keyboardHandlingEnabled?: boolean;
+ };
+
+ export type NativeStackNavigatorProps = DefaultNavigatorOptions<
+diff --git a/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx b/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx
+index a005c43..03d8b50 100644
+--- a/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx
++++ b/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx
+@@ -161,6 +161,7 @@ const SceneView = ({
+     statusBarTranslucent,
+     statusBarColor,
+     freezeOnBlur,
++    keyboardHandlingEnabled,
+   } = options;
+
+   let {
+@@ -289,6 +290,7 @@ const SceneView = ({
+       onNativeDismissCancelled={onNativeDismissCancelled}
+       // this prop is available since rn-screens 3.16
+       freezeOnBlur={freezeOnBlur}
++      hideKeyboardOnSwipe={keyboardHandlingEnabled}
+     >
+       <NavigationContext.Provider value={navigation}>
+         <NavigationRouteContext.Provider value={route}>

src/components/LocaleContextProvider.tsx

@@ -45,7 +45,7 @@ type LocaleContextProps = {
 
     /** Returns a locally converted phone number for numbers from the same region
      * and an internationally converted phone number with the country code for numbers from other regions */
-    formatPhoneNumber: (phoneNumber: string | undefined) => string;
+    formatPhoneNumber: (phoneNumber: string) => string;
 
     /** Gets the locale digit corresponding to a standard digit */
     toLocaleDigit: (digit: string) => string;

src/components/MagicCodeInput.tsx

@@ -430,3 +430,4 @@ function MagicCodeInput(
 MagicCodeInput.displayName = 'MagicCodeInput';
 
 export default forwardRef(MagicCodeInput);
+export type {MagicCodeInputHandle};

src/components/withToggleVisibilityView.tsx

@@ -7,7 +7,7 @@ import getComponentDisplayName from '@libs/getComponentDisplayName';
 
 type WithToggleVisibilityViewProps = {
     /** Whether the content is visible. */
-    isVisible?: boolean;
+    isVisible: boolean;
 };
 
 export default function withToggleVisibilityView<TProps extends WithToggleVisibilityViewProps, TRef>(

src/libs/LocalePhoneNumber.ts

@@ -13,7 +13,7 @@ Onyx.connect({
  * Returns a locally converted phone number for numbers from the same region
  * and an internationally converted phone number with the country code for numbers from other regions
  */
-function formatPhoneNumber(number: string | undefined): string {
+function formatPhoneNumber(number: string): string {
     if (!number) {
         return '';
     }

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -1,8 +1,8 @@
 import type {ParamListBase} from '@react-navigation/routers';
 import type {StackNavigationOptions} 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,
@@ -35,6 +35,7 @@ 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>>;
 
@@ -45,16 +46,15 @@ type Screens = Partial<Record<Screen, () => React.ComponentType>>;
  * @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 = createStackNavigator<TStackParams>();
+    const ModalStackNavigator = createPlatformStackNavigator<TStackParams>();
 
     function ModalStack() {
         const styles = useThemeStyles();
 
         const defaultSubRouteOptions = useMemo(
             (): StackNavigationOptions => ({
+                ...subRouteOptions,
                 cardStyle: styles.navigationScreenCardStyle,
-                headerShown: false,
-                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
             }),
             [styles],
         );

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 = createStackNavigator<CentralPaneNavigatorParamList>();
+const Stack = createPlatformStackNavigator<CentralPaneNavigatorParamList>();
 
 const url = getCurrentUrl();
 const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined;

src/libs/Navigation/AppNavigator/Navigators/Overlay/index.native.tsx

@@ -0,0 +1,7 @@
+function Overlay() {
+    return null;
+}
+
+Overlay.displayName = 'Overlay';
+
+export default Overlay;

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 = createStackNavigator<RightModalNavigatorParamList>();
+const Stack = createPlatformStackNavigator<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 = createStackNavigator<PublicScreensParamList>();
+const RootStack = createPlatformStackNavigator<PublicScreensParamList>();
 
 function PublicScreens() {
     return (

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

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

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

@@ -0,0 +1,12 @@
+import type {StackNavigationOptions} from '@react-navigation/stack';
+
+const defaultScreenOptions: StackNavigationOptions = {
+    cardStyle: {
+        overflow: 'visible',
+        flex: 1,
+    },
+    headerShown: false,
+    animationTypeForReplace: 'push',
+};
+
+export default defaultScreenOptions;

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

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

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

@@ -0,0 +1,20 @@
+import type {StackNavigationOptions} from '@react-navigation/stack';
+// eslint-disable-next-line no-restricted-imports
+import getNavigationModalCardStyle from '@styles/utils/getNavigationModalCardStyles';
+
+const rightModalNavigatorOptions = (isSmallScreenWidth: boolean): StackNavigationOptions => ({
+    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;