Finish right-docked modals reanimated migration

src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx

@@ -56,7 +56,6 @@ function PaymentCardCurrencyModal({isVisible, currencies, currentCurrency = CONS
                 onClose?.();
                 Navigation.dismissModal();
             }}
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={styles.pb0}

src/components/AmountPicker/AmountSelectorModal.tsx

@@ -48,7 +48,6 @@ function AmountSelectorModal({value, description = '', onValueSelected, isVisibl
             onClose={onClose}
             onModalHide={onClose}
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 enableEdgeToEdgeBottomSafeAreaPadding

src/components/AvatarCropModal/AvatarCropModal.tsx

@@ -352,7 +352,6 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
             shouldUseCustomBackdrop
             shouldHandleNavigationBack
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/components/CategorySelector/CategorySelectorModal.tsx

@@ -37,7 +37,6 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory
             onClose={onClose}
             onModalHide={onClose}
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/components/CountryPicker/CountrySelectorModal.tsx

@@ -64,7 +64,6 @@ function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onC
             onClose={onClose}
             onModalHide={onClose}
             onBackdropPress={onBackdropPress}
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/components/CurrencyPicker.tsx

@@ -76,7 +76,6 @@ function CurrencyPicker({label, value, errorText, headerContent, excludeCurrenci
                 shouldUseModalPaddingStyle={false}
                 shouldHandleNavigationBack
                 enableEdgeToEdgeBottomSafeAreaPadding
-                shouldUseReanimatedModal
             >
                 <ScreenWrapper
                     style={[styles.pb0]}

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -56,7 +56,6 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
             shouldUseCustomBackdrop
             onBackdropPress={onClose}
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/components/Modal/BaseModal.tsx

@@ -37,6 +37,7 @@ 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.RIGHT_DOCKED,
     CONST.MODAL.MODAL_TYPE.CENTERED,
     CONST.MODAL.MODAL_TYPE.CENTERED_SMALL,
     CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE,
@@ -174,7 +175,7 @@ function BaseModal(
     const {sidePanelOffset} = useSidePanel();
     const sidePanelStyle = !shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {paddingRight: sidePanelOffset.current} : undefined;
     const sidePanelAnimatedStyle =
-        (shouldUseReanimatedModal || type === CONST.MODAL.MODAL_TYPE.POPOVER) && shouldApplySidePanelOffset && !isSmallScreenWidth
+        (shouldUseReanimatedModal || type === CONST.MODAL.MODAL_TYPE.POPOVER || type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED) && shouldApplySidePanelOffset && !isSmallScreenWidth
             ? {transform: [{translateX: Animated.multiply(sidePanelOffset.current, -1)}]}
             : undefined;
     const keyboardStateContextValue = useKeyboardState();
@@ -329,7 +330,6 @@ function BaseModal(
                     modalOverlapsWithTopSafeArea,
                     shouldDisableBottomSafeAreaPadding: !!shouldDisableBottomSafeAreaPadding,
                 },
-                shouldUseReanimatedModal,
             ),
         [
             StyleUtils,
@@ -344,7 +344,6 @@ function BaseModal(
             shouldUseModalPaddingStyle,
             modalOverlapsWithTopSafeArea,
             shouldDisableBottomSafeAreaPadding,
-            shouldUseReanimatedModal,
         ],
     );
 

src/components/PushRowWithModal/PushRowModal.tsx

@@ -77,7 +77,6 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
             onModalHide={handleClose}
             shouldUseCustomBackdrop
-            shouldUseReanimatedModal
             shouldHandleNavigationBack
         >
             <ScreenWrapper

src/components/SidePanel/HelpModal/index.android.tsx

@@ -26,7 +26,6 @@ function Help({shouldHideSidePanel, closeSidePanel}: HelpProps) {
             isVisible={!shouldHideSidePanel}
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
             shouldHandleNavigationBack
-            shouldUseReanimatedModal
         >
             <HelpContent closeSidePanel={closeSidePanel} />
         </Modal>

src/components/SidePanel/HelpModal/index.ios.tsx

@@ -13,7 +13,6 @@ function Help({shouldHideSidePanel, closeSidePanel}: HelpProps) {
             shouldHandleNavigationBack
             propagateSwipe
             swipeDirection={CONST.SWIPE_DIRECTION.RIGHT}
-            shouldUseReanimatedModal
         >
             <HelpContent closeSidePanel={closeSidePanel} />
         </Modal>

src/components/StatePicker/StateSelectorModal.tsx

@@ -68,7 +68,6 @@ function StateSelectorModal({isVisible, currentState, onStateSelected, onClose,
             onClose={onClose}
             onModalHide={onClose}
             onBackdropPress={onBackdropPress}
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/components/TextPicker/TextSelectorModal.tsx

@@ -121,7 +121,6 @@ function TextSelectorModal({
             onModalHide={hide}
             shouldUseModalPaddingStyle={false}
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 enableEdgeToEdgeBottomSafeAreaPadding

src/components/TimeModalPicker.tsx

@@ -56,7 +56,6 @@ function TimeModalPicker({value, errorText, label, onInputChange = () => {}}: Ti
                 onClose={hidePickerModal}
                 onModalHide={hidePickerModal}
                 enableEdgeToEdgeBottomSafeAreaPadding
-                shouldUseReanimatedModal
             >
                 <ScreenWrapper
                     style={styles.pb0}

src/components/ValidateCodeActionModal/index.tsx

@@ -70,7 +70,6 @@ function ValidateCodeActionModal({
             onBackdropPress={() => Navigation.dismissModal()}
             shouldUseModalPaddingStyle={false}
             animationInTiming={disableAnimation ? 1 : undefined}
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 includeSafeAreaPaddingBottom

src/components/ValuePicker/ValueSelectorModal.tsx

@@ -26,7 +26,6 @@ function ValueSelectorModal({
             onBackdropPress={onBackdropPress}
             shouldHandleNavigationBack
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 includePaddingTop={false}

src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx

@@ -51,7 +51,6 @@ function BusinessTypeSelectorModal({isVisible, currentBusinessType, onBusinessTy
                 onClose();
                 Navigation.dismissModal();
             }}
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/pages/Travel/TravelUpgrade.tsx

@@ -67,7 +67,6 @@ function TravelUpgrade({route}: TravelUpgradeProps) {
                     Navigation.dismissModal();
                 }}
                 enableEdgeToEdgeBottomSafeAreaPadding
-                shouldUseReanimatedModal
             >
                 <ScreenWrapper
                     style={[styles.pb0]}

src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx

@@ -43,7 +43,6 @@ function WorkspaceMemberDetailsRoleSelectionModal({isVisible, items, onRoleChang
             onClose={() => onClose?.()}
             onModalHide={onClose}
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 testID={WorkspaceMemberDetailsRoleSelectionModal.displayName}

src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteCustomListSelectorModal.tsx

@@ -72,7 +72,6 @@ function NetSuiteCustomListSelectorModal({isVisible, currentCustomListValue, onC
             onModalHide={onClose}
             onBackdropPress={onBackdropPress}
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 includePaddingTop={false}

src/pages/workspace/categories/ExpenseLimitTypeSelector/ExpenseLimitTypeSelectorModal.tsx

@@ -45,7 +45,6 @@ function ExpenseLimitTypeSelectorModal({isVisible, currentExpenseLimitType, onEx
             onClose={onClose}
             onModalHide={onClose}
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/pages/workspace/distanceRates/UnitSelector/UnitSelectorModal.tsx

@@ -34,7 +34,6 @@ function UnitSelectorModal({isVisible, currentUnit, onUnitSelected, onClose, lab
             isVisible={isVisible}
             onClose={onClose}
             onModalHide={onClose}
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/pages/workspace/reports/InitialListValueSelector/InitialListValueSelectorModal.tsx

@@ -42,7 +42,6 @@ function InitialListValueSelectorModal({isVisible, currentValue, label, subtitle
             onClose={onClose}
             onModalHide={onClose}
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={styles.pb0}

src/pages/workspace/reports/TypeSelector/TypeSelectorModal.tsx

@@ -40,7 +40,6 @@ function TypeSelectorModal({isVisible, currentType, label, subtitle, onTypeSelec
             onClose={onClose}
             onModalHide={onClose}
             enableEdgeToEdgeBottomSafeAreaPadding
-            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={styles.pb0}

src/styles/utils/generators/ModalStyleUtils.ts

@@ -48,7 +48,6 @@ type GetModalStylesStyleUtil = {
             shouldDisableBottomSafeAreaPadding?: boolean;
             modalOverlapsWithTopSafeArea?: boolean;
         },
-        shouldUseReanimatedModal?: boolean,
     ) => GetModalStyles;
 };
 
@@ -61,7 +60,6 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
         outerStyle = {},
         shouldUseModalPaddingStyle = true,
         safeAreaOptions = {modalOverlapsWithTopSafeArea: false, shouldDisableBottomSafeAreaPadding: false},
-        shouldUseReanimatedModal = false,
     ): GetModalStyles => {
         const {windowWidth, isSmallScreenWidth} = windowDimensions;
 
@@ -285,27 +283,8 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     overflow: 'hidden',
                 };
 
-                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,
-                        },
-                    };
-                }
+                animationIn = 'slideInRight';
+                animationOut = 'slideOutRight';
 
                 swipeDirection = undefined;
                 shouldAddBottomSafeAreaPadding = true;