added qr scanning feature wit te library called Camerascreen from rea…

…ct-native-camera-kit
Real-Dev-Squad · Aug 8, 2023 · 4ad965b · 4ad965b
1 parent 4b0516c
commit 4ad965b
Show file tree

Hide file tree

Showing 5 changed files with 756 additions and 929 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -1,4 +1,6 @@
 apply plugin: "com.android.application"
+apply plugin: "kotlin-android"
+apply plugin: "kotlin-android-extensions"
 
 import com.android.build.OutputFile
 

diff --git a/android/build.gradle b/android/build.gradle
@@ -3,17 +3,19 @@
 buildscript {
     ext {
         buildToolsVersion = "30.0.2"
-        minSdkVersion = 21
+        minSdkVersion = 23
         compileSdkVersion = 31
         targetSdkVersion = 31
         ndkVersion = "21.4.7075529"
+        kotlin_version = '1.7.20'
     }
     repositories {
         google()
         mavenCentral()
     }
     dependencies {
         classpath("com.android.tools.build:gradle:4.2.2")
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "react": "17.0.2",
     "react-native": "0.67.0",
     "react-native-app-auth": "^6.4.2",
+    "react-native-camera-kit": "^13.0.0",
     "react-native-date-picker": "^4.2.13",
     "react-native-datepicker": "^1.7.2",
     "react-native-element-dropdown": "^2.0.0",
@@ -37,7 +38,6 @@
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^3.9.0",
     "react-native-toast-message": "^2.1.5",
-    "react-native-vision-camera": "^2.15.4",
     "react-native-webview": "^11.13.0"
   },
   "devDependencies": {

diff --git a/src/screens/AuthScreen/AuthScreen.tsx b/src/screens/AuthScreen/AuthScreen.tsx
@@ -1,12 +1,5 @@
-import React, { useContext, useEffect, useState } from 'react';
-import {
-  Text,
-  View,
-  TouchableOpacity,
-  Image,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
+import React, { useContext, useState } from 'react';
+import { Text, View, TouchableOpacity, Image, ScrollView, StyleSheet } from 'react-native';
 import Strings from '../../i18n/en';
 import { AuthViewStyle } from './styles';
 import { AuthScreenButton } from './Button';
@@ -20,13 +13,7 @@ import { ActivityIndicator } from 'react-native';
 import Images from '../../constants/images/Image';
 import WebView from 'react-native-webview';
 import { urls } from '../../constants/appConstant/url';
-import {
-  Camera,
-  Frame,
-  useCameraDevices,
-  useFrameProcessor,
-} from 'react-native-vision-camera';
-import { useSharedValue } from 'react-native-reanimated';
+import { Camera, CameraScreen } from 'react-native-camera-kit';
 
 const AuthScreen = () => {
   // TODO: will revamp github signIn feature
@@ -42,43 +29,35 @@ const AuthScreen = () => {
   const newCameraPermission = () => Camera.requestCameraPermission();
   // const newMicrophonePermission = Camera.requestMicrophonePermission();
 
-  const devices = useCameraDevices();
-  const device = devices.back;
+  // const devices = useCameraDevices();
+  // const device = devices.back;
+
+  // const detectorResult = useSharedValue('');
+
 
-  const detectorResult = useSharedValue('');
 
   const activateCamera = async () => {
     try {
-      await Camera.requestCameraPermission(); // Request camera permission
+      // await Camera.requestCameraPermission(); // Request camera permission
       setCameraActive(true); // Set cameraActive state to true
     } catch (error) {
       console.error('Error requesting camera permission:', error);
     }
   };
 
-  const labelImage = async (frame) => {
-    const model = await tf.loadModel('path/to/model');
-    const image = tf.image.decodePng(frame);
-    const predictions = model.predict(image);
-    const labels = [];
-    for (const prediction of predictions) {
-      const label = prediction.classLabel;
-      const confidence = prediction.confidence;
-      labels.push({
-        label,
-        confidence,
-      });
-    }
-    return labels;
+  const handleQRCodeScanned = ({ nativeEvent }: any) => {
+    console.log('nativeEvent.codeStringValue', nativeEvent.codeStringValue);
+    // setScanResult(nativeEvent.codeStringValue);
+    // navigation.navigate('Result', { data: nativeEvent.codeStringValue });
   };
-  const frameProcessor = useFrameProcessor((frame) => {
-    'worklet';
-    const imageLabels = labelImage(frame);
 
-    console.log('Image labels:', imageLabels);
-    detectorResult.value = imageLabels[0]?.label;
-  }, []);
+  const closeModal = () => {
+    setOtpModalVisible(false);
+    setOtpCode('');
+  };
 
+  const openModal = () => setOtpModalVisible(true);
+  const setCode = (code: string) => setOtpCode(code);
   //TODO: add to constants
   const maxLength = 4;
   const handleSignIn = () => {
@@ -192,20 +171,20 @@ const AuthScreen = () => {
             </View>
           </TouchableOpacity>
         </View>
-        <AuthScreenButton
-          text={Strings.SIGN_IN_WITH_WEB}
-          onPress={activateCamera}
-        />
+        <AuthScreenButton text={Strings.SIGN_IN_WITH_WEB} onPress={activateCamera} />
       </View>
-      {cameraActive && device && (
-        <Camera
-          style={StyleSheet.absoluteFill}
-          device={device}
-          isActive={true}
-        />
-      )}
+
+      {cameraActive && <CameraScreen
+        style={StyleSheet.absoluteFill}
+      showFrame
+      scanBarcode={true}
+      onReadCode={handleQRCodeScanned}
+      frameColor={'white'}
+      laserColor={'white'}
+    />}
+
     </ScrollView>
   );
 };
 
-export default AuthScreen;
+export default AuthScreen;