Fix aspect ratio of preview in landscape mode and use takePhoto instead of takeSnapshot

Author: GCyganek

src/pages/iou/request/step/IOURequestStepScan/captureReceipt/index.android.ts

@@ -1,10 +1,10 @@
 import type {CaptureReceipt} from './types';
 
-const captureReceipt: CaptureReceipt = (camera, {flash, hasFlash, isPlatformMuted, path}) => {
+const captureReceipt: CaptureReceipt = (camera, {flash, hasFlash, isPlatformMuted, path, isInLandscapeMode}) => {
     const useFlash = flash && hasFlash;
-    if (useFlash) {
+    if (useFlash || isInLandscapeMode) {
         return camera.takePhoto({
-            flash: 'on',
+            flash: useFlash ? 'on' : 'off',
             enableShutterSound: !isPlatformMuted,
             path,
         });

src/pages/iou/request/step/IOURequestStepScan/captureReceipt/types.ts

@@ -5,6 +5,7 @@ type CaptureReceiptOptions = {
     hasFlash: boolean;
     isPlatformMuted: boolean | undefined;
     path: string;
+    isInLandscapeMode: boolean;
 };
 
 type CaptureReceipt = (camera: Camera, options: CaptureReceiptOptions) => Promise<PhotoFile>;

src/pages/iou/request/step/IOURequestStepScan/getCameraAspectRatio.ts

@@ -0,0 +1,14 @@
+import type {CameraDeviceFormat} from 'react-native-vision-camera';
+
+function getCameraAspectRatio(format: CameraDeviceFormat | undefined, isInLandscapeMode: boolean): number | undefined {
+    if (!format) {
+        return undefined;
+    }
+    if (isInLandscapeMode) {
+        return format.photoWidth / format.photoHeight;
+    }
+
+    return format.photoHeight / format.photoWidth;
+}
+
+export default getCameraAspectRatio;

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

@@ -50,6 +50,7 @@ import type {FileObject} from '@src/types/utils/Attachment';
 import captureReceipt from './captureReceipt';
 import NavigationAwareCamera from './components/NavigationAwareCamera/Camera';
 import ReceiptPreviews from './components/ReceiptPreviews';
+import getCameraAspectRatio from './getCameraAspectRatio';
 import useMobileReceiptScan from './hooks/useMobileReceiptScan';
 import useReceiptScan from './hooks/useReceiptScan';
 import type IOURequestStepScanProps from './types';
@@ -112,8 +113,9 @@ function IOURequestStepScan({
         {photoResolution: {width: CONST.RECEIPT_CAMERA.PHOTO_WIDTH, height: CONST.RECEIPT_CAMERA.PHOTO_HEIGHT}},
         {videoResolution: {width: windowHeight, height: windowWidth}},
     ]);
+
     // Format dimensions are in landscape orientation, so height/width gives portrait aspect ratio
-    const cameraAspectRatio = format ? format.photoHeight / format.photoWidth : undefined;
+    const cameraAspectRatio = getCameraAspectRatio(format, isInLandscapeMode);
     const fps = useMemo(() => (format ? Math.min(Math.max(30, format.minFps), format.maxFps) : 30), [format]);
 
     const navigateBack = () => {
@@ -316,7 +318,7 @@ function IOURequestStepScan({
 
         const path = getReceiptsUploadFolderPath();
 
-        captureReceipt(camera.current, {flash, hasFlash, isPlatformMuted, path})
+        captureReceipt(camera.current, {flash, hasFlash, isPlatformMuted, path, isInLandscapeMode})
             .then((photo: PhotoFile) => {
                 setDidCapturePhoto(true);
 
@@ -435,7 +437,7 @@ function IOURequestStepScan({
                         {cameraPermissionStatus === RESULTS.GRANTED && device != null && (
                             <View style={[styles.cameraView, styles.alignItemsCenter]}>
                                 <GestureDetector gesture={tapGesture}>
-                                    <View style={StyleUtils.getCameraViewfinderStyle(cameraAspectRatio)}>
+                                    <View style={StyleUtils.getCameraViewfinderStyle(cameraAspectRatio, isInLandscapeMode)}>
                                         <NavigationAwareCamera
                                             ref={camera}
                                             device={device}

src/styles/utils/index.ts

@@ -491,7 +491,10 @@ function getBackgroundColorStyle(backgroundColor: ColorValue): ViewStyle {
     };
 }
 
-function getCameraViewfinderStyle(aspectRatio: number | undefined): ViewStyle {
+function getCameraViewfinderStyle(aspectRatio: number | undefined, isInLandscapeMode: boolean): ViewStyle {
+    if (isInLandscapeMode && aspectRatio) {
+        return {aspectRatio, height: '100%', maxWidth: '100%'};
+    }
     if (aspectRatio) {
         return {aspectRatio, minWidth: '100%', minHeight: '100%'};
     }