Merge pull request #91702 from callstack-internal/fix/centered-modal-fade

Restore slight fade-in for centered alert modals on web

Author: Julesssss

src/CONST/index.ts

@@ -2000,6 +2000,8 @@ const CONST = {
             FAB_OUT: ANIMATION_TIMING_FAB_OUT,
             RHP_DURATION_IN_WEB: 150,
             RHP_DURATION_OUT_WEB: 100,
+            CENTERED_DURATION_IN_WEB: 120,
+            CENTERED_DURATION_OUT_WEB: 80,
         },
         RHP_ENTER_OFFSET_PX_WEB: 60,
     },

src/components/Modal/index.tsx

@@ -13,6 +13,15 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     const StyleUtils = useStyleUtils();
     const [previousStatusBarColor, setPreviousStatusBarColor] = useState<string>();
 
+    const isCentered =
+        type === CONST.MODAL.MODAL_TYPE.CONFIRM ||
+        type === CONST.MODAL.MODAL_TYPE.CENTERED ||
+        type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE ||
+        type === CONST.MODAL.MODAL_TYPE.CENTERED_SMALL ||
+        type === CONST.MODAL.MODAL_TYPE.CENTERED_SWIPEABLE_TO_RIGHT;
+    const animationInTiming = rest.animationInTiming ?? (isCentered ? CONST.MODAL.ANIMATION_TIMING.CENTERED_DURATION_IN_WEB : undefined);
+    const animationOutTiming = rest.animationOutTiming ?? (isCentered ? CONST.MODAL.ANIMATION_TIMING.CENTERED_DURATION_OUT_WEB : undefined);
+
     const setStatusBarColor = (color = theme.appBG) => {
         if (!fullscreen) {
             return;
@@ -107,6 +116,8 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     return (
         <BaseModal
             {...rest}
+            animationInTiming={animationInTiming}
+            animationOutTiming={animationOutTiming}
             onModalHide={hideModal}
             onModalShow={showModal}
             onModalWillShow={onModalWillShow}