From c0daefb25228e98a684a7bba3e1b8393b3c1739a Mon Sep 17 00:00:00 2001
From: Mar Tuico <mar.tuico@gmail.com>
Date: Tue, 11 Nov 2025 10:14:51 +0800
Subject: [PATCH 1/2] Make sure cameraWithTensors is using a Camera Component

---
 with-tfjs-camera/src/CustomTensorCamera.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/with-tfjs-camera/src/CustomTensorCamera.js b/with-tfjs-camera/src/CustomTensorCamera.js
index b41fa9c3..bc370942 100644
--- a/with-tfjs-camera/src/CustomTensorCamera.js
+++ b/with-tfjs-camera/src/CustomTensorCamera.js
@@ -1,5 +1,5 @@
 import { cameraWithTensors } from '@tensorflow/tfjs-react-native';
-import { Camera } from 'expo-camera';
+import { CameraView } from 'expo-camera';
 import React from 'react';
 
 const TEXTURE_SIZE = { width: 1080, height: 1920 };
@@ -13,7 +13,7 @@ const TENSOR_SIZE = {
   height: TENSOR_WIDTH * CAMERA_RATIO,
 };
 
-const TensorCamera = cameraWithTensors(Camera);
+const TensorCamera = cameraWithTensors(CameraView);
 
 export function CustomTensorCamera({ style, width, ...props }) {
   const sizeStyle = React.useMemo(() => {

From b8a39827869b3f6fbb7ff41b87fbb4f9f8c4ddfd Mon Sep 17 00:00:00 2001
From: Mar Tuico <mar.tuico@gmail.com>
Date: Tue, 11 Nov 2025 23:54:02 +0800
Subject: [PATCH 2/2] Update error found due to old api

---
 with-tfjs-camera/App.js           |  6 +++---
 with-tfjs-camera/src/ModelView.js | 11 +++++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/with-tfjs-camera/App.js b/with-tfjs-camera/App.js
index 97f144e2..937f0f3b 100644
--- a/with-tfjs-camera/App.js
+++ b/with-tfjs-camera/App.js
@@ -1,4 +1,4 @@
-import { Camera } from "expo-camera";
+import { useCameraPermissions } from "expo-camera";
 import React from "react";
 import { Button } from 'react-native';
 
@@ -8,7 +8,7 @@ import { useTensorFlowLoaded } from "./src/useTensorFlow";
 
 export default function App() {
   const isLoaded = useTensorFlowLoaded();
-  const [permission, requestPermission] = Camera.useCameraPermissions();
+  const [permission, requestPermission] = useCameraPermissions();
 
   if (!permission?.granted) {
     return (
@@ -17,7 +17,7 @@ export default function App() {
       </LoadingView>
     );
   }
-  
+
   if (!isLoaded) {
     return <LoadingView message="Loading TensorFlow" />;
   }
diff --git a/with-tfjs-camera/src/ModelView.js b/with-tfjs-camera/src/ModelView.js
index 87232aa7..9498a994 100644
--- a/with-tfjs-camera/src/ModelView.js
+++ b/with-tfjs-camera/src/ModelView.js
@@ -1,5 +1,4 @@
 import * as mobilenet from '@tensorflow-models/mobilenet';
-import { Camera } from 'expo-camera';
 import React from 'react';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 
@@ -11,18 +10,23 @@ import { useTensorFlowModel } from './useTensorFlow';
 export function ModelView() {
   const model = useTensorFlowModel(mobilenet);
   const [predictions, setPredictions] = React.useState([]);
+  const [facing, setFacing] = React.useState("front")
 
   if (!model) {
     return <LoadingView message="Loading TensorFlow model" />;
   }
 
+  const toggleCameraFacing = () => {
+    setFacing((prev) => prev === "front" ? "back" : "front")
+  }
+
   return (
     <View
       style={{ flex: 1, backgroundColor: "black", justifyContent: "center" }}
     >
       <PredictionList predictions={predictions} />
       <View style={{ borderRadius: 20, overflow: "hidden" }}>
-        <ModelCamera model={model} setPredictions={setPredictions} />
+        <ModelCamera model={model} setPredictions={setPredictions} facing={facing} />
       </View>
     </View>
   );
@@ -50,13 +54,12 @@ function ModelCamera({ model, setPredictions }) {
     },
     [setPredictions]
   );
-
   return React.useMemo(
     () => (
       <CustomTensorCamera
         width={size.width}
         style={styles.camera}
-        type={Camera.Constants.Type.back}
+        facing="front"
         onReady={onReady}
         autorender
       />