Merge pull request Expensify#66609 from software-mansion-labs/fix/multiple-right-docked-backdrops

Fix multiple modal backdrops appearing when opening right-docked modals from RHP

Author: mountiny

src/components/CategorySelector/CategorySelectorModal.tsx

@@ -36,8 +36,6 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory
             isVisible={isVisible}
             onClose={onClose}
             onModalHide={onClose}
-            hideModalContentWhileAnimating
-            useNativeDriver
             enableEdgeToEdgeBottomSafeAreaPadding
             shouldUseReanimatedModal
         >

src/components/CountryPicker/CountrySelectorModal.tsx

@@ -63,11 +63,8 @@ function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onC
             isVisible={isVisible}
             onClose={onClose}
             onModalHide={onClose}
-            hideModalContentWhileAnimating
-            useNativeDriver
             onBackdropPress={onBackdropPress}
             shouldUseReanimatedModal
-            backdropOpacity={0}
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/components/CurrencyPicker.tsx

@@ -102,9 +102,7 @@ function CurrencyPicker({
                 isVisible={isPickerVisible}
                 onClose={hidePickerModal}
                 onModalHide={hidePickerModal}
-                hideModalContentWhileAnimating
                 shouldEnableNewFocusManagement
-                useNativeDriver
                 onBackdropPress={Navigation.dismissModal}
                 shouldUseModalPaddingStyle={false}
                 shouldHandleNavigationBack

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -52,8 +52,6 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
             isVisible={isVisible}
             onClose={() => onClose?.()}
             onModalHide={onClose}
-            hideModalContentWhileAnimating
-            useNativeDriver
             shouldHandleNavigationBack
             shouldUseCustomBackdrop
             onBackdropPress={onClose}

src/components/Modal/BaseModal.tsx

@@ -112,7 +112,8 @@ function BaseModal(
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct modal width
     const canUseTouchScreen = canUseTouchScreenCheck();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
+    const {isSmallScreenWidth, shouldUseNarrowLayout, isInNarrowPaneModal} = useResponsiveLayout();
+
     const {sidePanelOffset} = useSidePanel();
     const sidePanelStyle = !shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {paddingRight: sidePanelOffset.current} : undefined;
     const sidePanelReanimatedStyle =
@@ -344,6 +345,11 @@ function BaseModal(
     const {originalValues} = useContext(ScreenWrapperOfflineIndicatorContext);
     const offlineIndicatorContextValue = useMemo(() => (isInNarrowPane ? (originalValues ?? {}) : {}), [isInNarrowPane, originalValues]);
 
+    const backdropOpacityAdjusted =
+        hideBackdrop || (type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED && !isSmallScreenWidth && (isInNarrowPane || isInNarrowPaneModal)) // right_docked modals shouldn't add backdrops when opened in same-width RHP
+            ? 0
+            : backdropOpacity;
+
     return (
         <ModalContext.Provider value={modalContextValue}>
             <ScreenWrapperOfflineIndicatorContext.Provider value={offlineIndicatorContextValue}>
@@ -376,7 +382,7 @@ function BaseModal(
                         swipeThreshold={swipeThreshold}
                         isVisible={isVisible}
                         backdropColor={theme.overlay}
-                        backdropOpacity={!shouldUseCustomBackdrop && hideBackdrop ? 0 : backdropOpacity}
+                        backdropOpacity={backdropOpacityAdjusted}
                         backdropTransitionOutTiming={0}
                         hasBackdrop={hasBackdrop ?? fullscreen}
                         coverScreen={fullscreen}

src/components/StatePicker/StateSelectorModal.tsx

@@ -67,8 +67,6 @@ function StateSelectorModal({isVisible, currentState, onStateSelected, onClose,
             isVisible={isVisible}
             onClose={onClose}
             onModalHide={onClose}
-            hideModalContentWhileAnimating
-            useNativeDriver
             onBackdropPress={onBackdropPress}
             shouldUseReanimatedModal
         >

src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx

@@ -42,8 +42,6 @@ function WorkspaceMemberDetailsRoleSelectionModal({isVisible, items, onRoleChang
             isVisible={isVisible}
             onClose={() => onClose?.()}
             onModalHide={onClose}
-            hideModalContentWhileAnimating
-            useNativeDriver
             enableEdgeToEdgeBottomSafeAreaPadding
             shouldUseReanimatedModal
         >

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

@@ -44,8 +44,6 @@ function ExpenseLimitTypeSelectorModal({isVisible, currentExpenseLimitType, onEx
             isVisible={isVisible}
             onClose={onClose}
             onModalHide={onClose}
-            hideModalContentWhileAnimating
-            useNativeDriver
             enableEdgeToEdgeBottomSafeAreaPadding
             shouldUseReanimatedModal
         >

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

@@ -34,8 +34,6 @@ function UnitSelectorModal({isVisible, currentUnit, onUnitSelected, onClose, lab
             isVisible={isVisible}
             onClose={onClose}
             onModalHide={onClose}
-            hideModalContentWhileAnimating
-            useNativeDriver
             shouldUseReanimatedModal
         >
             <ScreenWrapper

src/styles/utils/generators/ModalStyleUtils.ts

@@ -313,7 +313,6 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     };
                 }
 
-                hideBackdrop = true;
                 swipeDirection = undefined;
                 shouldAddBottomSafeAreaPadding = true;
                 shouldAddTopSafeAreaPadding = true;