Reanimated modal for validate code action modal

src/CONST/index.ts

@@ -1461,6 +1461,8 @@ const CONST = {
         ANIMATION_TIMING: {
             DEFAULT_IN: 300,
             DEFAULT_OUT: 200,
+            DEFAULT_RIGHT_DOCKED_IOS_IN: 500,
+            DEFAULT_RIGHT_DOCKED_IOS_OUT: 400,
             FAB_IN: 350,
             FAB_OUT: 200,
         },

src/components/Modal/index.ios.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
 import type BaseModalProps from './types';
 
 function Modal({children, ...rest}: BaseModalProps) {
+    const {isInNarrowPaneModal} = useResponsiveLayout();
+    const animationInTiming = rest.animationInTiming ?? (isInNarrowPaneModal ? CONST.MODAL.ANIMATION_TIMING.DEFAULT_RIGHT_DOCKED_IOS_IN : undefined);
+    const animationOutTiming = rest.animationOutTiming ?? (isInNarrowPaneModal ? CONST.MODAL.ANIMATION_TIMING.DEFAULT_RIGHT_DOCKED_IOS_OUT : undefined);
+
     return (
         <BaseModal
             useNativeDriver
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}
+            animationInTiming={animationInTiming}
+            animationOutTiming={animationOutTiming}
         >
             {children}
         </BaseModal>

src/components/ValidateCodeActionModal/index.tsx

@@ -68,10 +68,9 @@ function ValidateCodeActionModal({
             onClose={hide}
             onModalHide={onModalHide ?? hide}
             onBackdropPress={() => Navigation.dismissModal()}
-            hideModalContentWhileAnimating
-            useNativeDriver
             shouldUseModalPaddingStyle={false}
             animationInTiming={disableAnimation ? 1 : undefined}
+            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom