Migrate E/App to use PlatformStackNavigation

package.json

@@ -153,7 +153,7 @@
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
     "react-native-onyx": "2.0.81",
-    "react-native-pager-view": "6.5.0",
+    "react-native-pager-view": "6.5.1",
     "react-native-pdf": "6.7.3",
     "react-native-performance": "^5.1.0",
     "react-native-permissions": "^3.10.0",

patches/react-native-screens+3.34.0+003+fabric-flat-list-fix.patch

@@ -0,0 +1,57 @@
+diff --git a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/Screen.kt b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/Screen.kt
+index 9d08d39..146b9c2 100644
+--- a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/Screen.kt
++++ b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/Screen.kt
+@@ -18,6 +18,7 @@ import com.facebook.react.uimanager.PixelUtil
+ import com.facebook.react.uimanager.UIManagerHelper
+ import com.facebook.react.uimanager.UIManagerModule
+ import com.swmansion.rnscreens.events.HeaderHeightChangeEvent
++import com.swmansion.rnscreens.ext.isInsideScrollViewWithRemoveClippedSubviews
+
+ @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
+ class Screen(
+@@ -310,6 +311,16 @@ class Screen(
+                     startTransitionRecursive(child.toolbar)
+                 }
+                 if (child is ViewGroup) {
++                    // a combination of https://github.com/software-mansion/react-native-screens/pull/2307/files and https://github.com/software-mansion/react-native-screens/pull/2383/files
++                    // The children are miscounted when there's a FlatList with
++                    // removeClippedSubviews set to true (default).
++                    // We add a simple view for each item in the list to make it work as expected.
++                    // See https://github.com/software-mansion/react-native-screens/issues/2282
++                    if (child.isInsideScrollViewWithRemoveClippedSubviews()) {
++                        for (j in 0 until child.childCount) {
++                            child.addView(View(context))
++                        }
++                    }
+                     startTransitionRecursive(child)
+                 }
+             }
+diff --git a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ext/ViewExt.kt b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ext/ViewExt.kt
+new file mode 100644
+index 0000000..9d9fbfd
+--- /dev/null
++++ b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ext/ViewExt.kt
+@@ -0,0 +1,21 @@
++package com.swmansion.rnscreens.ext
++
++import android.view.View
++import android.view.ViewGroup
++import com.facebook.react.views.scroll.ReactHorizontalScrollView
++import com.facebook.react.views.scroll.ReactScrollView
++import com.swmansion.rnscreens.ScreenStack
++
++internal fun View.isInsideScrollViewWithRemoveClippedSubviews(): Boolean {
++    if (this is ReactHorizontalScrollView || this is ReactScrollView) {
++        return false
++    }
++    var parentView = this.parent
++    while (parentView is ViewGroup && parentView !is ScreenStack) {
++        if (parentView is ReactScrollView) {
++            return parentView.removeClippedSubviews
++        }
++        parentView = parentView.parent
++    }
++    return false
++}
+\ No newline at end of file

patches/react-native-screens+3.34.0+004+ios-custom-animations-native-transitions.patch

@@ -0,0 +1,156 @@
+diff --git a/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm b/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm
+index abb2cf6..fb81d52 100644
+--- a/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm
++++ b/node_modules/react-native-screens/ios/RNSScreenStackAnimator.mm
+@@ -5,13 +5,14 @@
+
+ // proportions to default transition duration
+ static const float RNSSlideOpenTransitionDurationProportion = 1;
+-static const float RNSFadeOpenTransitionDurationProportion = 0.2 / 0.35;
+-static const float RNSSlideCloseTransitionDurationProportion = 0.25 / 0.35;
+-static const float RNSFadeCloseTransitionDurationProportion = 0.15 / 0.35;
+-static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
++static const float RNSFadeOpenTransitionDurationProportion = 0.2 / 0.5;
++static const float RNSSlideCloseTransitionDurationProportion = 0.25 / 0.5;
++static const float RNSFadeCloseTransitionDurationProportion = 0.15 / 0.5;
++static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.5;
+ // same value is used in other projects using similar approach for transistions
+ // and it looks the most similar to the value used by Apple
+ static constexpr float RNSShadowViewMaxAlpha = 0.1;
++static const int UIViewAnimationOptionCurveDefaultTransition = 7 << 16;
+
+ @implementation RNSScreenStackAnimator {
+   UINavigationControllerOperation _operation;
+@@ -22,7 +23,7 @@ - (instancetype)initWithOperation:(UINavigationControllerOperation)operation
+ {
+   if (self = [super init]) {
+     _operation = operation;
+-    _transitionDuration = 0.35; // default duration in seconds
++    _transitionDuration = 0.5; // default duration in seconds
+   }
+   return self;
+ }
+@@ -129,6 +130,8 @@ - (void)animateSimplePushWithShadowEnabled:(BOOL)shadowEnabled
+     }
+
+     [UIView animateWithDuration:[self transitionDuration:transitionContext]
++        delay:0
++        options:UIViewAnimationOptionCurveDefaultTransition
+         animations:^{
+           fromViewController.view.transform = leftTransform;
+           toViewController.view.transform = CGAffineTransformIdentity;
+@@ -170,6 +173,8 @@ - (void)animateSimplePushWithShadowEnabled:(BOOL)shadowEnabled
+
+     if (!transitionContext.isInteractive) {
+       [UIView animateWithDuration:[self transitionDuration:transitionContext]
++                            delay:0
++                          options:UIViewAnimationOptionCurveDefaultTransition
+                        animations:animationBlock
+                        completion:completionBlock];
+     } else {
+@@ -203,6 +208,8 @@ - (void)animateSlideFromLeftWithTransitionContext:(id<UIViewControllerContextTra
+     toViewController.view.transform = rightTransform;
+     [[transitionContext containerView] addSubview:toViewController.view];
+     [UIView animateWithDuration:[self transitionDuration:transitionContext]
++        delay:0
++        options:UIViewAnimationOptionCurveDefaultTransition
+         animations:^{
+           fromViewController.view.transform = leftTransform;
+           toViewController.view.transform = CGAffineTransformIdentity;
+@@ -228,6 +235,8 @@ - (void)animateSlideFromLeftWithTransitionContext:(id<UIViewControllerContextTra
+
+     if (!transitionContext.isInteractive) {
+       [UIView animateWithDuration:[self transitionDuration:transitionContext]
++                            delay:0
++                          options:UIViewAnimationOptionCurveDefaultTransition
+                        animations:animationBlock
+                        completion:completionBlock];
+     } else {
+@@ -251,6 +260,8 @@ - (void)animateFadeWithTransitionContext:(id<UIViewControllerContextTransitionin
+     [[transitionContext containerView] addSubview:toViewController.view];
+     toViewController.view.alpha = 0.0;
+     [UIView animateWithDuration:[self transitionDuration:transitionContext]
++        delay:0
++        options:UIViewAnimationOptionCurveDefaultTransition
+         animations:^{
+           toViewController.view.alpha = 1.0;
+         }
+@@ -262,6 +273,8 @@ - (void)animateFadeWithTransitionContext:(id<UIViewControllerContextTransitionin
+     [[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
+
+     [UIView animateWithDuration:[self transitionDuration:transitionContext]
++        delay:0
++        options:UIViewAnimationOptionCurveDefaultTransition
+         animations:^{
+           fromViewController.view.alpha = 0.0;
+         }
+@@ -284,6 +297,8 @@ - (void)animateSlideFromBottomWithTransitionContext:(id<UIViewControllerContextT
+     toViewController.view.transform = topBottomTransform;
+     [[transitionContext containerView] addSubview:toViewController.view];
+     [UIView animateWithDuration:[self transitionDuration:transitionContext]
++        delay:0
++        options:UIViewAnimationOptionCurveDefaultTransition
+         animations:^{
+           fromViewController.view.transform = CGAffineTransformIdentity;
+           toViewController.view.transform = CGAffineTransformIdentity;
+@@ -309,6 +324,8 @@ - (void)animateSlideFromBottomWithTransitionContext:(id<UIViewControllerContextT
+
+     if (!transitionContext.isInteractive) {
+       [UIView animateWithDuration:[self transitionDuration:transitionContext]
++                            delay:0
++                          options:UIViewAnimationOptionCurveDefaultTransition
+                        animations:animationBlock
+                        completion:completionBlock];
+     } else {
+diff --git a/node_modules/react-native-screens/lib/typescript/fabric/ModalScreenNativeComponent.d.ts b/node_modules/react-native-screens/lib/typescript/fabric/ModalScreenNativeComponent.d.ts
+index 28d6463..a1473e1 100644
+--- a/node_modules/react-native-screens/lib/typescript/fabric/ModalScreenNativeComponent.d.ts
++++ b/node_modules/react-native-screens/lib/typescript/fabric/ModalScreenNativeComponent.d.ts
+@@ -55,7 +55,7 @@ export interface NativeProps extends ViewProps {
+     gestureResponseDistance?: GestureResponseDistanceType;
+     stackPresentation?: WithDefault<StackPresentation, 'push'>;
+     stackAnimation?: WithDefault<StackAnimation, 'default'>;
+-    transitionDuration?: WithDefault<Int32, 350>;
++    transitionDuration?: WithDefault<Int32, 500>;
+     replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
+     swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
+     hideKeyboardOnSwipe?: boolean;
+diff --git a/node_modules/react-native-screens/lib/typescript/fabric/ScreenNativeComponent.d.ts b/node_modules/react-native-screens/lib/typescript/fabric/ScreenNativeComponent.d.ts
+index 11ed190..f676e08 100644
+--- a/node_modules/react-native-screens/lib/typescript/fabric/ScreenNativeComponent.d.ts
++++ b/node_modules/react-native-screens/lib/typescript/fabric/ScreenNativeComponent.d.ts
+@@ -55,7 +55,7 @@ export interface NativeProps extends ViewProps {
+     gestureResponseDistance?: GestureResponseDistanceType;
+     stackPresentation?: WithDefault<StackPresentation, 'push'>;
+     stackAnimation?: WithDefault<StackAnimation, 'default'>;
+-    transitionDuration?: WithDefault<Int32, 350>;
++    transitionDuration?: WithDefault<Int32, 500>;
+     replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
+     swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
+     hideKeyboardOnSwipe?: boolean;
+diff --git a/node_modules/react-native-screens/src/fabric/ModalScreenNativeComponent.ts b/node_modules/react-native-screens/src/fabric/ModalScreenNativeComponent.ts
+index bb59c4c..d4c14ee 100644
+--- a/node_modules/react-native-screens/src/fabric/ModalScreenNativeComponent.ts
++++ b/node_modules/react-native-screens/src/fabric/ModalScreenNativeComponent.ts
+@@ -90,7 +90,7 @@ export interface NativeProps extends ViewProps {
+   gestureResponseDistance?: GestureResponseDistanceType;
+   stackPresentation?: WithDefault<StackPresentation, 'push'>;
+   stackAnimation?: WithDefault<StackAnimation, 'default'>;
+-  transitionDuration?: WithDefault<Int32, 350>;
++  transitionDuration?: WithDefault<Int32, 500>;
+   replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
+   swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
+   hideKeyboardOnSwipe?: boolean;
+diff --git a/node_modules/react-native-screens/src/fabric/ScreenNativeComponent.ts b/node_modules/react-native-screens/src/fabric/ScreenNativeComponent.ts
+index 4e39336..ab0b313 100644
+--- a/node_modules/react-native-screens/src/fabric/ScreenNativeComponent.ts
++++ b/node_modules/react-native-screens/src/fabric/ScreenNativeComponent.ts
+@@ -92,7 +92,7 @@ export interface NativeProps extends ViewProps {
+   gestureResponseDistance?: GestureResponseDistanceType;
+   stackPresentation?: WithDefault<StackPresentation, 'push'>;
+   stackAnimation?: WithDefault<StackAnimation, 'default'>;
+-  transitionDuration?: WithDefault<Int32, 350>;
++  transitionDuration?: WithDefault<Int32, 500>;
+   replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
+   swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
+   hideKeyboardOnSwipe?: boolean;

patches/react-native-screens+3.34.0+005+fix-screen-flicker-on-modal-unmount.patch

@@ -0,0 +1,22 @@
+diff --git a/node_modules/react-native-screens/ios/RNSScreenStack.mm b/node_modules/react-native-screens/ios/RNSScreenStack.mm
+index ea27b03..8f1d005 100644
+--- a/node_modules/react-native-screens/ios/RNSScreenStack.mm
++++ b/node_modules/react-native-screens/ios/RNSScreenStack.mm
+@@ -1121,16 +1121,7 @@ - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childCompone
+ - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+ {
+   RNSScreenView *screenChildComponent = (RNSScreenView *)childComponentView;
+-
+-  // We should only do a snapshot of a screen that is on the top.
+-  // We also check `_presentedModals` since if you push 2 modals, second one is not a "child" of _controller.
+-  // Also, when dissmised with a gesture, the screen already is not under the window, so we don't need to apply
+-  // snapshot.
+-  if (screenChildComponent.window != nil &&
+-      ((screenChildComponent == _controller.visibleViewController.view && _presentedModals.count < 2) ||
+-       screenChildComponent == [_presentedModals.lastObject view])) {
+-    [screenChildComponent.controller setViewToSnapshot];
+-  }
++  [screenChildComponent.controller setViewToSnapshot];
+
+   RCTAssert(
+       screenChildComponent.reactSuperview == self,

src/App.tsx

@@ -2,6 +2,7 @@ import {PortalProvider} from '@gorhom/portal';
 import React from 'react';
 import {LogBox} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import {KeyboardProvider} from 'react-native-keyboard-controller';
 import {PickerStateProvider} from 'react-native-picker-select';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import '../wdyr';
@@ -14,7 +15,6 @@ import CustomStatusBarAndBackgroundContextProvider from './components/CustomStat
 import ErrorBoundary from './components/ErrorBoundary';
 import HTMLEngineProvider from './components/HTMLEngineProvider';
 import InitialURLContextProvider from './components/InitialURLContextProvider';
-import KeyboardProvider from './components/KeyboardProvider';
 import {LocaleContextProvider} from './components/LocaleContextProvider';
 import OnyxProvider from './components/OnyxProvider';
 import PopoverContextProvider from './components/PopoverProvider';

src/components/AttachmentModal.tsx

@@ -491,7 +491,6 @@ function AttachmentModal({
         <>
             <Modal
                 type={modalType}
-                onSubmit={submitAndClose}
                 onClose={isOverlayModalVisible ? closeConfirmModal : closeModal}
                 isVisible={isModalOpen}
                 onModalShow={() => {

src/components/ConfirmModal.tsx

@@ -143,7 +143,6 @@ function ConfirmModal({
 
     return (
         <Modal
-            onSubmit={onConfirm}
             onClose={onCancel}
             onBackdropPress={onBackdropPress}
             isVisible={isVisible}

src/components/Modal/types.ts

@@ -36,9 +36,6 @@ type BaseModalProps = Partial<ModalProps> & {
     /** State that determines whether to display the modal or not */
     isVisible: boolean;
 
-    /** Callback method fired when the user requests to submit the modal content. */
-    onSubmit?: () => void;
-
     /** Callback method fired when the modal is hidden */
     onModalHide?: () => void;
 

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

@@ -1,4 +1,3 @@
-import type {RouteProp} from '@react-navigation/native';
 import {useRoute} from '@react-navigation/native';
 import lodashSortBy from 'lodash/sortBy';
 import truncate from 'lodash/truncate';
@@ -29,6 +28,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {TransactionDuplicateNavigatorParamList} from '@libs/Navigation/types';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
@@ -71,7 +71,7 @@ function MoneyRequestPreviewContent({
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const {windowWidth} = useWindowDimensions();
-    const route = useRoute<RouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>>();
+    const route = useRoute<PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>>();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID || '-1'}`);

src/components/ScreenWrapper.tsx

@@ -1,5 +1,4 @@
 import {UNSTABLE_usePreventRemove, useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
-import type {StackNavigationProp} from '@react-navigation/stack';
 import type {ForwardedRef, ReactNode} from 'react';
 import React, {createContext, forwardRef, useEffect, useMemo, useRef, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
@@ -15,6 +14,7 @@ import useTackInputFocus from '@hooks/useTackInputFocus';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
+import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {AuthScreensParamList, RootStackParamList} from '@libs/Navigation/types';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
@@ -96,7 +96,7 @@ type ScreenWrapperProps = {
      *
      * This is required because transitionEnd event doesn't trigger in the testing environment.
      */
-    navigation?: StackNavigationProp<RootStackParamList> | StackNavigationProp<AuthScreensParamList>;
+    navigation?: PlatformStackNavigationProp<RootStackParamList> | PlatformStackNavigationProp<AuthScreensParamList>;
 
     /** Whether to show offline indicator on wide screens */
     shouldShowOfflineIndicatorInWideScreen?: boolean;
@@ -141,7 +141,7 @@ function ScreenWrapper(
      * so in other places where ScreenWrapper is used, we need to
      * fallback to useNavigation.
      */
-    const navigationFallback = useNavigation<StackNavigationProp<RootStackParamList>>();
+    const navigationFallback = useNavigation<PlatformStackNavigationProp<RootStackParamList>>();
     const navigation = navigationProp ?? navigationFallback;
     const isFocused = useIsFocused();
     const {windowHeight} = useWindowDimensions(shouldUseCachedViewportHeight);