Add a patch to rotate camera view on iPad (#841)

src/components/Camera/CameraView.js

@@ -7,7 +7,11 @@ import {
 } from "react-native-gesture-handler";
 import Reanimated from "react-native-reanimated";
 import { Camera } from "react-native-vision-camera";
-import { orientationPatch, pixelFormatPatch } from "sharedHelpers/visionCameraPatches";
+import {
+  iPadStylePatch,
+  orientationPatch,
+  pixelFormatPatch
+} from "sharedHelpers/visionCameraPatches";
 import useDeviceOrientation from "sharedHooks/useDeviceOrientation";
 import useIsForeground from "sharedHooks/useIsForeground";
 
@@ -152,6 +156,10 @@ const CameraView = ( {
       onZoomChange?.( e.scale );
     } );
 
+  // react-native-vision-camera v3.3.1:
+  // iPad camera preview is wrong in anything else than portrait
+  const cameraStyle = iPadStylePatch( deviceOrientation );
+
   return (
     <>
       <GestureDetector gesture={Gesture.Exclusive( singleTap, pinchGesture )}>
@@ -160,7 +168,7 @@ const CameraView = ( {
           photo
           enableZoomGesture={false}
           isActive={isActive}
-          style={[StyleSheet.absoluteFill]}
+          style={[StyleSheet.absoluteFill, cameraStyle]}
           onError={e => onError( e )}
           // react-native-vision-camera v3.3.1: This prop is undocumented, but does work on iOS
           // it does nothing on Android so we set it to null there

src/sharedHelpers/visionCameraPatches.js

@@ -3,6 +3,7 @@
 */
 import ImageResizer from "@bam.tech/react-native-image-resizer";
 import { Platform } from "react-native";
+import { isTablet } from "react-native-device-info";
 import RNFS from "react-native-fs";
 import {
   LANDSCAPE_LEFT,
@@ -107,3 +108,32 @@ export const rotatePhotoPatch = async ( photo, rotation ) => {
 // in the future, we keep this patch here to remind us to put the rotation back to resizing
 // the smaller photo.
 export const rotationLocalPhotoPatch = () => 0;
+
+// Needed for react-native-vision-camera v3.3.1
+// This patch is used to rotate the camera view on iPads.
+// The only thing to do there is to rotate the camera view component
+// depending on the device orientation. The resulting photo is already rotated in other places.
+export const iPadStylePatch = deviceOrientation => {
+  // Do nothing on Android
+  if ( Platform.OS === "android" ) {
+    return {};
+  }
+  // Do nothing on phones
+  if ( !isTablet() ) {
+    return {};
+  }
+  if ( deviceOrientation === LANDSCAPE_RIGHT ) {
+    return {
+      transform: [{ rotate: "90deg" }]
+    };
+  } if ( deviceOrientation === LANDSCAPE_LEFT ) {
+    return {
+      transform: [{ rotate: "-90deg" }]
+    };
+  } if ( deviceOrientation === PORTRAIT_UPSIDE_DOWN ) {
+    return {
+      transform: [{ rotate: "180deg" }]
+    };
+  }
+  return {};
+};