feat: bottom safe area inset handling based on NavigationBar type (gesture vs. soft keys)

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/AddPaymentCard/PaymentCardCurrencyModal.tsx

@@ -62,7 +62,6 @@ function PaymentCardCurrencyModal({isVisible, currencies, currentCurrency = CONS
             <ScreenWrapper
                 style={styles.pb0}
                 includePaddingTop={false}
-                includeSafeAreaPaddingBottom={false}
                 testID={PaymentCardCurrencyModal.displayName}
             >
                 <HeaderWithBackButton

src/components/AmountPicker/AmountSelectorModal.tsx

@@ -52,7 +52,6 @@ function AmountSelectorModal({value, description = '', onValueSelected, isVisibl
         >
             <ScreenWrapper
                 includePaddingTop={false}
-                includeSafeAreaPaddingBottom={false}
                 testID={AmountSelectorModal.displayName}
                 shouldEnableMaxHeight
                 style={[styles.pb0]}

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/AvatarCropModal/AvatarCropModal.tsx

@@ -354,7 +354,6 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
             <ScreenWrapper
                 style={[styles.pb0]}
                 includePaddingTop={false}
-                includeSafeAreaPaddingBottom={false}
                 testID={AvatarCropModal.displayName}
             >
                 {shouldUseNarrowLayout && <HeaderGap />}

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/CountryPicker/CountrySelectorModal.tsx

@@ -70,7 +70,6 @@ function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onC
             <ScreenWrapper
                 style={[styles.pb0]}
                 includePaddingTop={false}
-                includeSafeAreaPaddingBottom={false}
                 testID={CountrySelectorModal.displayName}
             >
                 <HeaderWithBackButton

src/components/CurrencyPicker.tsx

@@ -78,7 +78,6 @@ function CurrencyPicker({label, value, errorText, headerContent, excludeCurrenci
                 <ScreenWrapper
                     style={[styles.pb0]}
                     includePaddingTop={false}
-                    includeSafeAreaPaddingBottom
                     testID={CurrencyPicker.displayName}
                 >
                     <HeaderWithBackButton

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/HeaderPageLayout.tsx

@@ -80,7 +80,6 @@ function HeaderPageLayout({
         <ScreenWrapper
             style={[StyleUtils.getBackgroundColorStyle(backgroundColor ?? theme.appBG)]}
             shouldEnablePickerAvoiding={false}
-            includeSafeAreaPaddingBottom={false}
             offlineIndicatorStyle={[appBGColor]}
             testID={testID}
             shouldShowOfflineIndicatorInWideScreen={shouldShowOfflineIndicatorInWideScreen}

src/components/ImportSpreadsheet.tsx

@@ -160,7 +160,6 @@ function ImportSpreadsheet({backTo, goTo}: ImportSpreedsheetProps) {
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             testID={ImportSpreadsheet.displayName}
             shouldEnableMaxHeight={DeviceCapabilities.canUseTouchScreen()}

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

@@ -77,7 +77,7 @@ function PopoverWithoutOverlay(
         paddingBottom: safeAreaPaddingBottom,
         paddingLeft: safeAreaPaddingLeft,
         paddingRight: safeAreaPaddingRight,
-    } = useMemo(() => StyleUtils.getSafeAreaPadding(insets), [StyleUtils, insets]);
+    } = useMemo(() => StyleUtils.getPlatformSafeAreaPadding(insets), [StyleUtils, insets]);
 
     const modalPaddingStyles = useMemo(
         () =>

src/components/PushRowWithModal/PushRowModal.tsx

@@ -81,7 +81,6 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
         >
             <ScreenWrapper
                 includePaddingTop={false}
-                includeSafeAreaPaddingBottom={false}
                 testID={PushRowModal.displayName}
             >
                 <HeaderWithBackButton

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/StatePicker/StateSelectorModal.tsx

@@ -74,7 +74,6 @@ function StateSelectorModal({isVisible, currentState, onStateSelected, onClose,
             <ScreenWrapper
                 style={[styles.pb0]}
                 includePaddingTop={false}
-                includeSafeAreaPaddingBottom={false}
                 testID={StateSelectorModal.displayName}
             >
                 <HeaderWithBackButton

src/components/TextPicker/TextSelectorModal.tsx

@@ -80,7 +80,6 @@ function TextSelectorModal({value, description = '', subtitle, onValueSelected,
         >
             <ScreenWrapper
                 includePaddingTop
-                includeSafeAreaPaddingBottom
                 testID={TextSelectorModal.displayName}
                 shouldEnableMaxHeight
             >

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/libs/PolicyUtils.ts

@@ -1133,11 +1133,11 @@ function getCurrentTaxID(policy: OnyxEntry<Policy>, taxID: string): string | und
     return Object.keys(policy?.taxRates?.taxes ?? {}).find((taxIDKey) => policy?.taxRates?.taxes?.[taxIDKey].previousTaxCode === taxID || taxIDKey === taxID);
 }
 
-function getWorkspaceAccountID(policyID?: string) {
+function getWorkspaceAccountID(policyID: string | undefined) {
     const policy = getPolicy(policyID);
 
     if (!policy) {
-        return 0;
+        return CONST.DEFAULT_NUMBER_ID;
     }
     return policy.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID;
 }

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/Debug/Report/DebugReportPage.tsx

@@ -211,7 +211,6 @@ function DebugReportPage({
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             shouldEnableMinHeight={DeviceCapabilities.canUseTouchScreen()}
             testID={DebugReportPage.displayName}

src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx

@@ -76,7 +76,6 @@ function DebugReportActionCreatePage({
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             shouldEnableMinHeight={DeviceCapabilities.canUseTouchScreen()}
             testID={DebugReportActionCreatePage.displayName}

src/pages/Debug/ReportAction/DebugReportActionPage.tsx

@@ -86,7 +86,6 @@ function DebugReportActionPage({
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             shouldEnableMinHeight={DeviceCapabilities.canUseTouchScreen()}
             testID={DebugReportActionPage.displayName}

src/pages/Debug/Transaction/DebugTransactionPage.tsx

@@ -92,7 +92,6 @@ function DebugTransactionPage({
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             shouldEnableMinHeight={DeviceCapabilities.canUseTouchScreen()}
             testID={DebugTransactionPage.displayName}

src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx

@@ -93,7 +93,6 @@ function DebugTransactionViolationCreatePage({
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             shouldEnableMinHeight={DeviceCapabilities.canUseTouchScreen()}
             testID={DebugTransactionViolationCreatePage.displayName}

src/pages/Debug/TransactionViolation/DebugTransactionViolationPage.tsx

@@ -82,7 +82,6 @@ function DebugTransactionViolationPage({
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             shouldEnableMinHeight={DeviceCapabilities.canUseTouchScreen()}
             testID={DebugTransactionViolationPage.displayName}