Hide backdrop of YearPickerModal when it is displayed on top of a RHP

Author: mhawryluk

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -14,6 +14,9 @@ type YearPickerModalProps = {
     /** Whether the modal is visible */
     isVisible: boolean;
 
+    /** Whether the picker is displayed over RHP */
+    isRHPVisible: boolean;
+
     /** The list of years to render */
     years: CalendarPickerListItem[];
 
@@ -27,7 +30,7 @@ type YearPickerModalProps = {
     onClose?: () => void;
 };
 
-function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear(), onYearChange, onClose}: YearPickerModalProps) {
+function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear(), onYearChange, onClose, isRHPVisible}: YearPickerModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [searchText, setSearchText] = useState('');
@@ -59,6 +62,7 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
             onBackdropPress={onClose}
             enableEdgeToEdgeBottomSafeAreaPadding
             shouldUseReanimatedModal
+            backdropOpacity={isRHPVisible ? 0 : undefined}
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/components/DatePicker/CalendarPicker/index.tsx

@@ -7,10 +7,12 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ArrowIcon from './ArrowIcon';
 import Day from './Day';
 import generateMonthMatrix from './generateMonthMatrix';
@@ -67,6 +69,9 @@ function CalendarPicker({
     const [isYearPickerVisible, setIsYearPickerVisible] = useState(false);
     const isFirstRender = useRef(true);
 
+    const [isRHPVisible = false] = useOnyx(ONYXKEYS.MODAL, {selector: (modal) => modal?.type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED, canBeMissing: true});
+    const isRHPVisibleWhenOpened = useRef(isRHPVisible).current;
+
     const currentMonthView = currentDateView.getMonth();
     const currentYearView = currentDateView.getFullYear();
     const calendarDaysMatrix = generateMonthMatrix(currentYearView, currentMonthView);
@@ -301,6 +306,7 @@ function CalendarPicker({
                 years={years}
                 currentYear={currentYearView}
                 onYearChange={onYearSelected}
+                isRHPVisible={isRHPVisibleWhenOpened}
                 onClose={() => setIsYearPickerVisible(false)}
             />
         </View>