fix: styles for the image

Author: koko57

assets/images/educational-illustration__multi-scan.svg

@@ -5,6 +5,7 @@ import {Image, InteractionManager, View} from 'react-native';
 import type {ImageResizeMode, ImageSourcePropType, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import type {MergeExclusive} from 'type-fest';
+import ImageSVGProps from '@components/ImageSVG/types';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -147,10 +148,10 @@ type FeatureTrainingModalSVGProps = {
     contentFitImage?: ImageContentFit;
 
     /** The width of the image */
-    imageWidth?: number;
+    imageWidth?: ImageSVGProps['width'];
 
     /** The height of the image */
-    imageHeight?: number;
+    imageHeight?: ImageSVGProps['height'];
 };
 
 // This page requires either an icon or a video/animation, but not both
@@ -370,6 +371,7 @@ function FeatureTrainingModal({
                       }
                     : {}),
                 ...modalInnerContainerStyle,
+                padding: 0,
             }}
         >
             <Wrapper

assets/images/multi-scan.svg

@@ -14,7 +14,7 @@ import {useCameraDevice} from 'react-native-vision-camera';
 import type {TupleToUnion} from 'type-fest';
 import TestReceipt from '@assets/images/fake-receipt.png';
 import Hand from '@assets/images/hand.svg';
-import MultiScan from '@assets/images/multi-scan.svg';
+import MultiScan from '@assets/images/educational-illustration__multi-scan.svg';
 import Shutter from '@assets/images/shutter.svg';
 import type {FileObject} from '@components/AttachmentModal';
 import AttachmentPicker from '@components/AttachmentPicker';
@@ -868,7 +868,7 @@ function IOURequestStepScan({
                         title={translate('iou.scanMultipleReceipts')}
                         image={MultiScan}
                         shouldRenderSVG
-                        contentFitImage="contain"
+                        imageHeight={220}
                         modalInnerContainerStyle={styles.pt0}
                         illustrationOuterContainerStyle={styles.multiScanEducationalPopupImage}
                         onConfirm={dismissMultiScanEducationalPopup}

src/components/FeatureTrainingModal.tsx

@@ -10,7 +10,7 @@ import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-nati
 import type Webcam from 'react-webcam';
 import TestReceipt from '@assets/images/fake-receipt.png';
 import Hand from '@assets/images/hand.svg';
-import MultiScan from '@assets/images/multi-scan.svg';
+import MultiScan from '@assets/images/educational-illustration__multi-scan.svg';
 import ReceiptUpload from '@assets/images/receipt-upload.svg';
 import Shutter from '@assets/images/shutter.svg';
 import type {FileObject} from '@components/AttachmentModal';
@@ -997,7 +997,8 @@ function IOURequestStepScan({
                     title={translate('iou.scanMultipleReceipts')}
                     image={MultiScan}
                     shouldRenderSVG
-                    contentFitImage="contain"
+                    imageHeight="auto"
+                    imageWidth="auto"
                     modalInnerContainerStyle={styles.pt0}
                     illustrationOuterContainerStyle={styles.multiScanEducationalPopupImage}
                     onConfirm={dismissMultiScanEducationalPopup}

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

@@ -5908,7 +5908,8 @@ const styles = (theme: ThemeColors) =>
         multiScanEducationalPopupImage: {
             backgroundColor: colors.pink700,
             overflow: 'hidden',
-            height: 220,
+            paddingHorizontal: 0,
+            aspectRatio: 1.7,
         },
     }) satisfies Styles;