Merge pull request Expensify#68729 from software-mansion-labs/chore/centered-modals-migration-cleanup

Centered modals migration cleanup

Author: mountiny

src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx

@@ -35,7 +35,6 @@ function ConnectToQuickbooksOnlineFlow({policyID}: ConnectToQuickbooksOnlineFlow
             fullscreen
             isVisible={isWebViewOpen}
             type={CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE}
-            shouldUseReanimatedModal
         >
             <HeaderWithBackButton
                 title={translate('workspace.accounting.title')}

src/components/ConnectToXeroFlow/index.native.tsx

@@ -56,7 +56,6 @@ function ConnectToXeroFlow({policyID}: ConnectToXeroFlowProps) {
                 fullscreen
                 isVisible={isWebViewOpen}
                 type={CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE}
-                shouldUseReanimatedModal
             >
                 <HeaderWithBackButton
                     title={translate('workspace.accounting.title')}

src/components/FeatureTrainingModal.tsx

@@ -420,7 +420,6 @@ function FeatureTrainingModal({
                 }
                 onHelp();
             }}
-            shouldUseReanimatedModal
             shouldDisableBottomSafeAreaPadding={shouldUseScrollView}
         >
             <Wrapper

src/components/Modal/BaseModal.tsx

@@ -33,7 +33,15 @@ import type ReanimatedModalProps from './ReanimatedModal/types';
 import type BaseModalProps from './types';
 import type {FocusTrapOptions} from './types';
 
-const REANIMATED_MODAL_TYPES: Array<ValueOf<typeof CONST.MODAL.MODAL_TYPE>> = [CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.FULLSCREEN, CONST.MODAL.MODAL_TYPE.POPOVER];
+const REANIMATED_MODAL_TYPES: Array<ValueOf<typeof CONST.MODAL.MODAL_TYPE>> = [
+    CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED,
+    CONST.MODAL.MODAL_TYPE.FULLSCREEN,
+    CONST.MODAL.MODAL_TYPE.POPOVER,
+    CONST.MODAL.MODAL_TYPE.CENTERED,
+    CONST.MODAL.MODAL_TYPE.CENTERED_SMALL,
+    CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE,
+    CONST.MODAL.MODAL_TYPE.CENTERED_SWIPEABLE_TO_RIGHT,
+];
 
 type ModalComponentProps = (ReactNativeModalProps | ReanimatedModalProps) & {
     type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
@@ -374,7 +382,9 @@ function BaseModal(
     );
 
     const animationInProps = useMemo(() => {
-        if (disableAnimationIn) {
+        // disableAnimationIn applies only to legacy modals. This should be removed once we fully migrate to `reanimated-modal`.
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        if (disableAnimationIn && ((type && !REANIMATED_MODAL_TYPES.includes(type)) || !shouldUseReanimatedModal)) {
             // We need to apply these animation props to completely disable the "animation in". Simply setting it to 0 and undefined will not work.
             // Based on: https://github.com/react-native-modal/react-native-modal/issues/191
             return {
@@ -388,7 +398,7 @@ function BaseModal(
             animationInDelay,
             animationInTiming,
         };
-    }, [animationIn, animationInDelay, animationInTiming, disableAnimationIn, modalStyleAnimationIn]);
+    }, [animationIn, animationInDelay, animationInTiming, disableAnimationIn, modalStyleAnimationIn, shouldUseReanimatedModal, type]);
 
     // In Modals we need to reset the ScreenWrapperOfflineIndicatorContext to allow nested ScreenWrapper components to render offline indicators,
     // except if we are in a narrow pane navigator. In this case, we use the narrow pane's original values.

src/components/Search/SearchRouter/SearchRouterModal.tsx

@@ -4,7 +4,7 @@ import Modal from '@components/Modal';
 import ScreenWrapperContainer from '@components/ScreenWrapper/ScreenWrapperContainer';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
-import {isMobileChrome, isMobileIOS} from '@libs/Browser';
+import {isMobileIOS} from '@libs/Browser';
 import CONST from '@src/CONST';
 import SearchRouter from './SearchRouter';
 import {useSearchRouterContext} from './SearchRouterContext';
@@ -35,7 +35,6 @@ function SearchRouterModal() {
             onModalShow={() => setShouldHideInputCaret(false)}
             shouldApplySidePanelOffset={!shouldUseNarrowLayout}
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal={shouldUseNarrowLayout && !isMobileChrome()}
         >
             <ScreenWrapperContainer
                 testID={SearchRouterModal.displayName}

src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.tsx

@@ -62,7 +62,6 @@ function AttachmentModalContainer({contentProps, modalType, onShow, onClose, sho
             }}
             shouldHandleNavigationBack={shouldHandleNavigationBack}
             onClose={closeModal}
-            shouldUseReanimatedModal
             enableEdgeToEdgeBottomSafeAreaPadding
         >
             <AttachmentModalBaseContent

src/pages/settings/Subscription/CardAuthenticationModal/index.tsx

@@ -67,8 +67,6 @@ function CardAuthenticationModal({headerTitle, policyID}: CardAuthenticationModa
             type={CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE}
             isVisible={isVisible}
             onClose={onModalClose}
-            onModalHide={onModalClose}
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={styles.pb0}

src/pages/settings/Subscription/SubscriptionPlan/ComparePlansModal.tsx

@@ -72,7 +72,6 @@ function ComparePlansModal({isModalVisible, setIsModalVisible}: ComparePlansModa
                     onClose={onClose}
                     animationOut={isSmallScreenWidth ? animationOut : undefined}
                     innerContainerStyle={isSmallScreenWidth ? {...safeAreaPaddingBottomStyle, maxHeight} : {...styles.workspaceSection, ...safeAreaPaddingBottomStyle, maxHeight}}
-                    shouldUseReanimatedModal
                 >
                     <HeaderWithBackButton
                         title={translate('subscription.compareModal.comparePlans')}