Merge pull request Expensify#66236 from Krishna2323/krishna2323/issue/65089

fix: App download banner overlaps the choose file button

Author: roryabraham

src/components/DownloadAppBanner.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import type {LayoutChangeEvent} from 'react-native';
 import useHasLoggedIntoMobileApp from '@hooks/useHasLoggedIntoMobileApp';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -9,7 +10,11 @@ import ROUTES from '@src/ROUTES';
 import Button from './Button';
 import {ExpensifyMobileApp} from './Icon/Illustrations';
 
-function DownloadAppBanner() {
+type DownloadAppBannerProps = {
+    onLayout?: (e: LayoutChangeEvent) => void;
+};
+
+function DownloadAppBanner({onLayout}: DownloadAppBannerProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {hasLoggedIntoMobileApp, isLastMobileAppLoginLoaded} = useHasLoggedIntoMobileApp();
@@ -19,7 +24,10 @@ function DownloadAppBanner() {
     }
 
     return (
-        <View style={[styles.ph2, styles.mb2, styles.stickToBottom]}>
+        <View
+            style={[styles.ph2, styles.mb2, styles.stickToBottom, styles.pt2]}
+            onLayout={onLayout}
+        >
             <BillingBanner
                 icon={ExpensifyMobileApp}
                 title={translate('common.getTheApp')}

src/pages/iou/request/step/IOURequestStepScan/index.tsx

@@ -965,8 +965,19 @@ function IOURequestStepScan({
         </>
     );
 
+    const [containerHeight, setContainerHeight] = useState(0);
+    const [desktopUploadViewHeight, setDesktopUploadViewHeight] = useState(0);
+    const [downloadAppBannerHeight, setDownloadAppBannerHeight] = useState(0);
+    /*  We use isMobile() here to explicitly hide DownloadAppBanner component on both mobile web and native apps */
+    const shouldHideDownloadAppBanner = isMobile() || downloadAppBannerHeight + desktopUploadViewHeight + styles.uploadFileView(isSmallScreenWidth).paddingVertical * 2 > containerHeight;
+
     const desktopUploadView = () => (
-        <>
+        <View
+            style={[styles.alignItemsCenter, styles.justifyContentCenter]}
+            onLayout={(e) => {
+                setDesktopUploadViewHeight(e.nativeEvent.layout.height);
+            }}
+        >
             {PDFValidationComponent}
             <ReceiptUpload
                 width={CONST.RECEIPT.ICON_SIZE}
@@ -1005,7 +1016,7 @@ function IOURequestStepScan({
                     />
                 )}
             </AttachmentPicker>
-        </>
+        </View>
     );
 
     return (
@@ -1017,7 +1028,8 @@ function IOURequestStepScan({
         >
             {(isDraggingOverWrapper) => (
                 <View
-                    onLayout={() => {
+                    onLayout={(event) => {
+                        setContainerHeight(event.nativeEvent.layout.height);
                         if (!onLayout) {
                             return;
                         }
@@ -1037,8 +1049,7 @@ function IOURequestStepScan({
                             dropInnerWrapperStyles={styles.receiptDropInnerWrapper(true)}
                         />
                     </DragAndDropConsumer>
-                    {/*  We use isMobile() here to explicitly hide DownloadAppBanner component on both mobile web and native apps */}
-                    {!isMobile() && <DownloadAppBanner />}
+                    {!shouldHideDownloadAppBanner && <DownloadAppBanner onLayout={(e) => setDownloadAppBannerHeight(e.nativeEvent.layout.height)} />}
                     {ErrorModal}
                     {startLocationPermissionFlow && !!receiptFiles.length && (
                         <LocationPermissionModal