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

@@ -18,9 +18,11 @@
     "@rneui/themed": "^0.0.0-edge.2",
     "@tanstack/react-query": "^5.20.1",
     "expo": "~50.0.6",
+    "expo-camera": "~14.0.4",
     "expo-constants": "~15.4.5",
     "expo-font": "~11.10.2",
     "expo-linking": "~6.2.2",
+    "expo-media-library": "~15.9.1",
     "expo-router": "~3.4.7",
     "expo-splash-screen": "~0.26.4",
     "expo-status-bar": "~1.11.1",

src/app/(app)/camera.tsx

@@ -0,0 +1,135 @@
+import { Camera, CameraType } from "expo-camera";
+import Constants from "expo-constants";
+import * as MediaLibrary from "expo-media-library";
+import React, { useState, useEffect, useRef } from "react";
+import { Text, View, StyleSheet, Image } from "react-native";
+
+import Button from "../../components/CameraButton";
+
+export default function App() {
+  const [hasCameraPermission, setHasCameraPermission] = useState(false);
+  const [image, setImage] = useState(null);
+  const [type, setType] = useState(CameraType.back);
+  const cameraRef = useRef(null);
+
+  useEffect(() => {
+    (async () => {
+      MediaLibrary.requestPermissionsAsync();
+      const cameraStatus = await Camera.requestCameraPermissionsAsync();
+      setHasCameraPermission(cameraStatus.status === "granted");
+    })();
+  }, []);
+
+  const takePicture = async () => {
+    if (cameraRef) {
+      try {
+        // @ts-ignore
+        const data = await cameraRef.current.takePictureAsync();
+        console.log(data);
+        setImage(data.uri);
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  };
+
+  const savePicture = async () => {
+    if (image) {
+      try {
+        const asset = await MediaLibrary.createAssetAsync(image);
+        alert("Picture saved! 🎉");
+        setImage(null);
+        console.log("saved successfully");
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  };
+
+  if (hasCameraPermission === false) {
+    return <Text>No access to camera</Text>;
+  }
+
+  return (
+    <View style={styles.container}>
+      {!image ? (
+        <Camera style={styles.camera} type={type} ref={cameraRef}>
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              paddingHorizontal: 30,
+            }}
+          >
+            <Button
+              title=""
+              icon="retweet"
+              onPress={() => {
+                setType(
+                  type === CameraType.back ? CameraType.front : CameraType.back,
+                );
+              }}
+            />
+          </View>
+        </Camera>
+      ) : (
+        <Image source={{ uri: image }} style={styles.camera} />
+      )}
+
+      <View style={styles.controls}>
+        {image ? (
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              paddingHorizontal: 50,
+            }}
+          >
+            <Button
+              title="Re-take"
+              onPress={() => setImage(null)}
+              icon="retweet"
+            />
+            <Button title="Save" onPress={savePicture} icon="check" />
+          </View>
+        ) : (
+          <Button title="Take a picture" onPress={takePicture} icon="camera" />
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    paddingTop: Constants.statusBarHeight,
+    backgroundColor: "#000",
+  },
+  controls: {
+    justifyContent: "center",
+    flex: 0.5,
+  },
+  button: {
+    height: 40,
+    borderRadius: 6,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  text: {
+    fontWeight: "bold",
+    fontSize: 16,
+    color: "#E9730F",
+    marginLeft: 10,
+  },
+  camera: {
+    flex: 1,
+    borderRadius: 2,
+    paddingHorizontal: 200,
+  },
+  topControls: {
+    flex: 1,
+  },
+});

src/components/CameraButton.tsx

@@ -0,0 +1,27 @@
+import { Entypo, MaterialIcons } from "@expo/vector-icons";
+import * as React from "react";
+import { Text, TouchableOpacity, StyleSheet } from "react-native";
+// @ts-ignore
+export default function Button({ title, onPress, icon }) {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.button}>
+      <Entypo name={icon} size={28} color="#f1f1f1" />
+      <Text style={styles.text}>{title}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    height: 40,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  text: {
+    fontWeight: "bold",
+    fontSize: 16,
+    color: "#f1f1f1",
+    marginLeft: 10,
+  },
+});