From 0dbb67ebebf82a2e9c21c5cc1485057a055b3cf6 Mon Sep 17 00:00:00 2001
From: Vit Horacek <36083550+mountiny@users.noreply.github.com>
Date: Thu, 28 Nov 2024 12:03:04 +0100
Subject: [PATCH] Merge pull request #53223 from margelo/@chrispader/fix-53161

[CP Staging] Fix: Android edge-to-edge related inset/padding issues

(cherry picked from commit 6430cd7df57910d2e929c5b1d413cd2435a9bf2f)

(CP triggered by mountiny)
---
 .../AttachmentViewVideo/index.tsx             |  2 +-
 .../SafeAreaConsumer/index.android.tsx        | 43 -------------------
 src/components/SafeAreaConsumer/index.tsx     |  8 ++--
 .../SelectionList/BaseSelectionList.tsx       |  3 +-
 src/components/SelectionList/types.ts         |  3 ++
 .../index.android.ts => useSafeAreaInsets.ts} |  9 ++--
 src/hooks/useSafeAreaInsets/index.ts          |  4 --
 src/hooks/useStyledSafeAreaInsets.ts          |  9 ++--
 src/pages/NewChatConfirmPage.tsx              |  5 ++-
 src/pages/NewChatPage.tsx                     | 22 ++++++++--
 .../BaseOnboardingPersonalDetails.tsx         |  4 +-
 .../step/IOURequestStepConfirmation.tsx       |  2 +-
 .../step/IOURequestStepDescription.tsx        |  1 +
 .../request/step/IOURequestStepDistance.tsx   |  2 +-
 .../request/step/IOURequestStepMerchant.tsx   |  2 +-
 src/pages/workspace/WorkspaceNewRoomPage.tsx  |  2 +-
 .../utils/getSafeAreaInsets/defaultInsets.ts  |  3 ++
 .../utils/getSafeAreaInsets/index.android.ts  | 18 ++++++++
 src/styles/utils/getSafeAreaInsets/index.ts   | 13 ++++++
 src/styles/utils/index.ts                     | 21 ++++++++-
 src/styles/variables.ts                       |  3 +-
 21 files changed, 102 insertions(+), 77 deletions(-)
 delete mode 100644 src/components/SafeAreaConsumer/index.android.tsx
 rename src/hooks/{useSafeAreaInsets/index.android.ts => useSafeAreaInsets.ts} (65%)
 delete mode 100644 src/hooks/useSafeAreaInsets/index.ts
 create mode 100644 src/styles/utils/getSafeAreaInsets/defaultInsets.ts
 create mode 100644 src/styles/utils/getSafeAreaInsets/index.android.ts
 create mode 100644 src/styles/utils/getSafeAreaInsets/index.ts

diff --git a/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx b/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx
index 4db93266fe0a..e42c1e3e2fb8 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx
+++ b/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx
@@ -21,7 +21,7 @@ function AttachmentViewVideo({source, isHovered = false, shouldUseSharedVideoEle
             shouldUseSharedVideoElement={shouldUseSharedVideoElement && !shouldUseNarrowLayout}
             isVideoHovered={isHovered}
             videoDuration={duration}
-            style={[styles.w100, styles.h100]}
+            style={[styles.w100, styles.h100, styles.pb5]}
         />
     );
 }
diff --git a/src/components/SafeAreaConsumer/index.android.tsx b/src/components/SafeAreaConsumer/index.android.tsx
deleted file mode 100644
index 7cecfb5d5107..000000000000
--- a/src/components/SafeAreaConsumer/index.android.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
-import useStyleUtils from '@hooks/useStyleUtils';
-import StatusBar from '@libs/StatusBar';
-import type SafeAreaConsumerProps from './types';
-
-const defaultInsets = {top: 0, bottom: 0, left: 0, right: 0};
-
-/**
- * This component is a light wrapper around the SafeAreaInsetsContext.Consumer. There are several places where we
- * may need not just the insets, but the computed styles so we save a few lines of code with this.
- */
-function SafeAreaConsumer({children}: SafeAreaConsumerProps) {
-    const StyleUtils = useStyleUtils();
-
-    return (
-        <SafeAreaInsetsContext.Consumer>
-            {(insets) => {
-                const safeInsets = insets ?? defaultInsets;
-
-                const androidInsets = {
-                    ...safeInsets,
-                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    top: StatusBar.currentHeight || safeInsets.top,
-                };
-
-                const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(androidInsets);
-
-                return children({
-                    paddingTop,
-                    paddingBottom,
-                    insets: androidInsets,
-                    safeAreaPaddingBottomStyle: {paddingBottom},
-                });
-            }}
-        </SafeAreaInsetsContext.Consumer>
-    );
-}
-
-SafeAreaConsumer.displayName = 'SafeAreaConsumer';
-
-export default SafeAreaConsumer;
diff --git a/src/components/SafeAreaConsumer/index.tsx b/src/components/SafeAreaConsumer/index.tsx
index 926ff91258f9..88770e1f0639 100644
--- a/src/components/SafeAreaConsumer/index.tsx
+++ b/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},
                 });
             }}
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index 0e12e993cc79..100a04edbb25 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -87,6 +87,7 @@ function BaseSelectionList<TItem extends ListItem>(
         alternateTextNumberOfLines = 2,
         textInputRef,
         headerMessageStyle,
+        confirmButtonStyles,
         shouldHideListOnInitialRender = true,
         textInputIconLeft,
         sectionTitleStyles,
@@ -834,7 +835,7 @@ function BaseSelectionList<TItem extends ListItem>(
                             <Button
                                 success
                                 large
-                                style={[styles.w100]}
+                                style={[styles.w100, confirmButtonStyles]}
                                 text={confirmButtonText || translate('common.confirm')}
                                 onPress={onConfirm}
                                 pressOnEnter
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index edf6ee955ecc..68349cd12168 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -461,6 +461,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Styles to apply to the header message */
     headerMessageStyle?: StyleProp<ViewStyle>;
 
+    /** Styles to apply to submit button */
+    confirmButtonStyles?: StyleProp<ViewStyle>;
+
     /** Text to display on the confirm button */
     confirmButtonText?: string;
 
diff --git a/src/hooks/useSafeAreaInsets/index.android.ts b/src/hooks/useSafeAreaInsets.ts
similarity index 65%
rename from src/hooks/useSafeAreaInsets/index.android.ts
rename to src/hooks/useSafeAreaInsets.ts
index 66500dd37887..4d2dabd26841 100644
--- a/src/hooks/useSafeAreaInsets/index.android.ts
+++ b/src/hooks/useSafeAreaInsets.ts
@@ -1,15 +1,14 @@
 import type {EdgeInsets} from 'react-native-safe-area-context';
 // eslint-disable-next-line no-restricted-imports
 import {useSafeAreaInsets as useSafeAreaInsetsInternal} from 'react-native-safe-area-context';
-import StatusBar from '@libs/StatusBar';
+import useStyleUtils from './useStyleUtils';
 
 function useSafeAreaInsets(): EdgeInsets {
+    const StyleUtils = useStyleUtils();
     const insets = useSafeAreaInsetsInternal();
+    const adjustedInsets = StyleUtils.getSafeAreaInsets(insets);
 
-    return {
-        ...insets,
-        top: StatusBar.currentHeight ?? insets.top,
-    };
+    return adjustedInsets;
 }
 
 export default useSafeAreaInsets;
diff --git a/src/hooks/useSafeAreaInsets/index.ts b/src/hooks/useSafeAreaInsets/index.ts
deleted file mode 100644
index 6cc2f1818fe5..000000000000
--- a/src/hooks/useSafeAreaInsets/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/* eslint-disable no-restricted-imports */
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-
-export default useSafeAreaInsets;
diff --git a/src/hooks/useStyledSafeAreaInsets.ts b/src/hooks/useStyledSafeAreaInsets.ts
index bfd9c32a46ae..dd90f833d669 100644
--- a/src/hooks/useStyledSafeAreaInsets.ts
+++ b/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';
 
 /**
@@ -21,15 +20,15 @@ import useStyleUtils from './useStyleUtils';
  *     // Use these values to style your component accordingly
  * }
  */
-function useStyledSafeAreaInsets() {
+function useStyledSafeAreaInsets(safeAreaInsetsPercentage?: number) {
     const StyleUtils = useStyleUtils();
     const insets = useSafeAreaInsets();
 
-    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined);
+    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets, safeAreaInsetsPercentage);
     return {
         paddingTop,
         paddingBottom,
-        insets: insets ?? undefined,
+        insets,
         safeAreaPaddingBottomStyle: {paddingBottom},
     };
 }
diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx
index 85e33cf0c598..e8f074ba680a 100644
--- a/src/pages/NewChatConfirmPage.tsx
+++ b/src/pages/NewChatConfirmPage.tsx
@@ -132,7 +132,10 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP
     }, []);
 
     return (
-        <ScreenWrapper testID={NewChatConfirmPage.displayName}>
+        <ScreenWrapper
+            testID={NewChatConfirmPage.displayName}
+            includeSafeAreaPaddingBottom={false}
+        >
             <HeaderWithBackButton
                 title={translate('common.group')}
                 onBackButtonPress={navigateBack}
diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx
index 8ab5e209a904..2f158ccfb8ac 100755
--- a/src/pages/NewChatPage.tsx
+++ b/src/pages/NewChatPage.tsx
@@ -131,7 +131,7 @@ function NewChatPage() {
     const {isSmallScreenWidth} = useResponsiveLayout();
     const styles = useThemeStyles();
     const personalData = useCurrentUserPersonalDetails();
-    const {insets} = useStyledSafeAreaInsets();
+    const {insets, safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets();
     const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
     const selectionListRef = useRef<SelectionListHandle>(null);
 
@@ -252,14 +252,27 @@ function NewChatPage() {
             return (
                 <Button
                     onPress={() => toggleOption(item)}
-                    style={[styles.pl2]}
+                    style={[styles.pl2, insets.bottom ? styles.mb5 : undefined]}
                     text={translate('newChatPage.addToGroup')}
                     innerStyles={buttonInnerStyles}
                     small
                 />
             );
         },
-        [selectedOptions, setSelectedOptions, styles, translate],
+        [
+            insets.bottom,
+            selectedOptions,
+            setSelectedOptions,
+            styles.alignItemsCenter,
+            styles.buttonDefaultHovered,
+            styles.flexRow,
+            styles.mb5,
+            styles.ml0,
+            styles.ml5,
+            styles.optionSelectCircle,
+            styles.pl2,
+            translate,
+        ],
     );
 
     const createGroup = useCallback(() => {
@@ -297,7 +310,7 @@ function NewChatPage() {
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
-            includeSafeAreaPaddingBottom={isOffline}
+            includeSafeAreaPaddingBottom={false}
             shouldShowOfflineIndicator={false}
             includePaddingTop={false}
             shouldEnablePickerAvoiding={false}
@@ -331,6 +344,7 @@ function NewChatPage() {
                     isLoadingNewOptions={!!isSearchingForReports}
                     initiallyFocusedOptionKey={firstKeyForList}
                     shouldTextInputInterceptSwipe
+                    confirmButtonStyles={insets.bottom ? [safeAreaPaddingBottomStyle, styles.mb5] : undefined}
                 />
                 {isSmallScreenWidth && (
                     <>
diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx
index 54b485bd54dd..ed102fa60786 100644
--- a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx
+++ b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx
@@ -13,7 +13,6 @@ import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalD
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
 import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -41,7 +40,6 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
     const {onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const {inputCallbackRef} = useAutoFocusInput();
     const [shouldValidateOnChange, setShouldValidateOnChange] = useState(false);
-    const {isOffline} = useNetwork();
     const {canUseDefaultRooms} = usePermissions();
     const {activeWorkspaceID} = useActiveWorkspace();
 
@@ -114,7 +112,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
         <ScreenWrapper
             shouldEnableMaxHeight
             shouldShowOfflineIndicator={false}
-            includeSafeAreaPaddingBottom={isOffline}
+            includeSafeAreaPaddingBottom={false}
             testID="BaseOnboardingPersonalDetails"
             style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
         >
diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx
index 7246e0bdb2b5..683fa4d2c14e 100644
--- a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx
+++ b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx
@@ -606,7 +606,7 @@ function IOURequestStepConfirmation({
             shouldEnableMaxHeight={DeviceCapabilities.canUseTouchScreen()}
             testID={IOURequestStepConfirmation.displayName}
         >
-            <View style={[styles.flex1, styles.mb6]}>
+            <View style={styles.flex1}>
                 <HeaderWithBackButton
                     title={headerTitle}
                     onBackButtonPress={navigateBack}
diff --git a/src/pages/iou/request/step/IOURequestStepDescription.tsx b/src/pages/iou/request/step/IOURequestStepDescription.tsx
index 758770698d06..7002dd2b3110 100644
--- a/src/pages/iou/request/step/IOURequestStepDescription.tsx
+++ b/src/pages/iou/request/step/IOURequestStepDescription.tsx
@@ -158,6 +158,7 @@ function IOURequestStepDescription({
             shouldShowWrapper
             testID={IOURequestStepDescription.displayName}
             shouldShowNotFoundPage={shouldShowNotFoundPage}
+            includeSafeAreaPaddingBottom={false}
         >
             <FormProvider
                 style={[styles.flexGrow1, styles.ph5]}
diff --git a/src/pages/iou/request/step/IOURequestStepDistance.tsx b/src/pages/iou/request/step/IOURequestStepDistance.tsx
index ae3ecff9adb2..efe5d293036b 100644
--- a/src/pages/iou/request/step/IOURequestStepDistance.tsx
+++ b/src/pages/iou/request/step/IOURequestStepDistance.tsx
@@ -543,7 +543,7 @@ function IOURequestStepDistance({
                         allowBubble
                         pressOnEnter
                         large
-                        style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
+                        style={[styles.w100, styles.mb5, styles.ph4, styles.flexShrink0]}
                         onPress={submitWaypoints}
                         text={buttonText}
                         isLoading={!isOffline && (isLoadingRoute || shouldFetchRoute || isLoading)}
diff --git a/src/pages/iou/request/step/IOURequestStepMerchant.tsx b/src/pages/iou/request/step/IOURequestStepMerchant.tsx
index a47e4d19be57..8f3b8801367f 100644
--- a/src/pages/iou/request/step/IOURequestStepMerchant.tsx
+++ b/src/pages/iou/request/step/IOURequestStepMerchant.tsx
@@ -113,7 +113,7 @@ function IOURequestStepMerchant({
             onBackButtonPress={navigateBack}
             shouldShowWrapper
             testID={IOURequestStepMerchant.displayName}
-            includeSafeAreaPaddingBottom
+            includeSafeAreaPaddingBottom={false}
         >
             <FormProvider
                 style={[styles.flexGrow1, styles.ph5]}
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx
index fdf6eed51503..28e6fa05eac0 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.tsx
+++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx
@@ -239,7 +239,7 @@ function WorkspaceNewRoomPage() {
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
-            includeSafeAreaPaddingBottom={isOffline}
+            includeSafeAreaPaddingBottom={false}
             shouldShowOfflineIndicator={false}
             includePaddingTop={false}
             shouldEnablePickerAvoiding={false}
diff --git a/src/styles/utils/getSafeAreaInsets/defaultInsets.ts b/src/styles/utils/getSafeAreaInsets/defaultInsets.ts
new file mode 100644
index 000000000000..c3c2f463e44d
--- /dev/null
+++ b/src/styles/utils/getSafeAreaInsets/defaultInsets.ts
@@ -0,0 +1,3 @@
+const defaultInsets = {top: 0, bottom: 0, left: 0, right: 0};
+
+export default defaultInsets;
diff --git a/src/styles/utils/getSafeAreaInsets/index.android.ts b/src/styles/utils/getSafeAreaInsets/index.android.ts
new file mode 100644
index 000000000000..c77ef32f7370
--- /dev/null
+++ b/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;
diff --git a/src/styles/utils/getSafeAreaInsets/index.ts b/src/styles/utils/getSafeAreaInsets/index.ts
new file mode 100644
index 000000000000..8f121f80e2e8
--- /dev/null
+++ b/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;
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index cd3bf67e1c13..88c20abf62cf 100644
--- a/src/styles/utils/index.ts
+++ b/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';
@@ -327,7 +328,22 @@ type SafeAreaPadding = {
 /**
  * Takes safe area insets and returns padding to use for a View
  */
-function getSafeAreaPadding(insets?: EdgeInsets, insetsPercentage: number = getPlatform() === CONST.PLATFORM.IOS ? variables.safeInsertPercentage : 1): SafeAreaPadding {
+function getSafeAreaPadding(insets?: EdgeInsets, insetsPercentageProp?: number): SafeAreaPadding {
+    const platform = getPlatform();
+    let insetsPercentage = insetsPercentageProp;
+    if (insetsPercentage == null) {
+        switch (platform) {
+            case CONST.PLATFORM.IOS:
+                insetsPercentage = variables.iosSafeAreaInsetsPercentage;
+                break;
+            case CONST.PLATFORM.ANDROID:
+                insetsPercentage = variables.androidSafeAreaInsetsPercentage;
+                break;
+            default:
+                insetsPercentage = 1;
+        }
+    }
+
     return {
         paddingTop: insets?.top ?? 0,
         paddingBottom: (insets?.bottom ?? 0) * insetsPercentage,
@@ -340,7 +356,7 @@ function getSafeAreaPadding(insets?: EdgeInsets, insetsPercentage: number = getP
  * Takes safe area insets and returns margin to use for a View
  */
 function getSafeAreaMargins(insets?: EdgeInsets): ViewStyle {
-    return {marginBottom: (insets?.bottom ?? 0) * variables.safeInsertPercentage};
+    return {marginBottom: (insets?.bottom ?? 0) * variables.iosSafeAreaInsetsPercentage};
 }
 
 function getZoomSizingStyle(
@@ -1190,6 +1206,7 @@ const staticStyleUtils = {
     getModalPaddingStyles,
     getOuterModalStyle,
     getPaymentMethodMenuWidth,
+    getSafeAreaInsets,
     getSafeAreaMargins,
     getSafeAreaPadding,
     getSignInWordmarkWidthStyle,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 737060a9d7ad..8b330ce1dd8d 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -92,7 +92,8 @@ export default {
     extraSmallMobileResponsiveHeightBreakpoint: 667,
     mobileResponsiveWidthBreakpoint: 800,
     tabletResponsiveWidthBreakpoint: 1024,
-    safeInsertPercentage: 0.7,
+    iosSafeAreaInsetsPercentage: 0.7,
+    androidSafeAreaInsetsPercentage: 1,
     sideBarWidth: 375,
     pdfPageMaxWidth: 992,
     tooltipzIndex: 10050,