diff --git a/src/components/AddressForm.tsx b/src/components/AddressForm.tsx index 908cfcbb9164d..1f75370a82aa9 100644 --- a/src/components/AddressForm.tsx +++ b/src/components/AddressForm.tsx @@ -161,6 +161,7 @@ function AddressForm({ onSubmit={onSubmit} submitButtonText={submitButtonText} enabledWhenOffline + addBottomSafeAreaPadding > - + void; + contentContainerStyle?: StyleProp; + + /** + * 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 @@ function CategoryPicker({selectedCategory, policyID, onSubmit}: CategoryPickerPr ListItem={RadioListItem} initiallyFocusedOptionKey={selectedOptionKey ?? undefined} isRowMultilineSupported + addBottomSafeAreaPadding={addBottomSafeAreaPadding} + contentContainerStyle={contentContainerStyle} /> ); } diff --git a/src/components/CategorySelector/CategorySelectorModal.tsx b/src/components/CategorySelector/CategorySelectorModal.tsx index f12a52dbb3145..4bcfb9e1f9b62 100644 --- a/src/components/CategorySelector/CategorySelectorModal.tsx +++ b/src/components/CategorySelector/CategorySelectorModal.tsx @@ -38,11 +38,12 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory onModalHide={onClose} hideModalContentWhileAnimating useNativeDriver + enableEdgeToEdgeBottomSafeAreaPadding > @@ -55,6 +56,8 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory policyID={policyID} selectedCategory={currentCategory} onSubmit={onCategorySelected} + contentContainerStyle={styles.pb5} + addBottomSafeAreaPadding /> diff --git a/src/components/ConnectionLayout.tsx b/src/components/ConnectionLayout.tsx index de61f368a9118..3fe5bef760337 100644 --- a/src/components/ConnectionLayout.tsx +++ b/src/components/ConnectionLayout.tsx @@ -133,6 +133,7 @@ function ConnectionLayout({ shouldBeBlocked={!!shouldBeBlocked || shouldBlockByConnection} > {shouldUseScrollView ? ( - {renderSelectionContent} + + {renderSelectionContent} + ) : ( {renderSelectionContent} )} diff --git a/src/components/CurrencyPicker.tsx b/src/components/CurrencyPicker.tsx index 735d7ac0d02ff..9875e2403d30b 100644 --- a/src/components/CurrencyPicker.tsx +++ b/src/components/CurrencyPicker.tsx @@ -77,13 +77,13 @@ function CurrencyPicker({label, value, errorText, headerContent, excludeCurrenci onBackdropPress={Navigation.dismissModal} shouldUseModalPaddingStyle={false} shouldHandleNavigationBack + enableEdgeToEdgeBottomSafeAreaPadding > diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx index 8d3ffc65afd70..e3dd5da85aba2 100644 --- a/src/components/Form/FormWrapper.tsx +++ b/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(null); @@ -115,11 +123,11 @@ 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. @@ -127,6 +135,16 @@ function FormWrapper({ 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, ], diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx index 3eb0b0abd508f..0c2d28e70c99d 100644 --- a/src/components/FormAlertWithSubmitButton.tsx +++ b/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. diff --git a/src/components/ImportSpreadsheetColumns.tsx b/src/components/ImportSpreadsheetColumns.tsx index 7df36dd80c9d1..4edfd656dc700 100644 --- a/src/components/ImportSpreadsheetColumns.tsx +++ b/src/components/ImportSpreadsheetColumns.tsx @@ -80,7 +80,7 @@ function ImportSpreadsheetColumns({spreadsheetColumns, columnNames, columnRoles, })} - + ; + + /** + * 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, ) { @@ -65,10 +80,12 @@ function InteractiveStepWrapper( ref={ref} testID={wrapperID} includeSafeAreaPaddingBottom + enableEdgeToEdgeBottomSafeAreaPadding={enableEdgeToEdgeBottomSafeAreaPadding} shouldEnablePickerAvoiding={shouldEnablePickerAvoiding} shouldEnableMaxHeight={shouldEnableMaxHeight} shouldShowOfflineIndicator={shouldShowOfflineIndicator} offlineIndicatorStyle={offlineIndicatorStyle} + shouldKeyboardOffsetBottomSafeAreaPadding={shouldKeyboardOffsetBottomSafeAreaPadding} > , ) { + // 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, diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 15a97159e40cf..bf3a455855156 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -169,10 +169,10 @@ function ScreenWrapper( shouldUseCachedViewportHeight = false, focusTrapSettings, bottomContent, - enableEdgeToEdgeBottomSafeAreaPadding = false, - shouldMobileOfflineIndicatorStickToBottom = enableEdgeToEdgeBottomSafeAreaPadding, - shouldKeyboardOffsetBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding, - isOfflineIndicatorTranslucent = enableEdgeToEdgeBottomSafeAreaPadding, + enableEdgeToEdgeBottomSafeAreaPadding: enableEdgeToEdgeBottomSafeAreaPaddingProp, + shouldMobileOfflineIndicatorStickToBottom: shouldMobileOfflineIndicatorStickToBottomProp, + shouldKeyboardOffsetBottomSafeAreaPadding: shouldKeyboardOffsetBottomSafeAreaPaddingProp, + isOfflineIndicatorTranslucent: isOfflineIndicatorTranslucentProp, }: ScreenWrapperProps, ref: ForwardedRef, ) { @@ -195,7 +195,17 @@ function ScreenWrapper( const [isSingleNewDotEntry] = useOnyx(ONYXKEYS.IS_SINGLE_NEW_DOT_ENTRY); - const includeSafeAreaPaddingBottom = enableEdgeToEdgeBottomSafeAreaPadding ? false : includeSafeAreaPaddingBottomProp; + // When the `enableEdgeToEdgeBottomSafeAreaPadding` prop is explicitly set, we enable edge-to-edge mode. + const isUsingEdgeToEdgeMode = enableEdgeToEdgeBottomSafeAreaPaddingProp !== undefined; + const enableEdgeToEdgeBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPaddingProp ?? false; + + // We enable all of these flags by default, if we are using edge-to-edge mode. + const shouldMobileOfflineIndicatorStickToBottom = shouldMobileOfflineIndicatorStickToBottomProp ?? isUsingEdgeToEdgeMode; + const shouldKeyboardOffsetBottomSafeAreaPadding = shouldKeyboardOffsetBottomSafeAreaPaddingProp ?? isUsingEdgeToEdgeMode; + const isOfflineIndicatorTranslucent = isOfflineIndicatorTranslucentProp ?? isUsingEdgeToEdgeMode; + + // We disable legacy bottom safe area padding handling, if we are using edge-to-edge mode. + const includeSafeAreaPaddingBottom = isUsingEdgeToEdgeMode ? false : includeSafeAreaPaddingBottomProp; // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout for a case where we want to show the offline indicator only on small screens // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth @@ -299,22 +309,25 @@ function ScreenWrapper( // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); - const {insets, paddingTop, paddingBottom, safeAreaPaddingBottomStyle, unmodifiedPaddings} = useSafeAreaPaddings(enableEdgeToEdgeBottomSafeAreaPadding); + const {insets, paddingTop, paddingBottom, safeAreaPaddingBottomStyle, unmodifiedPaddings} = useSafeAreaPaddings(isUsingEdgeToEdgeMode); const navigationBarType = useMemo(() => StyleUtils.getNavigationBarType(insets), [StyleUtils, insets]); const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS; const isSafeAreaTopPaddingApplied = includePaddingTop; const paddingTopStyle: StyleProp = useMemo(() => { - if (includePaddingTop && ignoreInsetsConsumption) { - return {paddingTop: unmodifiedPaddings.top}; + if (!includePaddingTop) { + return {}; } - if (includePaddingTop) { + if (isUsingEdgeToEdgeMode) { return {paddingTop}; } - return {}; - }, [ignoreInsetsConsumption, includePaddingTop, paddingTop, unmodifiedPaddings.top]); + if (ignoreInsetsConsumption) { + return {paddingTop: unmodifiedPaddings.top}; + } + return {paddingTop}; + }, [isUsingEdgeToEdgeMode, ignoreInsetsConsumption, includePaddingTop, paddingTop, unmodifiedPaddings.top]); - const showBottomContent = enableEdgeToEdgeBottomSafeAreaPadding ? !!bottomContent : true; + const showBottomContent = isUsingEdgeToEdgeMode ? !!bottomContent : true; const edgeToEdgeBottomContentStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true}); const legacyBottomContentStyle: StyleProp = useMemo(() => { const shouldUseUnmodifiedPaddings = includeSafeAreaPaddingBottom && ignoreInsetsConsumption; @@ -331,8 +344,8 @@ function ScreenWrapper( }, [ignoreInsetsConsumption, includeSafeAreaPaddingBottom, paddingBottom, unmodifiedPaddings.bottom]); const bottomContentStyle = useMemo( - () => (enableEdgeToEdgeBottomSafeAreaPadding ? edgeToEdgeBottomContentStyle : legacyBottomContentStyle), - [enableEdgeToEdgeBottomSafeAreaPadding, edgeToEdgeBottomContentStyle, legacyBottomContentStyle], + () => (isUsingEdgeToEdgeMode ? edgeToEdgeBottomContentStyle : legacyBottomContentStyle), + [isUsingEdgeToEdgeMode, edgeToEdgeBottomContentStyle, legacyBottomContentStyle], ); /** @@ -351,7 +364,7 @@ function ScreenWrapper( }, [bottomContent, isOffline, isOfflineIndicatorTranslucent, isSoftKeyNavigation, styles.appBG, styles.navigationBarBG]); /** In edge-to-edge mode, we always want to apply the bottom safe area padding to the mobile offline indicator. */ - const hasMobileOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? true : !includeSafeAreaPaddingBottom; + const hasMobileOfflineIndicatorBottomSafeAreaPadding = isUsingEdgeToEdgeMode ? enableEdgeToEdgeBottomSafeAreaPadding : !includeSafeAreaPaddingBottom; /** * This style includes the bottom safe area padding for the mobile offline indicator. @@ -456,7 +469,7 @@ function ScreenWrapper( <> {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} diff --git a/src/components/SelectionScreen.tsx b/src/components/SelectionScreen.tsx index dbeb829d7573b..ad77b6f38a0f3 100644 --- a/src/components/SelectionScreen.tsx +++ b/src/components/SelectionScreen.tsx @@ -154,7 +154,7 @@ function SelectionScreen({ shouldBeBlocked={isConnectionEmpty || shouldBeBlocked} > ({ shouldUpdateFocusedIndex={shouldUpdateFocusedIndex} isAlternateTextMultilineSupported listItemWrapperStyle={listItemWrapperStyle} + addBottomSafeAreaPadding={!errors || isEmptyObject(errors)} > void; @@ -42,11 +34,15 @@ type TaxPickerProps = { /** The type of IOU */ iouType?: ValueOf; - onDismiss?: () => void; + onDismiss: () => void; + + /** + * If enabled, the content will have a bottom padding equal to account for the safe bottom area inset. + */ + addBottomSafeAreaPadding?: boolean; }; -function TaxPicker({selectedTaxRate = '', policyID, transactionID, insets, onSubmit, action, iouType, onDismiss = Navigation.goBack}: TaxPickerProps) { - const StyleUtils = useStyleUtils(); +function TaxPicker({selectedTaxRate = '', policyID, transactionID, onSubmit, action, iouType, onDismiss = Navigation.goBack, addBottomSafeAreaPadding}: TaxPickerProps) { const {translate} = useLocalize(); const [searchValue, setSearchValue] = useState(''); const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`); @@ -122,7 +118,7 @@ function TaxPicker({selectedTaxRate = '', policyID, transactionID, insets, onSub ListItem={RadioListItem} initiallyFocusedOptionKey={selectedOptionKey ?? undefined} isRowMultilineSupported - containerStyle={{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}} + addBottomSafeAreaPadding={addBottomSafeAreaPadding} /> ); } diff --git a/src/components/TextPicker/TextSelectorModal.tsx b/src/components/TextPicker/TextSelectorModal.tsx index 58886c84fa298..3fea21b7072c1 100644 --- a/src/components/TextPicker/TextSelectorModal.tsx +++ b/src/components/TextPicker/TextSelectorModal.tsx @@ -102,10 +102,11 @@ function TextSelectorModal({ hideModalContentWhileAnimating useNativeDriver shouldUseModalPaddingStyle={false} + enableEdgeToEdgeBottomSafeAreaPadding > @@ -124,6 +125,7 @@ function TextSelectorModal({ style={[styles.mh5, styles.flex1]} enabledWhenOffline shouldHideFixErrorsAlert + addBottomSafeAreaPadding > {!!subtitle && {subtitle}} ); } diff --git a/src/hooks/useSafeAreaPaddings.ts b/src/hooks/useSafeAreaPaddings.ts index 9087cd52a3382..4c80856b0f90b 100644 --- a/src/hooks/useSafeAreaPaddings.ts +++ b/src/hooks/useSafeAreaPaddings.ts @@ -30,7 +30,7 @@ import useStyleUtils from './useStyleUtils'; * // Use these values to style your component accordingly * } */ -function useSafeAreaPaddings(enableEdgeToEdgeBottomSafeAreaPadding = false) { +function useSafeAreaPaddings(isUsingEdgeToEdgeBottomSafeAreaPadding = false) { const StyleUtils = useStyleUtils(); const insets = useSafeAreaInsets(); const {paddingTop, paddingBottom} = useMemo(() => StyleUtils.getPlatformSafeAreaPadding(insets), [StyleUtils, insets]); @@ -41,11 +41,11 @@ function useSafeAreaPaddings(enableEdgeToEdgeBottomSafeAreaPadding = false) { const adaptedPaddingBottom = isSafeAreaBottomPaddingApplied ? 0 : paddingBottom; const safeAreaPaddingBottomStyle = useMemo( - () => ({paddingBottom: enableEdgeToEdgeBottomSafeAreaPadding ? paddingBottom : adaptedPaddingBottom}), - [adaptedPaddingBottom, enableEdgeToEdgeBottomSafeAreaPadding, paddingBottom], + () => ({paddingBottom: isUsingEdgeToEdgeBottomSafeAreaPadding ? paddingBottom : adaptedPaddingBottom}), + [adaptedPaddingBottom, isUsingEdgeToEdgeBottomSafeAreaPadding, paddingBottom], ); - if (enableEdgeToEdgeBottomSafeAreaPadding) { + if (isUsingEdgeToEdgeBottomSafeAreaPadding) { return { paddingTop, paddingBottom, diff --git a/src/pages/AddressPage.tsx b/src/pages/AddressPage.tsx index f58535a7e7223..6e9d10747a957 100644 --- a/src/pages/AddressPage.tsx +++ b/src/pages/AddressPage.tsx @@ -85,7 +85,7 @@ function AddressPage({title, address, updateAddress, isLoadingApp = true, backTo return ( diff --git a/src/pages/ReimbursementAccount/USD/Requestor/VerifyIdentity/VerifyIdentity.tsx b/src/pages/ReimbursementAccount/USD/Requestor/VerifyIdentity/VerifyIdentity.tsx index 943f04d668405..b936c4faa3da5 100644 --- a/src/pages/ReimbursementAccount/USD/Requestor/VerifyIdentity/VerifyIdentity.tsx +++ b/src/pages/ReimbursementAccount/USD/Requestor/VerifyIdentity/VerifyIdentity.tsx @@ -55,8 +55,9 @@ function VerifyIdentity({onBackButtonPress}: VerifyIdentityProps) { handleBackButtonPress={onBackButtonPress} startStepIndex={2} stepNames={CONST.BANK_ACCOUNT.STEP_NAMES} + enableEdgeToEdgeBottomSafeAreaPadding > - + ); diff --git a/src/pages/settings/Profile/PersonalDetails/StateSelectionPage.tsx b/src/pages/settings/Profile/PersonalDetails/StateSelectionPage.tsx index 14a3248d2c80d..245dc1b07517e 100644 --- a/src/pages/settings/Profile/PersonalDetails/StateSelectionPage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/StateSelectionPage.tsx @@ -69,7 +69,7 @@ function StateSelectionPage() { return ( ); diff --git a/src/pages/wallet/WalletStatementPage.tsx b/src/pages/wallet/WalletStatementPage.tsx index 4a363e19e4903..aa974535839b3 100644 --- a/src/pages/wallet/WalletStatementPage.tsx +++ b/src/pages/wallet/WalletStatementPage.tsx @@ -89,7 +89,7 @@ function WalletStatementPage({route}: WalletStatementPageProps) { return ( - + diff --git a/src/pages/workspace/WorkspaceConfirmationPage.tsx b/src/pages/workspace/WorkspaceConfirmationPage.tsx index 66d4b4944fad6..8c132ef2d4d27 100644 --- a/src/pages/workspace/WorkspaceConfirmationPage.tsx +++ b/src/pages/workspace/WorkspaceConfirmationPage.tsx @@ -26,7 +26,7 @@ function WorkspaceConfirmationPage() { return ( diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index d886924fccb7d..27c7d894c9840 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -434,7 +434,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac return ( : null} > ), - [inviteUser, policy?.alertMessage, selectedOptions.length, shouldShowAlertPrompt, styles, translate], + [inviteUser, policy?.alertMessage, selectedOptions.length, shouldShowAlertPrompt, styles.flexBasisAuto, styles.flexGrow0, styles.flexReset, styles.flexShrink0, translate], ); useEffect(() => { @@ -300,7 +300,7 @@ function WorkspaceInvitePage({route, policy}: WorkspaceInvitePageProps) { shouldEnableMaxHeight shouldUseCachedViewportHeight testID={WorkspaceInvitePage.displayName} - includeSafeAreaPaddingBottom + enableEdgeToEdgeBottomSafeAreaPadding onEntryTransitionEnd={() => setDidScreenTransitionEnd(true)} > diff --git a/src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx b/src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx index 47930660b00e1..6dac5bd4b267d 100644 --- a/src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx +++ b/src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx @@ -44,10 +44,12 @@ function WorkspaceMemberDetailsRoleSelectionModal({isVisible, items, onRoleChang onModalHide={onClose} hideModalContentWhileAnimating useNativeDriver + enableEdgeToEdgeBottomSafeAreaPadding > item.isSelected)?.keyForList} + addBottomSafeAreaPadding /> diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index e95c2fbfdb3fa..10d10b8513aab 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -747,6 +747,7 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]} listHeaderContent={shouldUseNarrowLayout ? {getHeaderContent()} : null} showScrollIndicator={false} + addBottomSafeAreaPadding /> diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx index d41d4eb93036b..3e34882f7a523 100644 --- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx +++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx @@ -456,7 +456,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro policyID={route.params.policyID} > goBackFromWorkspaceCentralScreen(policyID)} /> - + {translate('workspace.moreFeatures.subtitle')} {sections.map(renderSection)} diff --git a/src/pages/workspace/WorkspaceNamePage.tsx b/src/pages/workspace/WorkspaceNamePage.tsx index 7b3aa72661645..498cc934080f6 100644 --- a/src/pages/workspace/WorkspaceNamePage.tsx +++ b/src/pages/workspace/WorkspaceNamePage.tsx @@ -62,7 +62,7 @@ function WorkspaceNamePage({policy}: Props) { accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]} > @@ -80,6 +80,7 @@ function WorkspaceNamePage({policy}: Props) { onSubmit={submit} enabledWhenOffline shouldHideFixErrorsAlert + addBottomSafeAreaPadding >