[DELTA] Bottom safe area handling based on NavigationBar type

src/CONST.ts

@@ -1443,6 +1443,20 @@ const CONST = {
         LIGHT: 'light',
         DARK: 'dark',
     },
+    NAVIGATION_BAR_TYPE: {
+        // We consider there to be no navigation bar in one of these cases:
+        // 1. The device has physical navigation buttons
+        // 2. The device uses gesture navigation without a gesture bar.
+        // 3. The device uses hidden (auto-hiding) soft keys.
+        NONE: 'none',
+        SOFT_KEYS: 'soft-keys',
+        GESTURE_BAR: 'gesture-bar',
+    },
+    // Currently, in Android there is no native API to detect the type of navigation bar (soft keys vs. gesture).
+    // The navigation bar on (standard) Android devices is around 30-50dpi tall. (Samsung: 40dpi, Huawei: ~34dpi)
+    // To leave room to detect soft-key navigation bars on non-standard Android devices,
+    // we set this height threshold to 30dpi, since gesture bars will never be taller than that. (Samsung & Huawei: ~14-15dpi)
+    NAVIGATION_BAR_ANDROID_SOFT_KEYS_MINIMUM_HEIGHT_THRESHOLD: 30,
     TRANSACTION: {
         DEFAULT_MERCHANT: 'Expense',
         UNKNOWN_MERCHANT: 'Unknown Merchant',

src/components/AutoCompleteSuggestions/index.tsx

@@ -64,7 +64,7 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
     const StyleUtils = useStyleUtils();
     const insets = useSafeAreaInsets();
     const {keyboardHeight, isKeyboardAnimatingRef} = useKeyboardState();
-    const {paddingBottom: bottomInset, paddingTop: topInset} = StyleUtils.getSafeAreaPadding(insets ?? undefined);
+    const {paddingBottom: bottomInset, paddingTop: topInset} = StyleUtils.getPlatformSafeAreaPadding(insets ?? undefined);
 
     useEffect(() => {
         const container = containerRef.current;

src/components/CategorySelector/CategorySelectorModal.tsx

@@ -42,7 +42,6 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory
             <ScreenWrapper
                 style={[styles.pb0]}
                 includePaddingTop={false}
-                includeSafeAreaPaddingBottom
                 shouldEnableKeyboardAvoidingView={false}
                 testID={CategorySelectorModal.displayName}
             >

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -58,7 +58,6 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
             <ScreenWrapper
                 style={[styles.pb0]}
                 includePaddingTop={false}
-                includeSafeAreaPaddingBottom
                 testID={YearPickerModal.displayName}
             >
                 <HeaderWithBackButton

src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx

@@ -11,7 +11,7 @@ function GrowlNotificationContainer({children, translateY}: GrowlNotificationCon
     const insets = useSafeAreaInsets();
     const animatedStyles = useAnimatedStyle(() => styles.growlNotificationTranslateY(translateY));
 
-    return <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, animatedStyles]}>{children}</Animated.View>;
+    return <Animated.View style={[StyleUtils.getPlatformSafeAreaPadding(insets), styles.growlNotificationContainer, animatedStyles]}>{children}</Animated.View>;
 }
 
 GrowlNotificationContainer.displayName = 'GrowlNotificationContainer';

src/components/InteractiveStepWrapper.tsx

@@ -68,7 +68,6 @@ function InteractiveStepWrapper(
         <ScreenWrapper
             ref={ref}
             testID={wrapperID}
-            includeSafeAreaPaddingBottom
             shouldEnablePickerAvoiding={shouldEnablePickerAvoiding}
             shouldEnableMaxHeight={shouldEnableMaxHeight}
             shouldShowOfflineIndicator={shouldShowOfflineIndicator}

src/components/Modal/BaseModal.tsx

@@ -184,7 +184,7 @@ function BaseModal(
         paddingBottom: safeAreaPaddingBottom,
         paddingLeft: safeAreaPaddingLeft,
         paddingRight: safeAreaPaddingRight,
-    } = StyleUtils.getSafeAreaPadding(safeAreaInsets);
+    } = StyleUtils.getPlatformSafeAreaPadding(safeAreaInsets);
 
     const modalPaddingStyles = shouldUseModalPaddingStyle
         ? StyleUtils.getModalPaddingStyles({

src/components/PopoverWithoutOverlay/index.tsx

@@ -8,7 +8,7 @@
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
 import viewRef from '@src/types/utils/viewRef';
 import type PopoverWithoutOverlayProps from './types';
 
@@ -77,7 +77,7 @@
         paddingBottom: safeAreaPaddingBottom,
         paddingLeft: safeAreaPaddingLeft,
         paddingRight: safeAreaPaddingRight,
-    } = useMemo(() => StyleUtils.getSafeAreaPadding(insets), [StyleUtils, insets]);
+    } = useMemo(() => StyleUtils.getPlatformSafeAreaPadding(insets), [StyleUtils, insets]);
 
     const modalPaddingStyles = useMemo(
         () =>

src/components/SafeAreaConsumer/index.tsx

@@ -16,7 +16,7 @@ function SafeAreaConsumer({children}: SafeAreaConsumerProps) {
         <SafeAreaInsetsContext.Consumer>
             {(safeAreaInsets) => {
                 const insets = StyleUtils.getSafeAreaInsets(safeAreaInsets);
-                const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
+                const {paddingTop, paddingBottom} = StyleUtils.getPlatformSafeAreaPadding(insets);
 
                 return children({
                     paddingTop,

src/components/ScreenWrapper.tsx

@@ -30,6 +30,8 @@ import ModalContext from './Modal/ModalContext';
 import OfflineIndicator from './OfflineIndicator';
 import withNavigationFallback from './withNavigationFallback';
 
+const includeSafeAreaPaddingBottom = false;
+
 type ScreenWrapperChildrenProps = {
     insets: EdgeInsets;
     safeAreaPaddingBottomStyle?: {
@@ -124,7 +126,6 @@ function ScreenWrapper(
         shouldEnableMinHeight = false,
         includePaddingTop = true,
         keyboardAvoidingViewBehavior = 'padding',
-        includeSafeAreaPaddingBottom = true,
         shouldEnableKeyboardAvoidingView = true,
         shouldEnablePickerAvoiding = true,
         headerGapStyles,
@@ -261,9 +262,8 @@ function ScreenWrapper(
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
-    const {insets, paddingTop, paddingBottom, safeAreaPaddingBottomStyle, unmodifiedPaddings} = useStyledSafeAreaInsets();
+    const {insets, paddingTop, safeAreaPaddingBottomStyle, unmodifiedPaddings} = useStyledSafeAreaInsets();
     const paddingTopStyle: StyleProp<ViewStyle> = {};
-    const paddingBottomStyle: StyleProp<ViewStyle> = {};
 
     const isSafeAreaTopPaddingApplied = includePaddingTop;
     if (includePaddingTop) {
@@ -273,18 +273,16 @@ function ScreenWrapper(
         paddingTopStyle.paddingTop = unmodifiedPaddings.top;
     }
 
-    // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
-    if (includeSafeAreaPaddingBottom) {
-        paddingBottomStyle.paddingBottom = paddingBottom;
-    }
-    if (includeSafeAreaPaddingBottom && ignoreInsetsConsumption) {
-        paddingBottomStyle.paddingBottom = unmodifiedPaddings.bottom;
-    }
+    const bottomContentStyle: StyleProp<ViewStyle> = {
+        ...safeAreaPaddingBottomStyle,
+        // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
+        ...(includeSafeAreaPaddingBottom && ignoreInsetsConsumption ? {paddingBottom: unmodifiedPaddings.bottom} : {}),
+    };
 
     const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && isMobileWebKit());
     const contextValue = useMemo(
         () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, isSafeAreaBottomPaddingApplied: includeSafeAreaPaddingBottom}),
-        [didScreenTransitionEnd, includeSafeAreaPaddingBottom, isSafeAreaTopPaddingApplied],
+        [didScreenTransitionEnd, isSafeAreaTopPaddingApplied],
     );
 
     return (
@@ -328,11 +326,7 @@ function ScreenWrapper(
                                     <>
                                         <OfflineIndicator
                                             style={[offlineIndicatorStyle]}
-                                            containerStyles={
-                                                includeSafeAreaPaddingBottom
-                                                    ? [styles.offlineIndicatorMobile]
-                                                    : [styles.offlineIndicatorMobile, {paddingBottom: paddingBottom + styles.offlineIndicatorMobile.paddingBottom}]
-                                            }
+                                            containerStyles={styles.offlineIndicatorMobile}
                                         />
                                         {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
                                         <ImportedStateIndicator />
@@ -352,7 +346,7 @@ function ScreenWrapper(
                         </PickerAvoidingView>
                     </KeyboardAvoidingView>
                 </View>
-                <View style={paddingBottomStyle}>{bottomContent}</View>
+                {!!bottomContent && <View style={bottomContentStyle}>{bottomContent}</View>}
             </View>
         </FocusTrapForScreens>
     );

src/components/Search/SearchDateFilterBase.tsx

@@ -45,7 +45,6 @@ function SearchDateFilterBase({dateKey, titleKey}: SearchDateFilterBaseProps) {
             testID={SearchDateFilterBase.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
-            includeSafeAreaPaddingBottom
             shouldEnableMaxHeight
         >
             <HeaderWithBackButton

src/components/TextPicker/TextSelectorModal.tsx

@@ -80,7 +80,6 @@
         >
             <ScreenWrapper
                 includePaddingTop
-                includeSafeAreaPaddingBottom
                 testID={TextSelectorModal.displayName}
                 shouldEnableMaxHeight
             >
@@ -92,7 +91,7 @@
                     formID={ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM}
                     onSubmit={(data) => {
                         Keyboard.dismiss();
                         onValueSelected?.(data[rest.inputID ?? ''] ?? '');
                     }}
                     submitButtonText={translate('common.save')}
                     style={[styles.mh5, styles.flex1]}

src/components/TimeModalPicker.tsx

@@ -59,7 +59,6 @@ function TimeModalPicker({value, errorText, label, onInputChange = () => {}}: Ti
                 <ScreenWrapper
                     style={styles.pb0}
                     includePaddingTop={false}
-                    includeSafeAreaPaddingBottom
                     testID={TimeModalPicker.displayName}
                 >
                     <HeaderWithBackButton

src/components/ValidateCodeActionModal/index.tsx

@@ -72,7 +72,6 @@ function ValidateCodeActionModal({
             shouldUseModalPaddingStyle={false}
         >
             <ScreenWrapper
-                includeSafeAreaPaddingBottom
                 includePaddingTop
                 shouldEnableMaxHeight
                 testID={ValidateCodeActionModal.displayName}

src/components/ValuePicker/ValueSelectorModal.tsx

@@ -39,7 +39,6 @@ function ValueSelectorModal({
             <ScreenWrapper
                 style={styles.pb0}
                 includePaddingTop={false}
-                includeSafeAreaPaddingBottom
                 testID={ValueSelectorModal.displayName}
                 shouldEnableKeyboardAvoidingView={shouldEnableKeyboardAvoidingView}
             >

src/hooks/useStyledSafeAreaInsets.ts

@@ -34,27 +34,29 @@ import useStyleUtils from './useStyleUtils';
 function useStyledSafeAreaInsets() {
     const StyleUtils = useStyleUtils();
     const insets = useSafeAreaInsets();
-    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
+    const {paddingTop: platformPaddingTop, paddingBottom: platformPaddingBottom} = StyleUtils.getPlatformSafeAreaPadding(insets);
 
     const screenWrapperStatusContext = useContext(ScreenWrapperStatusContext);
-    const isSafeAreaTopPaddingApplied = screenWrapperStatusContext?.isSafeAreaTopPaddingApplied ?? false;
-    const isSafeAreaBottomPaddingApplied = screenWrapperStatusContext?.isSafeAreaBottomPaddingApplied ?? false;
+    const isTopAlreadyApplied = screenWrapperStatusContext?.isSafeAreaTopPaddingApplied ?? false;
+    const isBottomAlreadyApplied = screenWrapperStatusContext?.isSafeAreaBottomPaddingApplied ?? false;
 
     const adaptedInsets = {
         ...insets,
-        top: isSafeAreaTopPaddingApplied ? 0 : insets?.top,
-        bottom: isSafeAreaBottomPaddingApplied ? 0 : insets?.bottom,
+        top: isTopAlreadyApplied ? 0 : insets?.top,
+        bottom: isBottomAlreadyApplied ? 0 : insets?.bottom,
     };
-    const adaptedPaddingBottom = isSafeAreaBottomPaddingApplied ? 0 : paddingBottom;
 
-    const safeAreaPaddingBottomStyle = useMemo(() => ({paddingBottom: adaptedPaddingBottom}), [adaptedPaddingBottom]);
+    const paddingTop = isTopAlreadyApplied ? 0 : platformPaddingTop;
+    const paddingBottom = isBottomAlreadyApplied ? 0 : platformPaddingBottom;
+
+    const safeAreaPaddingBottomStyle = useMemo(() => ({paddingBottom}), [paddingBottom]);
 
     return {
-        paddingTop: isSafeAreaTopPaddingApplied ? 0 : paddingTop,
-        paddingBottom: adaptedPaddingBottom,
+        paddingTop,
+        paddingBottom,
         unmodifiedPaddings: {
-            top: paddingTop,
-            bottom: paddingBottom,
+            top: platformPaddingTop,
+            bottom: platformPaddingBottom,
         },
         insets: adaptedInsets,
         safeAreaPaddingBottomStyle,

src/pages/AddressPage.tsx

@@ -81,10 +81,7 @@ function AddressPage({title, address, updateAddress, isLoadingApp = true, backTo
     }, []);
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom
-            testID={AddressPage.displayName}
-        >
+        <ScreenWrapper testID={AddressPage.displayName}>
             <DelegateNoAccessWrapper accessDeniedVariants={[CONST.DELEGATE.DENIED_ACCESS_VARIANTS.DELEGATE]}>
                 <HeaderWithBackButton
                     title={title}

src/pages/EditReportFieldPage.tsx

@@ -94,7 +94,6 @@ function EditReportFieldPage({route}: EditReportFieldPageProps) {
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom
             shouldEnableMaxHeight
             testID={EditReportFieldPage.displayName}
         >

src/pages/EnablePayments/EnablePaymentsPage.tsx

@@ -54,7 +54,6 @@ function EnablePaymentsPage({userWallet}: EnablePaymentsPageProps) {
     return (
         <ScreenWrapper
             shouldShowOfflineIndicator={userWallet?.currentStep !== CONST.WALLET.STEP.ONFIDO}
-            includeSafeAreaPaddingBottom
             testID={EnablePaymentsPage.displayName}
         >
             {() => {

src/pages/ErrorPage/UpdateRequiredView.tsx

@@ -25,7 +25,7 @@ function UpdateRequiredView() {
     const isStandaloneNewAppProduction = isProduction && !NativeModules.HybridAppModule;
 
     return (
-        <View style={[styles.appBG, styles.h100, StyleUtils.getSafeAreaPadding(insets)]}>
+        <View style={[styles.appBG, styles.h100, StyleUtils.getPlatformSafeAreaPadding(insets)]}>
             <HeaderGap />
             <View style={[styles.pt5, styles.ph5, styles.updateRequiredViewHeader]}>
                 <Header title={translate('updateRequiredView.updateRequired')} />

src/pages/GroupChatNameEditPage.tsx

@@ -73,7 +73,6 @@ function GroupChatNameEditPage({report}: GroupChatNameEditPageProps) {
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom
             style={[styles.defaultModalContainer]}
             testID={GroupChatNameEditPage.displayName}
             shouldEnableMaxHeight

src/pages/NewChatPage.tsx

@@ -329,7 +329,6 @@ function NewChatPage() {
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
-            includeSafeAreaPaddingBottom
             shouldShowOfflineIndicator={false}
             includePaddingTop={false}
             shouldEnablePickerAvoiding={false}

src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx

@@ -148,7 +148,6 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
         <ScreenWrapper
             shouldEnableMaxHeight
             shouldShowOfflineIndicator={false}
-            includeSafeAreaPaddingBottom
             testID="BaseOnboardingPersonalDetails"
             style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
         >

src/pages/PrivateNotes/PrivateNotesEditPage.tsx

@@ -105,7 +105,6 @@ function PrivateNotesEditPage({route, report, accountID}: PrivateNotesEditPagePr
     return (
         <ScreenWrapper
             shouldEnableMaxHeight
-            includeSafeAreaPaddingBottom
             testID={PrivateNotesEditPage.displayName}
         >
             <HeaderWithBackButton

src/pages/RestrictedAction/Workspace/WorkspaceAdminRestrictedAction.tsx

@@ -31,10 +31,7 @@ function WorkspaceAdminRestrictedAction({policyID}: WorkspaceAdminRestrictedActi
     }, [policyID]);
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom
-            testID={WorkspaceAdminRestrictedAction.displayName}
-        >
+        <ScreenWrapper testID={WorkspaceAdminRestrictedAction.displayName}>
             <HeaderWithBackButton
                 title={translate('workspace.restrictedAction.restricted')}
                 onBackButtonPress={Navigation.goBack}

src/pages/RestrictedAction/Workspace/WorkspaceOwnerRestrictedAction.tsx

@@ -25,10 +25,7 @@ function WorkspaceOwnerRestrictedAction() {
     };
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom
-            testID={WorkspaceOwnerRestrictedAction.displayName}
-        >
+        <ScreenWrapper testID={WorkspaceOwnerRestrictedAction.displayName}>
             <HeaderWithBackButton
                 title={translate('workspace.restrictedAction.restricted')}
                 onBackButtonPress={Navigation.goBack}

src/pages/RestrictedAction/Workspace/WorkspaceUserRestrictedAction.tsx

@@ -31,10 +31,7 @@ function WorkspaceUserRestrictedAction({policyID}: WorkspaceUserRestrictedAction
     }, [policyID]);
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom
-            testID={WorkspaceUserRestrictedAction.displayName}
-        >
+        <ScreenWrapper testID={WorkspaceUserRestrictedAction.displayName}>
             <HeaderWithBackButton
                 title={translate('workspace.restrictedAction.restricted')}
                 onBackButtonPress={Navigation.goBack}

src/pages/RoomDescriptionPage.tsx

@@ -80,7 +80,6 @@ function RoomDescriptionPage({report, policies}: RoomDescriptionPageProps) {
     return (
         <ScreenWrapper
             shouldEnableMaxHeight
-            includeSafeAreaPaddingBottom
             testID={RoomDescriptionPage.displayName}
         >
             <HeaderWithBackButton

src/pages/RoomInvitePage.tsx

@@ -247,7 +247,6 @@ function RoomInvitePage({
         <ScreenWrapper
             shouldEnableMaxHeight
             testID={RoomInvitePage.displayName}
-            includeSafeAreaPaddingBottom
         >
             <FullPageNotFoundView
                 shouldShow={isEmptyObject(report)}

src/pages/Search/SavedSearchRenamePage.tsx

@@ -50,7 +50,6 @@ function SavedSearchRenamePage({route}: {route: {params: {q: string; name: strin
             testID={SavedSearchRenamePage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
-            includeSafeAreaPaddingBottom
         >
             <HeaderWithBackButton title={translate('common.rename')} />
             <FormProvider

src/pages/Search/SearchAdvancedFiltersPage.tsx

@@ -27,7 +27,6 @@ function SearchAdvancedFiltersPage() {
             testID={SearchAdvancedFiltersPage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
-            includeSafeAreaPaddingBottom
         >
             <HeaderWithBackButton title={translate('search.filtersHeader')}>
                 {shouldShowResetFilters && <TextLink onPress={SearchActions.clearAdvancedFilters}>{translate('search.resetFilters')}</TextLink>}

src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersAmountPage.tsx

@@ -43,7 +43,6 @@ function SearchFiltersAmountPage() {
             testID={SearchFiltersAmountPage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
-            includeSafeAreaPaddingBottom
             shouldEnableMaxHeight
         >
             <HeaderWithBackButton

src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCurrencyPage.tsx

@@ -45,7 +45,6 @@ function SearchFiltersCurrencyPage() {
             testID={SearchFiltersCurrencyPage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
-            includeSafeAreaPaddingBottom
             shouldEnableMaxHeight
         >
             <HeaderWithBackButton