Merge pull request #53223 from margelo/@chrispader/fix-53161

[CP Staging] Fix: Android edge-to-edge related inset/padding issues (cherry picked from commit 6430cd7) (CP triggered by mountiny)
Expensify · Nov 28, 2024 · 0dbb67e · 0dbb67e
1 parent 900bfb1
commit 0dbb67e
Show file tree

Hide file tree

Showing 21 changed files with 102 additions and 77 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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 → src/hooks/useSafeAreaInsets.ts b/src/hooks/useSafeAreaInsets/index.android.ts → 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const defaultInsets = {top: 0, bottom: 0, left: 0, right: 0};

		export default defaultInsets;