Philipye314/imp 2 qr code scanner

app.json

@@ -24,7 +24,15 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
-    "plugins": ["expo-router"],
+    "plugins": [
+      "expo-router",
+      [
+        "expo-barcode-scanner",
+        {
+          "cameraPermission": "Allow $(PRODUCT_NAME) to access camera."
+        }
+      ]
+    ],
     "scheme": "your-app-scheme"
   }
 }

package.json

@@ -19,19 +19,22 @@
     "expo": "~49.0.11",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "0.72.4",
+    "react-native": "0.72.5",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "expo-router": "^2.0.0",
     "expo-linking": "~5.0.2",
     "expo-constants": "~14.4.2",
-    "react-native-gesture-handler": "~2.12.0"
+    "react-native-gesture-handler": "~2.12.0",
+    "expo-barcode-scanner": "~12.5.3",
+    "expo-camera": "~13.4.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@calblueprint/eslint-config-react": "^0.0.3",
     "@calblueprint/prettier-config": "^0.0.1",
     "@types/react": "~18.2.14",
+    "@types/react-native": "^0.72.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "eslint": "^8.50.0",

src/app/(BottomTabNavigation)/Cases/QRCodeScanner/index.tsx

@@ -1,11 +1,55 @@
-import React from 'react';
-import { Text, View } from 'react-native';
+import { BarCodeScanner, BarCodeScannerResult } from 'expo-barcode-scanner';
+import { router } from 'expo-router';
+import React, { useEffect, useState } from 'react';
+import { Image, Text, View } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import styles from './styles';
 
+enum permissions {
+  UNDETERMINED,
+  DENIED,
+  GRANTED,
+}
+
 function QRCodeScannerScreen() {
+  const [hasPermission, setHasPermission] = useState(permissions.UNDETERMINED);
+  const [scanned, setScanned] = useState<boolean>(false);
+  const [data, setData] = useState('NOTHING');
+
+  useEffect(() => {
+    const getBarCodeScannerPermissions = async () => {
+      const { status } = await BarCodeScanner.requestPermissionsAsync();
+      setHasPermission(
+        status === 'granted' ? permissions.GRANTED : permissions.DENIED,
+      );
+    };
+    getBarCodeScannerPermissions();
+  }, []);
+
+  const handleBarCodeScanned = async (result: BarCodeScannerResult) => {
+    if (!scanned) {
+      setScanned(true);
+      setData(result.data);
+    }
+  };
+
+  if (hasPermission === permissions.DENIED) {
+    return <Text>CANNOT ACCESS CAMERA!</Text>;
+  }
+
   return (
     <View style={styles.container}>
-      <Text>This is the QR Code Scanner screen!</Text>
+      <Text>Add a new case</Text>
+      <BarCodeScanner
+        onBarCodeScanned={handleBarCodeScanned}
+        style={[styles.scanner]} // StyleSheet.absoluteFillObject,
+      />
+      <Image style={styles.crosshair} source={require('./img/crosshair.png')} />
+
+      <Text>Current Scanning: {data}</Text>
+      <TouchableOpacity onPress={() => router.back()} style={styles.button}>
+        <Text>Go Back</Text>
+      </TouchableOpacity>
     </View>
   );
 }

src/app/(BottomTabNavigation)/Cases/QRCodeScanner/styles.ts

@@ -7,4 +7,26 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+
+  scanner: {
+    height: 300,
+    width: 300,
+    border: 'solid',
+    borderWidth: 3,
+  },
+
+  button: {
+    margin: 10,
+    alignItems: 'center',
+    backgroundColor: '#339FFF',
+    padding: 10,
+  },
+
+  crosshair: {
+    position: 'absolute',
+    top: 120,
+    left: -90,
+    height: 600,
+    width: 600,
+  },
 });

src/app/(BottomTabNavigation)/Cases/styles.ts

@@ -7,4 +7,9 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+
+  scanner: {
+    overflow: 'hidden',
+    borderRadius: 10,
+  },
 });

src/app/index.tsx

@@ -11,7 +11,7 @@ function StartScreen() {
           <Text>Welcome Screen</Text>
         </TouchableOpacity>
       </Link>
-      <Link href="/Cases" asChild>
+      <Link href="/Cases/QRCodeScanner" asChild>
         <TouchableOpacity style={styles.button}>
           <Text>Cases Screen</Text>
         </TouchableOpacity>

src/screens/QRCodeScanner/QRCodeScanner.tsx

@@ -0,0 +1,50 @@
+import { BarCodeScanner, BarCodeScannerResult } from 'expo-barcode-scanner';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import styles from '../../app/styles';
+
+enum permissions {
+  UNDETERMINED,
+  DENIED,
+  GRANTED,
+}
+
+function QRCodeScannerScreen() {
+  const [hasPermission, setHasPermission] = useState(permissions.UNDETERMINED);
+  const [scanned, setScanned] = useState<boolean>(false);
+  const [data, setData] = useState('NO INFO YET!');
+
+  useEffect(() => {
+    const getBarCodeScannerPermissions = async () => {
+      const { status } = await BarCodeScanner.requestPermissionsAsync();
+      setHasPermission(
+        status === 'granted' ? permissions.GRANTED : permissions.DENIED,
+      );
+    };
+    getBarCodeScannerPermissions();
+  }, []);
+
+  const handleBarCodeScanned = async (result: BarCodeScannerResult) => {
+    if (!scanned) {
+      setScanned(true);
+      setData(result.data);
+    }
+  };
+
+  if (hasPermission === permissions.DENIED) {
+    return <Text>CANNOT ACCESS CAMERA!</Text>;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text>This buhis the QR Code Scanner screen!</Text>
+      <BarCodeScanner
+        onBarCodeScanned={handleBarCodeScanned}
+        style={[StyleSheet.absoluteFillObject, styles.scanner]}
+      />
+      <Text>{data}</Text>
+    </View>
+  );
+}
+
+export default QRCodeScannerScreen;