More review fixes

Author: mhawryluk

src/components/DatePicker/CalendarPicker/index.tsx

@@ -96,7 +96,7 @@ function CalendarPicker({
             );
             return newCurrentDateView;
         });
-        setTimeout(() => setIsYearPickerVisible(false));
+        requestAnimationFrame(() => setIsYearPickerVisible(false));
     };
 
     /**

src/components/Modal/BaseModal.tsx

@@ -209,8 +209,9 @@ function BaseModal(
                 innerContainerStyle,
                 outerStyle,
                 shouldUseModalPaddingStyle,
+                shouldUseReanimatedModal,
             ),
-        [StyleUtils, type, windowWidth, windowHeight, isSmallScreenWidth, popoverAnchorPosition, innerContainerStyle, outerStyle, shouldUseModalPaddingStyle],
+        [StyleUtils, type, windowWidth, windowHeight, isSmallScreenWidth, popoverAnchorPosition, innerContainerStyle, outerStyle, shouldUseModalPaddingStyle, shouldUseReanimatedModal],
     );
 
     const modalPaddingStyles = useMemo(() => {

src/components/Modal/ReanimatedModal/index.tsx

@@ -16,8 +16,8 @@ import type {AnimationInType, AnimationOutType} from './types';
 function ReanimatedModal({
     testID,
     animationInDelay,
-    animationInTiming = 300,
-    animationOutTiming = 300,
+    animationInTiming = CONST.MODAL.ANIMATION_TIMING.DEFAULT_IN,
+    animationOutTiming = CONST.MODAL.ANIMATION_TIMING.DEFAULT_OUT,
     animationIn = 'fadeIn',
     animationOut = 'fadeOut',
     avoidKeyboard = false,

src/components/Modal/ReanimatedModal/utils.ts

@@ -1,6 +1,6 @@
+import type {ViewStyle} from 'react-native';
 import {Easing} from 'react-native-reanimated';
 import type {ValidKeyframeProps} from 'react-native-reanimated/lib/typescript/commonTypes';
-import type {ViewStyle} from 'react-native';
 import variables from '@styles/variables';
 import type {AnimationInType, AnimationOutType} from './types';
 
@@ -37,7 +37,8 @@ function getModalInAnimation(animationType: AnimationInType): ValidKeyframeProps
     }
 }
 
-function getModalInAnimationStyle(animationType: AnimationInType): (progress: number) => ViewStyle { // 'progress' in range [0, 1]
+function getModalInAnimationStyle(animationType: AnimationInType): (progress: number) => ViewStyle {
+    // 'progress' in range [0, 1]
     switch (animationType) {
         case 'slideInRight':
             return (progress) => ({transform: [{translateX: `${100 * (1 - progress)}%`}]});

src/components/SidePanel/HelpComponents/HelpOverlay.tsx

@@ -3,7 +3,6 @@ import Animated, {Easing, Keyframe} from 'react-native-reanimated';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
 type HelpOverlayProps = {
@@ -23,13 +22,13 @@ function HelpOverlay({isRHPVisible, onBackdropPress}: HelpOverlayProps) {
     const CustomFadeIn = new Keyframe({
         from: {opacity: 0},
         to: {
-            opacity: variables.overlayOpacity,
+            opacity: 0.72,
             easing,
         },
     }).duration(CONST.MODAL.ANIMATION_TIMING.DEFAULT_IN);
 
     const CustomFadeOut = new Keyframe({
-        from: {opacity: variables.overlayOpacity},
+        from: {opacity: 0.72},
         to: {
             opacity: 0,
             easing,

src/styles/utils/generators/ModalStyleUtils.ts

@@ -42,11 +42,20 @@ type GetModalStylesStyleUtil = {
         innerContainerStyle?: ViewStyle,
         outerStyle?: ViewStyle,
         shouldUseModalPaddingStyle?: boolean,
+        shouldUseReanimatedModal?: boolean,
     ) => GetModalStyles;
 };
 
 const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({theme, styles}) => ({
-    getModalStyles: (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}, shouldUseModalPaddingStyle = true): GetModalStyles => {
+    getModalStyles: (
+        type,
+        windowDimensions,
+        popoverAnchorPosition = {},
+        innerContainerStyle = {},
+        outerStyle = {},
+        shouldUseModalPaddingStyle = true,
+        shouldUseReanimatedModal = false,
+    ): GetModalStyles => {
         const {windowWidth, isSmallScreenWidth} = windowDimensions;
 
         let modalStyle: GetModalStyles['modalStyle'] = {
@@ -270,8 +279,27 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     overflow: 'hidden',
                 };
 
-                animationIn = 'slideInRight';
-                animationOut = 'slideOutRight';
+                if (shouldUseReanimatedModal) {
+                    animationIn = 'slideInRight';
+                    animationOut = 'slideOutRight';
+                } else {
+                    animationIn = {
+                        from: {
+                            translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth,
+                        },
+                        to: {
+                            translateX: 0,
+                        },
+                    };
+                    animationOut = {
+                        from: {
+                            translateX: 0,
+                        },
+                        to: {
+                            translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth,
+                        },
+                    };
+                }
 
                 hideBackdrop = true;
                 swipeDirection = undefined;