Update app.js

app.js

@@ -1,13 +1,12 @@
 import React, { useRef, useEffect, useState } from "react";
 import { StyleSheet, View, Button, Alert } from "react-native";
 import { Camera, useCameraDevices } from "react-native-vision-camera";
-
 const App = () => {
   const [hasPermission, setHasPermission] = useState(false);
-  const [capturedImage, setCapturedImage] = useState(null);
+  const [cameraType, setCameraType] = useState("rear"); // Default to rear camera
   const camera = useRef(null);
   const devices = useCameraDevices();
-  const device = devices.back; // Rear camera
+  const device = devices[cameraType];
 
   useEffect(() => {
     (async () => {
@@ -21,16 +20,24 @@ const App = () => {
 
     try {
       const photo = await camera.current.takePhoto({
-        quality: 0.8,
-        skipMetadata: true,
+        quality: 0.8, // Adjust quality as needed
       });
+
       console.log("Captured Image Path:", photo.path);
-      setCapturedImage(photo.path);
 
-      // Send the captured image to the backend
+      // Correct image orientation for the rear camera
+      const fixedImage = await ImageManipulator.manipulateAsync(
+        photo.path,
+        [{ flip: cameraType === "rear" ? "horizontal" : undefined }], // Flip only for rear camera
+        { compress: 1, format: ImageManipulator.SaveFormat.JPEG }
+      );
+
+      console.log("Fixed Image Path:", fixedImage.uri);
+
+      // Send the fixed image to the backend
       const formData = new FormData();
       formData.append("file", {
-        uri: `file://${photo.path}`,
+        uri: fixedImage.uri,
         type: "image/jpeg",
         name: "photo.jpg",
       });
@@ -59,6 +66,12 @@ const App = () => {
         photo={true}
       />
       <View style={styles.buttonContainer}>
+        <Button
+          title={`Switch to ${cameraType === "rear" ? "Front" : "Rear"} Camera`}
+          onPress={() =>
+            setCameraType((prev) => (prev === "rear" ? "front" : "rear"))
+          }
+        />
         <Button title="Capture Image" onPress={captureImage} />
       </View>
     </View>
@@ -73,7 +86,8 @@ const styles = StyleSheet.create({
     position: "absolute",
     bottom: 20,
     width: "100%",
-    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-evenly",
   },
 });