fix: extract Android specific safe area logic and simplify safe area …

…components/hooks

src/components/SafeAreaConsumer/index.tsx

@@ -13,12 +13,14 @@ function SafeAreaConsumer({children}: SafeAreaConsumerProps) {
 
     return (
         <SafeAreaInsetsContext.Consumer>
-            {(insets) => {
-                const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined);
+            {(safeAreaInsets) => {
+                const insets = StyleUtils.getSafeAreaInsets(safeAreaInsets);
+                const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
+
                 return children({
                     paddingTop,
                     paddingBottom,
-                    insets: insets ?? undefined,
+                    insets,
                     safeAreaPaddingBottomStyle: {paddingBottom},
                 });
             }}

src/hooks/useStyledSafeAreaInsets.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line no-restricted-imports
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import useSafeAreaInsets from './useSafeAreaInsets';
 import useStyleUtils from './useStyleUtils';
 
 /**

src/styles/utils/getSafeAreaInsets/defaultInsets.ts

@@ -0,0 +1,3 @@
+const defaultInsets = {top: 0, bottom: 0, left: 0, right: 0};
+
+export default defaultInsets;

src/styles/utils/getSafeAreaInsets/index.android.ts

@@ -0,0 +1,18 @@
+import type {EdgeInsets} from 'react-native-safe-area-context';
+import StatusBar from '@libs/StatusBar';
+import defaultInsets from './defaultInsets';
+
+/**
+ * On Android we want to use the StatusBar height rather than the top safe area inset.
+ * @returns
+ */
+function getSafeAreaInsets(safeAreaInsets: EdgeInsets | null): EdgeInsets {
+    const insets = safeAreaInsets ?? defaultInsets;
+
+    return {
+        ...insets,
+        top: StatusBar.currentHeight ?? insets.top,
+    };
+}
+
+export default getSafeAreaInsets;

src/styles/utils/getSafeAreaInsets/index.ts

@@ -0,0 +1,13 @@
+import type {EdgeInsets} from 'react-native-safe-area-context';
+import defaultInsets from './defaultInsets';
+
+/**
+ * Noop on web and iOS. This utility function is only needed on Android.
+ * @returns
+ */
+function getSafeAreaInsets(safeAreaInsets: EdgeInsets | null): EdgeInsets {
+    const insets = safeAreaInsets ?? defaultInsets;
+    return insets;
+}
+
+export default getSafeAreaInsets;

src/styles/utils/index.ts

@@ -25,6 +25,7 @@ import createTooltipStyleUtils from './generators/TooltipStyleUtils';
 import getContextMenuItemStyles from './getContextMenuItemStyles';
 import getHighResolutionInfoWrapperStyle from './getHighResolutionInfoWrapperStyle';
 import getNavigationModalCardStyle from './getNavigationModalCardStyles';
+import getSafeAreaInsets from './getSafeAreaInsets';
 import getSignInBgStyles from './getSignInBgStyles';
 import {compactContentContainerStyles} from './optionRowStyles';
 import positioning from './positioning';
@@ -1205,6 +1206,7 @@ const staticStyleUtils = {
     getModalPaddingStyles,
     getOuterModalStyle,
     getPaymentMethodMenuWidth,
+    getSafeAreaInsets,
     getSafeAreaMargins,
     getSafeAreaPadding,
     getSignInWordmarkWidthStyle,

src/styles/variables.ts

@@ -93,7 +93,7 @@ export default {
     mobileResponsiveWidthBreakpoint: 800,
     tabletResponsiveWidthBreakpoint: 1024,
     iosSafeAreaInsetsPercentage: 0.7,
-    androidSafeAreaInsetsPercentage: 1.3,
+    androidSafeAreaInsetsPercentage: 1.2,
     sideBarWidth: 375,
     pdfPageMaxWidth: 992,
     tooltipzIndex: 10050,