Edge-to-edge Bottom Safe Area Padding: Workspace screens

src/components/AddressForm.tsx

@@ -161,6 +161,7 @@ function AddressForm({
             onSubmit={onSubmit}
             submitButtonText={submitButtonText}
             enabledWhenOffline
+            addBottomSafeAreaPadding
         >
             <View>
                 <InputWrapper

src/components/AmountPicker/AmountSelectorModal.tsx

@@ -49,19 +49,22 @@ function AmountSelectorModal({value, description = '', onValueSelected, isVisibl
             onModalHide={onClose}
             hideModalContentWhileAnimating
             useNativeDriver
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
             <ScreenWrapper
+                enableEdgeToEdgeBottomSafeAreaPadding
                 includePaddingTop={false}
-                includeSafeAreaPaddingBottom={false}
                 testID={AmountSelectorModal.displayName}
                 shouldEnableMaxHeight
-                style={[styles.pb0]}
             >
                 <HeaderWithBackButton
                     title={description}
                     onBackButtonPress={onClose}
                 />
-                <ScrollView contentContainerStyle={[styles.flexGrow1, styles.mb5]}>
+                <ScrollView
+                    contentContainerStyle={[styles.flexGrow1, styles.mb5]}
+                    addBottomSafeAreaPadding
+                >
                     <View style={styles.flex1}>
                         <AmountForm
                             // eslint-disable-next-line react/jsx-props-no-spreading

src/components/CategoryPicker.tsx

@@ -1,11 +1,12 @@
 import React, {useMemo} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import * as CategoryOptionsListUtils from '@libs/CategoryOptionListUtils';
 import type {Category} from '@libs/CategoryOptionListUtils';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -17,9 +18,15 @@
     policyID: string | undefined;
     selectedCategory?: string;
     onSubmit: (item: ListItem) => void;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * If enabled, the content will have a bottom padding equal to account for the safe bottom area inset.
+     */
+    addBottomSafeAreaPadding?: boolean;
 };
 
-function CategoryPicker({selectedCategory, policyID, onSubmit}: CategoryPickerProps) {
+function CategoryPicker({selectedCategory, policyID, onSubmit, addBottomSafeAreaPadding = false, contentContainerStyle}: CategoryPickerProps) {
     const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`);
     const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`);
     const [policyRecentlyUsedCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`);
@@ -76,6 +83,8 @@
             ListItem={RadioListItem}
             initiallyFocusedOptionKey={selectedOptionKey ?? undefined}
             isRowMultilineSupported
+            addBottomSafeAreaPadding={addBottomSafeAreaPadding}
+            contentContainerStyle={contentContainerStyle}
         />
     );
 }

src/components/CategorySelector/CategorySelectorModal.tsx

@@ -38,11 +38,12 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory
             onModalHide={onClose}
             hideModalContentWhileAnimating
             useNativeDriver
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
             <ScreenWrapper
                 style={[styles.pb0]}
                 includePaddingTop={false}
-                includeSafeAreaPaddingBottom
+                enableEdgeToEdgeBottomSafeAreaPadding
                 shouldEnableKeyboardAvoidingView={false}
                 testID={CategorySelectorModal.displayName}
             >
@@ -55,6 +56,8 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory
                     policyID={policyID}
                     selectedCategory={currentCategory}
                     onSubmit={onCategorySelected}
+                    contentContainerStyle={styles.pb5}
+                    addBottomSafeAreaPadding
                 />
             </ScreenWrapper>
         </Modal>

src/components/ConnectionLayout.tsx

@@ -133,6 +133,7 @@ function ConnectionLayout({
             shouldBeBlocked={!!shouldBeBlocked || shouldBlockByConnection}
         >
             <ScreenWrapper
+                enableEdgeToEdgeBottomSafeAreaPadding
                 includeSafeAreaPaddingBottom={!!shouldIncludeSafeAreaPaddingBottom}
                 shouldEnableMaxHeight
                 testID={displayName}
@@ -143,7 +144,12 @@ function ConnectionLayout({
                     onBackButtonPress={onBackButtonPress}
                 />
                 {shouldUseScrollView ? (
-                    <ScrollView contentContainerStyle={contentContainerStyle}>{renderSelectionContent}</ScrollView>
+                    <ScrollView
+                        contentContainerStyle={contentContainerStyle}
+                        addBottomSafeAreaPadding
+                    >
+                        {renderSelectionContent}
+                    </ScrollView>
                 ) : (
                     <View style={contentContainerStyle}>{renderSelectionContent}</View>
                 )}

src/components/CurrencyPicker.tsx

@@ -77,13 +77,13 @@ function CurrencyPicker({label, value, errorText, headerContent, excludeCurrenci
                 onBackdropPress={Navigation.dismissModal}
                 shouldUseModalPaddingStyle={false}
                 shouldHandleNavigationBack
+                enableEdgeToEdgeBottomSafeAreaPadding
             >
                 <ScreenWrapper
                     style={[styles.pb0]}
-                    includePaddingTop
-                    includeSafeAreaPaddingBottom
                     testID={CurrencyPicker.displayName}
                     shouldEnableMaxHeight
+                    enableEdgeToEdgeBottomSafeAreaPadding
                 >
                     <HeaderWithBackButton
                         title={label}
@@ -97,6 +97,7 @@ function CurrencyPicker({label, value, errorText, headerContent, excludeCurrenci
                             onSelect={updateInput}
                             searchInputLabel={translate('common.search')}
                             excludedCurrencies={excludeCurrencies}
+                            addBottomSafeAreaPadding
                         />
                     </BlockingComponent>
                 </ScreenWrapper>

src/components/Form/FormWrapper.tsx

@@ -8,6 +8,7 @@ import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import FormElement from '@components/FormElement';
 import ScrollView from '@components/ScrollView';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getLatestErrorMessage} from '@libs/ErrorUtils';
@@ -48,6 +49,12 @@ type FormWrapperProps = ChildrenProps &
 
         /** Whether the submit button should stick to the bottom of the screen. */
         shouldSubmitButtonStickToBottom?: boolean;
+
+        /**
+         * Whether the button should have a background layer in the color of theme.appBG.
+         * This is needed for buttons that allow content to display under them.
+         */
+        shouldSubmitButtonBlendOpacity?: boolean;
     };
 
 function FormWrapper({
@@ -74,6 +81,7 @@ function FormWrapper({
     addBottomSafeAreaPadding,
     addOfflineIndicatorBottomSafeAreaPadding: addOfflineIndicatorBottomSafeAreaPaddingProp,
     shouldSubmitButtonStickToBottom: shouldSubmitButtonStickToBottomProp,
+    shouldSubmitButtonBlendOpacity = false,
 }: FormWrapperProps) {
     const styles = useThemeStyles();
     const formRef = useRef<RNScrollView>(null);
@@ -115,18 +123,28 @@ function FormWrapper({
     }, [errors, formState?.errorFields, inputRefs]);
 
     // If either of `addBottomSafeAreaPadding` or `shouldSubmitButtonStickToBottom` is explicitly set,
-    // we expect that the user wants to use the new edge-to-edge bottom safe area padding handling.
+    // we expect that the user wants to use the new edge-to-edge mode.
     // In this case, we want to get and apply the padding unconditionnally.
-    const enableEdgeToEdgeBottomSafeAreaPadding = addBottomSafeAreaPadding !== undefined || shouldSubmitButtonStickToBottomProp !== undefined;
+    const isUsingEdgeToEdgeMode = addBottomSafeAreaPadding !== undefined || shouldSubmitButtonStickToBottomProp !== undefined;
     const shouldSubmitButtonStickToBottom = shouldSubmitButtonStickToBottomProp ?? false;
-    const {paddingBottom} = useSafeAreaPaddings(enableEdgeToEdgeBottomSafeAreaPadding);
+    const {paddingBottom} = useSafeAreaPaddings(isUsingEdgeToEdgeMode);
 
     // Same as above, if `addBottomSafeAreaPadding` is explicitly set true, we default to the new edge-to-edge bottom safe area padding handling.
     // If the paddingBottom is 0, it has already been applied to a parent component and we don't want to apply the padding again.
     const isLegacyBottomSafeAreaPaddingAlreadyApplied = paddingBottom === 0;
     const shouldApplyBottomSafeAreaPadding = addBottomSafeAreaPadding ?? !isLegacyBottomSafeAreaPaddingAlreadyApplied;
     const addOfflineIndicatorBottomSafeAreaPadding = addOfflineIndicatorBottomSafeAreaPaddingProp ?? addBottomSafeAreaPadding === true;
 
+    // We need to add bottom safe area padding to the submit button when we don't use a scroll view or
+    // when the submit button is sticking to the bottom.
+    const addSubmitButtonBottomSafeAreaPadding = addBottomSafeAreaPadding && (!shouldUseScrollView || shouldSubmitButtonStickToBottom);
+    const submitButtonStylesWithBottomSafeAreaPadding = useBottomSafeSafeAreaPaddingStyle({
+        addBottomSafeAreaPadding: addSubmitButtonBottomSafeAreaPadding,
+        styleProperty: shouldSubmitButtonStickToBottom ? 'bottom' : 'paddingBottom',
+        additionalPaddingBottom: shouldSubmitButtonStickToBottom ? styles.pb5.paddingBottom : 0,
+        style: submitButtonStyles,
+    });
+
     const SubmitButton = useMemo(
         () =>
             isSubmitButtonVisible && (
@@ -142,23 +160,15 @@ function FormWrapper({
                     containerStyles={[
                         styles.mh0,
                         styles.mt5,
-                        submitFlexEnabled ? styles.flex1 : {},
-                        submitButtonStyles,
-                        shouldSubmitButtonStickToBottom
-                            ? [
-                                  styles.stickToBottom,
-                                  {
-                                      bottom: styles.pb5.paddingBottom + paddingBottom,
-                                  },
-                                  style,
-                              ]
-                            : {},
+                        submitFlexEnabled && styles.flex1,
+                        submitButtonStylesWithBottomSafeAreaPadding,
+                        shouldSubmitButtonStickToBottom && [styles.stickToBottom, style],
                     ]}
                     enabledWhenOffline={enabledWhenOffline}
                     isSubmitActionDangerous={isSubmitActionDangerous}
                     disablePressOnEnter={disablePressOnEnter}
                     enterKeyEventListenerPriority={1}
-                    shouldBlendOpacity={shouldSubmitButtonStickToBottom}
+                    shouldBlendOpacity={shouldSubmitButtonBlendOpacity}
                 />
             ),
         [
@@ -175,16 +185,15 @@ function FormWrapper({
             isSubmitDisabled,
             onFixTheErrorsLinkPressed,
             onSubmit,
-            paddingBottom,
             shouldHideFixErrorsAlert,
+            shouldSubmitButtonBlendOpacity,
             shouldSubmitButtonStickToBottom,
             style,
             styles.flex1,
             styles.mh0,
             styles.mt5,
-            styles.pb5.paddingBottom,
             styles.stickToBottom,
-            submitButtonStyles,
+            submitButtonStylesWithBottomSafeAreaPadding,
             submitButtonText,
             submitFlexEnabled,
         ],

src/components/FormAlertWithSubmitButton.tsx

@@ -68,6 +68,9 @@ type FormAlertWithSubmitButtonProps = {
      * This is needed for buttons that allow content to display under them.
      */
     shouldBlendOpacity?: boolean;
+
+    /** Whether to add a bottom padding to the button */
+    addButtonBottomPadding?: boolean;
 };
 
 function FormAlertWithSubmitButton({
@@ -90,9 +93,10 @@ function FormAlertWithSubmitButton({
     errorMessageStyle,
     enterKeyEventListenerPriority = 0,
     shouldBlendOpacity = false,
+    addButtonBottomPadding = true,
 }: FormAlertWithSubmitButtonProps) {
     const styles = useThemeStyles();
-    const style = [!footerContent ? {} : styles.mb3, buttonStyles];
+    const style = [footerContent && addButtonBottomPadding ? styles.mb3 : {}, buttonStyles];
 
     // Disable pressOnEnter for Android Native to avoid issues with the Samsung keyboard,
     // where pressing Enter saves the form instead of adding a new line in multiline input.

src/components/ImportSpreadsheetColumns.tsx

@@ -80,7 +80,7 @@ function ImportSpreadsheetColumns({spreadsheetColumns, columnNames, columnRoles,
                     })}
                 </View>
             </ScrollView>
-            <FixedFooter>
+            <FixedFooter addBottomSafeAreaPadding>
                 <OfflineWithFeedback
                     shouldDisplayErrorAbove
                     errors={errors}

src/components/InteractiveStepWrapper.tsx

@@ -40,6 +40,19 @@ type InteractiveStepWrapperProps = {
 
     // Offline indicator style
     offlineIndicatorStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Whether the KeyboardAvoidingView should compensate for the bottom safe area padding.
+     * The KeyboardAvoidingView will use a negative keyboardVerticalOffset.
+     */
+    shouldKeyboardOffsetBottomSafeAreaPadding?: boolean;
+
+    /**
+     * Temporary flag to disable safe area bottom spacing in the ScreenWrapper and to allow edge-to-edge content
+     * The ScreenWrapper should not always apply bottom safe area padding, instead it should be applied to the scrollable/bottom-docked content directly.
+     * This flag can be removed, once all components/screens have switched to edge-to-edge safe area handling.
+     */
+    enableEdgeToEdgeBottomSafeAreaPadding?: boolean;
 };
 
 function InteractiveStepWrapper(
@@ -55,6 +68,8 @@ function InteractiveStepWrapper(
         shouldShowOfflineIndicator,
         shouldEnablePickerAvoiding = false,
         offlineIndicatorStyle,
+        shouldKeyboardOffsetBottomSafeAreaPadding,
+        enableEdgeToEdgeBottomSafeAreaPadding,
     }: InteractiveStepWrapperProps,
     ref: React.ForwardedRef<View>,
 ) {
@@ -65,10 +80,12 @@ function InteractiveStepWrapper(
             ref={ref}
             testID={wrapperID}
             includeSafeAreaPaddingBottom
+            enableEdgeToEdgeBottomSafeAreaPadding={enableEdgeToEdgeBottomSafeAreaPadding}
             shouldEnablePickerAvoiding={shouldEnablePickerAvoiding}
             shouldEnableMaxHeight={shouldEnableMaxHeight}
             shouldShowOfflineIndicator={shouldShowOfflineIndicator}
             offlineIndicatorStyle={offlineIndicatorStyle}
+            shouldKeyboardOffsetBottomSafeAreaPadding={shouldKeyboardOffsetBottomSafeAreaPadding}
         >
             <HeaderWithBackButton
                 title={headerTitle}

src/components/Modal/BaseModal.tsx

@@ -78,11 +78,13 @@ function BaseModal(
         swipeThreshold = 150,
         swipeDirection,
         shouldPreventScrollOnFocus = false,
-        enableEdgeToEdgeBottomSafeAreaPadding = false,
+        enableEdgeToEdgeBottomSafeAreaPadding,
         shouldApplySidePanelOffset = type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED,
     }: BaseModalProps,
     ref: React.ForwardedRef<View>,
 ) {
+    // When the `enableEdgeToEdgeBottomSafeAreaPadding` prop is explicitly set, we enable edge-to-edge mode.
+    const isUsingEdgeToEdgeMode = enableEdgeToEdgeBottomSafeAreaPadding !== undefined;
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -216,7 +218,7 @@ function BaseModal(
             shouldAddBottomSafeAreaMargin,
             shouldAddTopSafeAreaMargin,
             // enableEdgeToEdgeBottomSafeAreaPadding is used as a temporary solution to disable safe area bottom spacing on modals, to allow edge-to-edge content
-            shouldAddBottomSafeAreaPadding: !enableEdgeToEdgeBottomSafeAreaPadding && (!avoidKeyboard || !keyboardStateContextValue.isKeyboardActive) && shouldAddBottomSafeAreaPadding,
+            shouldAddBottomSafeAreaPadding: !isUsingEdgeToEdgeMode && (!avoidKeyboard || !keyboardStateContextValue.isKeyboardActive) && shouldAddBottomSafeAreaPadding,
             shouldAddTopSafeAreaPadding,
             modalContainerStyle,
             insets,
@@ -225,8 +227,8 @@ function BaseModal(
     }, [
         StyleUtils,
         avoidKeyboard,
-        enableEdgeToEdgeBottomSafeAreaPadding,
         insets,
+        isUsingEdgeToEdgeMode,
         keyboardStateContextValue.isKeyboardActive,
         modalContainerStyle,
         shouldAddBottomSafeAreaMargin,