cameraComponent.js

.idea/.gitignore

+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/beanbakers-qr-code-reader.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/beanbakers-qr-code-reader.iml" filepath="$PROJECT_DIR$/.idea/beanbakers-qr-code-reader.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

package-lock.json

+{
+  "name": "beanbakers-qr-code-reader",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

package.json

+{}

qr-code-app/cameraComponent.js

+import React, { useState } from 'react';
+import { View, Text, Button, Image } from 'react-native';
+import { RNCamera } from 'react-native-camera';
+
+const QRCodeScanner = () => {
+    const [scanned, setScanned] = useState(false);
+    const [result, setResult] = useState(null);
+
+    const onBarCodeRead = (event) => {
+        if (!scanned) {
+            setScanned(true);
+            setResult(event.data);
+        }
+    };
+
+    const handleReset = () => {
+        setScanned(false);
+        setResult(null);
+    };
+
+    return (
+        <View style={{ flex: 1 }}>
+            {scanned ? (
+                <View>
+                    <Text>Result: {result}</Text>
+                    <Button title="Scan Again" onPress={handleReset} />
+                </View>
+            ) : (
+                <RNCamera
+                    style={{ flex: 1 }}
+                    onBarCodeRead={onBarCodeRead}
+                    captureAudio={false}
+                />
+            )}
+        </View>
+    );
+};
+
+export default QRCodeScanner;
\ No newline at end of file

qr-code-app/package-lock.json

@@ -14,6 +14,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.73.6",
+        "react-native-camera": "^4.2.1",
         "react-native-web": "~0.19.6"
       },
       "devDependencies": {
@@ -13483,6 +13484,14 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-camera": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-camera/-/react-native-camera-4.2.1.tgz",
+      "integrity": "sha512-+Vkql24PFYQfsPRznJCvPwJQfyzCnjlcww/iZ4Ej80bgivKjL9eU0IMQIXp4yi6XCrKi4voWXxIDPMupQZKeIQ==",
+      "dependencies": {
+        "prop-types": "^15.6.2"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.11",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.11.tgz",

qr-code-app/package.json

@@ -16,6 +16,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.6",
+    "react-native-camera": "^4.2.1",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {