From d7722def328241dd49bee6f81de8581938d61738 Mon Sep 17 00:00:00 2001 From: mhawryluk Date: Mon, 18 Aug 2025 10:43:51 +0200 Subject: [PATCH] Finish right-docked modals reanimated migration --- .../PaymentCardCurrencyModal.tsx | 1 - .../AmountPicker/AmountSelectorModal.tsx | 1 - .../AvatarCropModal/AvatarCropModal.tsx | 1 - .../CategorySelectorModal.tsx | 1 - .../CountryPicker/CountrySelectorModal.tsx | 1 - src/components/CurrencyPicker.tsx | 1 - .../CalendarPicker/YearPickerModal.tsx | 1 - src/components/Modal/BaseModal.tsx | 11 +++++--- .../PushRowWithModal/PushRowModal.tsx | 1 - .../SidePanel/HelpModal/index.android.tsx | 1 - .../SidePanel/HelpModal/index.ios.tsx | 1 - .../StatePicker/StateSelectorModal.tsx | 1 - .../TextPicker/TextSelectorModal.tsx | 1 - src/components/TimeModalPicker.tsx | 1 - .../ValidateCodeActionModal/index.tsx | 1 - .../ValuePicker/ValueSelectorModal.tsx | 1 - .../BusinessTypeSelectorModal.tsx | 1 - src/pages/Travel/TravelUpgrade.tsx | 1 - .../WorkspaceMemberRoleSelectionModal.tsx | 1 - .../NetSuiteCustomListSelectorModal.tsx | 1 - .../ExpenseLimitTypeSelectorModal.tsx | 1 - .../UnitSelector/UnitSelectorModal.tsx | 1 - .../InitialListValueSelectorModal.tsx | 1 - .../TypeSelector/TypeSelectorModal.tsx | 1 - .../utils/generators/ModalStyleUtils.ts | 25 ++----------------- 25 files changed, 9 insertions(+), 50 deletions(-) diff --git a/src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx b/src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx index d5cfd384de26..a0b3227c2d42 100644 --- a/src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx +++ b/src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx @@ -56,7 +56,6 @@ function PaymentCardCurrencyModal({isVisible, currencies, currentCurrency = CONS onClose?.(); Navigation.dismissModal(); }} - shouldUseReanimatedModal > > = [CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.FULLSCREEN, CONST.MODAL.MODAL_TYPE.POPOVER]; +const REANIMATED_MODAL_TYPES: Array> = [ + CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, + CONST.MODAL.MODAL_TYPE.FULLSCREEN, + CONST.MODAL.MODAL_TYPE.POPOVER, + CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED, +]; type ModalComponentProps = (ReactNativeModalProps | ReanimatedModalProps) & { type?: ValueOf; @@ -166,7 +171,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(); @@ -321,7 +326,6 @@ function BaseModal( modalOverlapsWithTopSafeArea, shouldDisableBottomSafeAreaPadding: !!shouldDisableBottomSafeAreaPadding, }, - shouldUseReanimatedModal, ), [ StyleUtils, @@ -336,7 +340,6 @@ function BaseModal( shouldUseModalPaddingStyle, modalOverlapsWithTopSafeArea, shouldDisableBottomSafeAreaPadding, - shouldUseReanimatedModal, ], ); diff --git a/src/components/PushRowWithModal/PushRowModal.tsx b/src/components/PushRowWithModal/PushRowModal.tsx index 74bb7194e64a..bfcf1672083b 100644 --- a/src/components/PushRowWithModal/PushRowModal.tsx +++ b/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 > diff --git a/src/components/SidePanel/HelpModal/index.ios.tsx b/src/components/SidePanel/HelpModal/index.ios.tsx index 052d50d56d0a..4f8cf6c7a531 100644 --- a/src/components/SidePanel/HelpModal/index.ios.tsx +++ b/src/components/SidePanel/HelpModal/index.ios.tsx @@ -13,7 +13,6 @@ function Help({shouldHideSidePanel, closeSidePanel}: HelpProps) { shouldHandleNavigationBack propagateSwipe swipeDirection={CONST.SWIPE_DIRECTION.RIGHT} - shouldUseReanimatedModal > diff --git a/src/components/StatePicker/StateSelectorModal.tsx b/src/components/StatePicker/StateSelectorModal.tsx index ea551a8025bf..bd4e2ea18b84 100644 --- a/src/components/StatePicker/StateSelectorModal.tsx +++ b/src/components/StatePicker/StateSelectorModal.tsx @@ -68,7 +68,6 @@ function StateSelectorModal({isVisible, currentState, onStateSelected, onClose, onClose={onClose} onModalHide={onClose} onBackdropPress={onBackdropPress} - shouldUseReanimatedModal > {}}: Ti onClose={hidePickerModal} onModalHide={hidePickerModal} enableEdgeToEdgeBottomSafeAreaPadding - shouldUseReanimatedModal > Navigation.dismissModal()} shouldUseModalPaddingStyle={false} animationInTiming={disableAnimation ? 1 : undefined} - shouldUseReanimatedModal > onClose?.()} onModalHide={onClose} enableEdgeToEdgeBottomSafeAreaPadding - shouldUseReanimatedModal > GetModalStyles; }; @@ -61,7 +60,6 @@ const createModalStyleUtils: StyleUtilGenerator = ({the outerStyle = {}, shouldUseModalPaddingStyle = true, safeAreaOptions = {modalOverlapsWithTopSafeArea: false, shouldDisableBottomSafeAreaPadding: false}, - shouldUseReanimatedModal = false, ): GetModalStyles => { const {windowWidth, isSmallScreenWidth} = windowDimensions; @@ -285,27 +283,8 @@ const createModalStyleUtils: StyleUtilGenerator = ({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;