feat: add camera

app.json

@@ -22,14 +22,26 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "permissions": [
+        "android.permission.CAMERA",
+        "android.permission.RECORD_AUDIO"
+      ],
+      "package": "com.anonymous.finsight"
     },
     "web": {
       "bundler": "metro",
       "favicon": "./assets/favicon.png"
     },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera.",
+          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
+        }
+      ]
     ],
     "experiments": {
       "tsconfigPaths": true,

package.json

@@ -39,7 +39,8 @@
     "react-native-screens": "~3.29.0",
     "react-native-vector-icons": "^10.0.3",
     "react-native-web": "~0.19.6",
-    "zustand": "^4.5.0"
+    "zustand": "^4.5.0",
+    "expo-camera": "~14.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/app/(app)/camera.tsx

@@ -0,0 +1,83 @@
+import { Camera, CameraType } from "expo-camera";
+import { useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+
+function NoPermissionError() {
+  return (
+    <View style={styles.errorContainer}>
+      <Text style={styles.errorText}>No permission for the camera.</Text>
+    </View>
+  );
+}
+
+export function CameraView() {
+  const [type, setType] = useState(CameraType.back);
+  const [permission, requestPermission] = Camera.useCameraPermissions();
+
+  if (!permission) {
+    requestPermission();
+    return <NoPermissionError />;
+  }
+
+  function toggleCameraType() {
+    setType((current) =>
+      current === CameraType.back ? CameraType.front : CameraType.back,
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Camera style={styles.camera} type={type}>
+        <View style={styles.buttonContainer}>
+          <TouchableOpacity style={styles.button} onPress={toggleCameraType}>
+            <Text style={styles.text}>Flip Camera</Text>
+          </TouchableOpacity>
+        </View>
+      </Camera>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "black",
+  },
+  camera: {
+    flex: 1,
+  },
+  buttonContainer: {
+    flex: 1,
+    backgroundColor: "transparent",
+    flexDirection: "row",
+    margin: 20,
+  },
+  button: {
+    flex: 0.1,
+    alignSelf: "flex-end",
+    alignItems: "center",
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    padding: 10,
+    paddingHorizontal: 20,
+    marginBottom: 20,
+  },
+  text: {
+    fontSize: 18,
+    color: "black",
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "red",
+  },
+  errorText: {
+    fontSize: 20,
+    color: "white",
+    textAlign: "center",
+    paddingHorizontal: 20,
+  },
+});
+
+export default CameraView;

src/app/(app)/login.tsx

@@ -11,7 +11,7 @@ const Login = () => {
   const { login, loading, error, user } = useLoginUser();
 
   if (user) {
-    return <Redirect href="/" />;
+    return <Redirect href="/camera" />;
   }
 
   if (loading) {