Restore RHP-style animation for RIGHT_DOCKED Modal on web

src/components/Modal/ReanimatedModal/types.ts

@@ -26,8 +26,8 @@ type GestureHandlerProps = {
     swipeDirection?: SwipeDirection | SwipeDirection[];
 };
 
-type AnimationIn = 'fadeIn' | 'slideInUp' | 'slideInRight';
-type AnimationOut = 'fadeOut' | 'slideOutDown' | 'slideOutRight';
+type AnimationIn = 'fadeIn' | 'slideInUp' | 'slideInRight' | 'slideAndFadeInRight';
+type AnimationOut = 'fadeOut' | 'slideOutDown' | 'slideOutRight' | 'slideAndFadeOutRight';
 
 type ReanimatedModalProps = ViewProps &
     GestureProps &

src/components/Modal/ReanimatedModal/utils.ts

@@ -2,6 +2,7 @@ import type {ViewStyle} from 'react-native';
 import {Easing} from 'react-native-reanimated';
 import type {ValidKeyframeProps} from 'react-native-reanimated/lib/typescript/commonTypes';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import type {AnimationIn, AnimationOut} from './types';
 
 const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory();
@@ -32,6 +33,15 @@ function getModalInAnimation(animationType: AnimationIn): ValidKeyframeProps {
                     easing,
                 },
             };
+        case 'slideAndFadeInRight':
+            return {
+                from: {opacity: 0, transform: [{translateX: CONST.MODAL.RHP_ENTER_OFFSET_PX_WEB}]},
+                to: {
+                    opacity: 1,
+                    transform: [{translateX: 0}],
+                    easing,
+                },
+            };
         default:
             throw new Error('Unknown animation type');
     }
@@ -48,6 +58,8 @@ function getModalInAnimationStyle(animationType: AnimationIn): (progress: number
             return (progress) => ({transform: [{translateY: `${100 * (1 - progress)}%`}]});
         case 'fadeIn':
             return (progress) => ({opacity: progress});
+        case 'slideAndFadeInRight':
+            return (progress) => ({opacity: progress, transform: [{translateX: CONST.MODAL.RHP_ENTER_OFFSET_PX_WEB * (1 - progress)}]});
         default:
             throw new Error('Unknown animation type');
     }
@@ -79,6 +91,15 @@ function getModalOutAnimation(animationType: AnimationOut): ValidKeyframeProps {
                     easing,
                 },
             };
+        case 'slideAndFadeOutRight':
+            return {
+                from: {opacity: 1, transform: [{translateX: 0}]},
+                to: {
+                    opacity: 0,
+                    transform: [{translateX: CONST.MODAL.RHP_ENTER_OFFSET_PX_WEB}],
+                    easing,
+                },
+            };
         default:
             throw new Error('Unknown animation type');
     }

src/components/Modal/index.tsx

@@ -13,14 +13,21 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     const StyleUtils = useStyleUtils();
     const [previousStatusBarColor, setPreviousStatusBarColor] = useState<string>();
 
+    const isRightDocked = type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
     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 rightDockedInTiming = isRightDocked ? CONST.MODAL.ANIMATION_TIMING.RHP_DURATION_IN_WEB : undefined;
+    const rightDockedOutTiming = isRightDocked ? CONST.MODAL.ANIMATION_TIMING.RHP_DURATION_OUT_WEB : undefined;
+    const centeredInTiming = isCentered ? CONST.MODAL.ANIMATION_TIMING.CENTERED_DURATION_IN_WEB : undefined;
+    const centeredOutTiming = isCentered ? CONST.MODAL.ANIMATION_TIMING.CENTERED_DURATION_OUT_WEB : undefined;
+    const animationInTiming = rest.animationInTiming ?? rightDockedInTiming ?? centeredInTiming;
+    const animationOutTiming = rest.animationOutTiming ?? rightDockedOutTiming ?? centeredOutTiming;
+    const animationIn = rest.animationIn ?? (isRightDocked ? 'slideAndFadeInRight' : undefined);
+    const animationOut = rest.animationOut ?? (isRightDocked ? 'slideAndFadeOutRight' : undefined);
 
     const setStatusBarColor = (color = theme.appBG) => {
         if (!fullscreen) {
@@ -116,6 +123,8 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     return (
         <BaseModal
             {...rest}
+            animationIn={animationIn}
+            animationOut={animationOut}
             animationInTiming={animationInTiming}
             animationOutTiming={animationOutTiming}
             onModalHide={hideModal}