From 5ef82399dd1d7876c7aed8400fe91db45d0e9075 Mon Sep 17 00:00:00 2001 From: Alek Jarmov Date: Sun, 11 Feb 2024 21:19:41 +0100 Subject: [PATCH 1/4] feat: add camera --- app.json | 16 +++++++- package-lock.json | 12 ++++++ package.json | 3 +- src/app/(app)/camera.tsx | 83 ++++++++++++++++++++++++++++++++++++++++ src/app/(app)/login.tsx | 2 +- 5 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 src/app/(app)/camera.tsx diff --git a/app.json b/app.json index bb4c0cf..15b1961 100644 --- a/app.json +++ b/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, diff --git a/package-lock.json b/package-lock.json index bc63611..3ced195 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@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", @@ -9975,6 +9976,17 @@ "md5-file": "^3.2.3" } }, + "node_modules/expo-camera": { + "version": "14.0.4", + "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-14.0.4.tgz", + "integrity": "sha512-0kOSIkvRkkJInwzvcWvmogWz7ta6oqjS3HD81z/Vm+fFUtmZ13PZEOWD8arYySoU1qMlUw9LztoBY09bpNeWOg==", + "dependencies": { + "invariant": "^2.2.4" + }, + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-constants": { "version": "15.4.5", "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-15.4.5.tgz", diff --git a/package.json b/package.json index 67c2644..d982627 100644 --- a/package.json +++ b/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", diff --git a/src/app/(app)/camera.tsx b/src/app/(app)/camera.tsx new file mode 100644 index 0000000..b9ea5c2 --- /dev/null +++ b/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 ( + + No permission for the camera. + + ); +} + +export function CameraView() { + const [type, setType] = useState(CameraType.back); + const [permission, requestPermission] = Camera.useCameraPermissions(); + + if (!permission) { + requestPermission(); + return ; + } + + function toggleCameraType() { + setType((current) => + current === CameraType.back ? CameraType.front : CameraType.back, + ); + } + + return ( + + + + + Flip Camera + + + + + ); +} + +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; diff --git a/src/app/(app)/login.tsx b/src/app/(app)/login.tsx index c2e3fe7..9f47b65 100644 --- a/src/app/(app)/login.tsx +++ b/src/app/(app)/login.tsx @@ -11,7 +11,7 @@ const Login = () => { const { login, loading, error, user } = useLoginUser(); if (user) { - return ; + return ; } if (loading) { From 019dcd988a0118782252590ed431c0b75e4c85b0 Mon Sep 17 00:00:00 2001 From: Alek Jarmov Date: Sun, 11 Feb 2024 22:09:00 +0100 Subject: [PATCH 2/4] fix: camera works now --- package-lock.json | 9 ++ package.json | 5 +- src/app/(app)/camera.tsx | 163 +++++++++++++++++++++----------- src/app/(app)/camera_fail.tsx | 84 ++++++++++++++++ src/components/CameraButton.tsx | 27 ++++++ 5 files changed, 230 insertions(+), 58 deletions(-) create mode 100644 src/app/(app)/camera_fail.tsx create mode 100644 src/components/CameraButton.tsx diff --git a/package-lock.json b/package-lock.json index 3ced195..2f63c1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "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", @@ -10034,6 +10035,14 @@ "invariant": "^2.2.4" } }, + "node_modules/expo-media-library": { + "version": "15.9.1", + "resolved": "https://registry.npmjs.org/expo-media-library/-/expo-media-library-15.9.1.tgz", + "integrity": "sha512-Y29uKFJ3qWwNejIrjoCppXp3OgIFs/RYHWXkF9xey6evpNrUlHoP1WHG2jYAMSrss6aIRVt3tO7EtYUCZxz50Q==", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-modules-autolinking": { "version": "1.10.3", "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.10.3.tgz", diff --git a/package.json b/package.json index d982627..4e401b7 100644 --- a/package.json +++ b/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", @@ -39,8 +41,7 @@ "react-native-screens": "~3.29.0", "react-native-vector-icons": "^10.0.3", "react-native-web": "~0.19.6", - "zustand": "^4.5.0", - "expo-camera": "~14.0.4" + "zustand": "^4.5.0" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/src/app/(app)/camera.tsx b/src/app/(app)/camera.tsx index b9ea5c2..878bf79 100644 --- a/src/app/(app)/camera.tsx +++ b/src/app/(app)/camera.tsx @@ -1,39 +1,101 @@ import { Camera, CameraType } from "expo-camera"; -import { useState } from "react"; -import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; +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"; -function NoPermissionError() { - return ( - - No permission for the camera. - - ); -} +import Button from "../../components/CameraButton"; -export function CameraView() { +export default function App() { + const [hasCameraPermission, setHasCameraPermission] = useState(false); + const [image, setImage] = useState(null); const [type, setType] = useState(CameraType.back); - const [permission, requestPermission] = Camera.useCameraPermissions(); + const cameraRef = useRef(null); - if (!permission) { - requestPermission(); - return ; - } + 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); + } + } + }; - function toggleCameraType() { - setType((current) => - current === CameraType.back ? CameraType.front : CameraType.back, - ); + 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 No access to camera; } return ( - - - - Flip Camera - - - + {!image ? ( + + +