fix: enable enableEdgeToEdgeBottomSafeAreaPadding

src/components/AddPaymentMethodMenu.tsx

@@ -111,6 +111,7 @@ function AddPaymentMethodMenu({
             anchorPosition={anchorPosition}
             anchorAlignment={anchorAlignment}
             anchorRef={anchorRef}
+            enableEdgeToEdgeBottomSafeAreaPadding
             onItemSelected={() => {
                 setRestoreFocusType(CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE);
                 onClose();

src/components/AvatarWithImagePicker.tsx

@@ -282,6 +282,7 @@ function AvatarWithImagePicker({
                                     menuItems={menuItems}
                                     anchorAlignment={anchorAlignment}
                                     anchorRef={anchorRef}
+                                    enableEdgeToEdgeBottomSafeAreaPadding
                                 />
                             </>
                         );

src/components/ButtonWithDropdownMenu/index.tsx

@@ -8,7 +8,6 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import usePopoverPosition from '@hooks/usePopoverPosition';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -131,8 +130,6 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
         setSelectedItemIndex(defaultSelectedIndex);
     }, [defaultSelectedIndex]);
 
-    const {paddingBottom} = useSafeAreaPaddings(true);
-
     const {calculatePopoverPosition} = usePopoverPosition();
 
     useEffect(() => {
@@ -342,9 +339,10 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                     anchorPosition={popoverAnchorPosition}
                     shouldShowRadioButton={shouldShowRadioButton}
                     anchorRef={dropdownAnchor}
-                    scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && {...styles.pt4, paddingBottom}}
+                    scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && styles.pt4}
                     anchorAlignment={anchorAlignment}
                     shouldUseModalPaddingStyle={shouldUseModalPaddingStyle}
+                    enableEdgeToEdgeBottomSafeAreaPadding
                     headerText={menuHeaderText}
                     shouldUseScrollView={shouldPopoverUseScrollView}
                     containerStyles={containerStyles}

src/components/CategoryPicker/CategoryPickerModal.tsx

@@ -75,12 +75,14 @@ function CategoryPickerModal({
             shouldMeasureAnchorPositionFromTop={shouldMeasureAnchorPositionFromTop}
             shouldSkipRemeasurement
             shouldDisplayBelowModals
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
             <View style={[StyleUtils.getHeight(popoverDimensions.height), styles.flexColumn, styles.pt4]}>
                 <CategoryPicker
                     selectedCategory={selectedCategory}
                     policyID={policyID}
                     onSubmit={handleCategorySelect}
+                    addBottomSafeAreaPadding
                 />
             </View>
         </PopoverWithMeasuredContent>

src/components/ConnectToCertiniaFlow/index.tsx

@@ -116,6 +116,7 @@ function ConnectToCertiniaFlow({policyID}: ConnectToCertiniaFlowProps) {
             anchorPosition={connectionOptionsPopoverPosition}
             anchorAlignment={anchorAlignment}
             anchorRef={threeDotsMenuContainerRef}
+            enableEdgeToEdgeBottomSafeAreaPadding
         />
     );
 }

src/components/ConnectToNetSuiteFlow/index.tsx

@@ -96,6 +96,7 @@ function ConnectToNetSuiteFlow({policyID}: ConnectToNetSuiteFlowProps) {
                 anchorPosition={reuseConnectionPopoverPosition}
                 anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
                 anchorRef={threeDotsMenuContainerRef}
+                enableEdgeToEdgeBottomSafeAreaPadding
             />
         );
     }

src/components/DecisionModal.tsx

@@ -86,8 +86,12 @@ function DecisionModal({
             onModalHide={onModalHide}
             shouldWrapModalChildrenInScrollViewIfBottomDockedInLandscapeMode={false}
             shouldHandleNavigationBack={shouldHandleNavigationBack}
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
-            <ScrollView contentContainerStyle={styles.p5}>
+            <ScrollView
+                contentContainerStyle={styles.p5}
+                addBottomSafeAreaPadding
+            >
                 <View>
                     <View style={[styles.flexRow, styles.mb5]}>
                         <Header

src/components/ExportDownloadStatusModal.tsx

@@ -1,3 +1,4 @@
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
@@ -109,6 +110,7 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
     };
 
     const isNonDismissible = isPreparing;
+    const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true, style: styles.m5});
 
     const renderContent = () => {
         if (isPreparing) {
@@ -240,8 +242,9 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
             onBackdropPress={isNonDismissible ? () => {} : undefined}
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
             innerContainerStyle={styles.pv0}
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
-            <View style={styles.m5}>{renderContent()}</View>
+            <View style={bottomSafeAreaPaddingStyle}>{renderContent()}</View>
         </Modal>
     );
 }

src/components/MoneyRequestReportView/MoneyRequestReportTransactionLongPressModal.tsx

@@ -1,6 +1,7 @@
 import MenuItem from '@components/MenuItem';
 import Modal from '@components/Modal';
 
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 
@@ -11,6 +12,7 @@ import CONST from '@src/CONST';
 import type {Ref} from 'react';
 
 import React, {useImperativeHandle, useState} from 'react';
+import {View} from 'react-native';
 
 type MoneyRequestReportTransactionLongPressModalHandle = {
     /** Opens the modal for the given transaction */
@@ -33,6 +35,7 @@ function MoneyRequestReportTransactionLongPressModal({isMobileSelectionModeEnabl
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['CheckSquare']);
     const [isVisible, setIsVisible] = useState(false);
     const [selectedTransactionID, setSelectedTransactionID] = useState('');
+    const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true});
 
     useImperativeHandle(ref, () => ({
         show: (transactionID: string) => {
@@ -47,18 +50,21 @@ function MoneyRequestReportTransactionLongPressModal({isMobileSelectionModeEnabl
             type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
             onClose={() => setIsVisible(false)}
             shouldPreventScrollOnFocus
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
-            <MenuItem
-                title={translate('common.select')}
-                icon={expensifyIcons.CheckSquare}
-                onPress={() => {
-                    if (!isMobileSelectionModeEnabled) {
-                        turnOnMobileSelectionMode();
-                    }
-                    toggleTransaction(selectedTransactionID);
-                    setIsVisible(false);
-                }}
-            />
+            <View style={bottomSafeAreaPaddingStyle}>
+                <MenuItem
+                    title={translate('common.select')}
+                    icon={expensifyIcons.CheckSquare}
+                    onPress={() => {
+                        if (!isMobileSelectionModeEnabled) {
+                            turnOnMobileSelectionMode();
+                        }
+                        toggleTransaction(selectedTransactionID);
+                        setIsVisible(false);
+                    }}
+                />
+            </View>
         </Modal>
     );
 }

src/components/OpenAppFailureModal/BaseOpenAppFailureModal.tsx

@@ -4,6 +4,7 @@ import Modal from '@components/Modal';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -30,14 +31,17 @@ function BaseOpenAppFailureModal({onRefreshAndTryAgainButtonPress}: BaseOpenAppF
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
 
+    const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true, style: styles.p6});
+
     return (
         <Modal
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
             isVisible={isOpenAppFailureModalOpen}
             innerContainerStyle={styles.pv0}
             onClose={() => setIsOpenAppFailureModalOpen(false)}
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
-            <View style={[styles.p6]}>
+            <View style={bottomSafeAreaPaddingStyle}>
                 <Header
                     title={translate('openAppFailureModal.title')}
                     textStyles={[styles.mb2]}

src/components/PDFDownloadModal.tsx

@@ -1,3 +1,4 @@
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -90,15 +91,18 @@ function PDFDownloadModal({
         context: loadingReasonContext,
     };
 
+    const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true, style: [styles.flexRow, styles.m5]});
+
     return (
         <Modal
             onClose={onClose}
             onModalHide={onModalHide}
             isVisible={isVisible}
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
             innerContainerStyle={styles.pv0}
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
-            <View style={[styles.flexRow, styles.m5]}>
+            <View style={bottomSafeAreaPaddingStyle}>
                 <View style={[styles.flex1]}>
                     <View style={[styles.flexRow, styles.mb4]}>
                         <View style={[styles.flex1]}>

src/components/ProactiveAppReviewModal.tsx

@@ -1,3 +1,4 @@
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -32,15 +33,17 @@ function ProactiveAppReviewModal({isVisible, onPositive, onNegative, onSkip}: Pr
     const styles = useThemeStyles();
     const illustrations = useMemoizedLazyIllustrations(['ToddWithPhones']);
     const {translate} = useLocalize();
+    const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true, style: styles.m5});
 
     return (
         <Modal
             onClose={onSkip}
             isVisible={isVisible}
             type={shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
             innerContainerStyle={styles.pv0}
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
-            <View style={[styles.m5]}>
+            <View style={bottomSafeAreaPaddingStyle}>
                 {/* Todd with phones illustration */}
                 <View style={[styles.alignItemsCenter, styles.mb3]}>
                     <ImageSVG

src/components/RequireTwoFactorAuthenticationModal.tsx

@@ -1,3 +1,4 @@
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -47,15 +48,17 @@ function RequireTwoFactorAuthenticationModal({onCancel = () => {}, description,
     const StyleUtils = useStyleUtils();
     const isReduceMotionEnabled = Accessibility.useReducedMotion();
     const illustrations = useMemoizedLazyIllustrations(['Safe']);
+    const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true});
     return (
         <Modal
             onClose={onCancel}
             isVisible={isVisible}
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
             innerContainerStyle={{...styles.pb5, ...styles.pt0, ...styles.boxShadowNone}}
             shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
-            <View>
+            <View style={bottomSafeAreaPaddingStyle}>
                 <View style={[styles.cardSectionIllustration, styles.alignItemsCenter, StyleUtils.getBackgroundColorStyle(LottieAnimations.Safe.backgroundColor)]}>
                     {isReduceMotionEnabled ? (
                         <ImageSVG

src/components/Search/FilterDropdowns/FilterPopupButton.tsx

@@ -1,6 +1,7 @@
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
 
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useOnyx from '@hooks/useOnyx';
 import usePopoverPosition from '@hooks/usePopoverPosition';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -61,6 +62,7 @@ function FilterPopupButton({viewportOffsetTop, popoverWidth, wrapperStyle, popov
     const {isSmallScreenWidth} = useResponsiveLayout();
     const isFocused = useIsFocused();
     const styles = useThemeStyles();
+    const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true});
     const StyleUtils = useStyleUtils();
     const {windowHeight} = useWindowDimensions();
     const triggerRef = useRef<View | null>(null);
@@ -148,8 +150,9 @@ function FilterPopupButton({viewportOffsetTop, popoverWidth, wrapperStyle, popov
                     shouldSkipRemeasurement
                     shouldDisplayBelowModals
                     shouldWrapModalChildrenInScrollViewIfBottomDockedInLandscapeMode={false}
+                    enableEdgeToEdgeBottomSafeAreaPadding
                 >
-                    {popoverContent}
+                    <View style={bottomSafeAreaPaddingStyle}>{popoverContent}</View>
                 </PopoverWithMeasuredContent>
             )}
         </View>

src/components/Search/SearchList/SearchSelectAllMenu.tsx

@@ -94,6 +94,7 @@ function SearchSelectAllMenu({isSelectAllChecked, isIndeterminate, selectedItems
                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                 }}
+                enableEdgeToEdgeBottomSafeAreaPadding
             />
             <Checkbox
                 ref={selectAllAnchorRef}

src/components/Search/SearchPageHeader/SearchActionsBarCreateButton.tsx

@@ -233,6 +233,7 @@ function SearchActionsBarCreateButton() {
                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                 }}
+                enableEdgeToEdgeBottomSafeAreaPadding
             />
             <Button
                 ref={createButtonRef}

src/components/Search/primitives/useRowLongPressMenu.tsx

@@ -3,6 +3,7 @@ import Modal from '@components/Modal';
 import {useSearchRowSelectionActions} from '@components/Search/SearchContext';
 import type {SearchListItem, TransactionListItemType} from '@components/Search/SearchList/ListItem/types';
 
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 
@@ -13,6 +14,7 @@ import CONST from '@src/CONST';
 
 import {useRoute} from '@react-navigation/native';
 import React, {useCallback, useState} from 'react';
+import {View} from 'react-native';
 
 type UseRowLongPressMenuParams = {
     /** Whether long press should be suppressed entirely. */
@@ -46,6 +48,7 @@ function useRowLongPressMenu({shouldPreventLongPressRow, isSmallScreenWidth, isM
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['CheckSquare']);
     const {toggle} = useSearchRowSelectionActions();
     const route = useRoute();
+    const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true});
 
     const [isModalVisible, setIsModalVisible] = useState(false);
     const [longPressedItem, setLongPressedItem] = useState<SearchListItem>();
@@ -99,13 +102,16 @@ function useRowLongPressMenu({shouldPreventLongPressRow, isSmallScreenWidth, isM
             type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
             onClose={() => setIsModalVisible(false)}
             shouldPreventScrollOnFocus
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
-            <MenuItem
-                title={translate('common.select')}
-                icon={expensifyIcons.CheckSquare}
-                onPress={turnOnSelectionMode}
-                sentryLabel={CONST.SENTRY_LABEL.SEARCH.SELECTION_MODE_MENU_ITEM}
-            />
+            <View style={bottomSafeAreaPaddingStyle}>
+                <MenuItem
+                    title={translate('common.select')}
+                    icon={expensifyIcons.CheckSquare}
+                    onPress={turnOnSelectionMode}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.SELECTION_MODE_MENU_ITEM}
+                />
+            </View>
         </Modal>
     );