react-native-biometric-verifier 0.0.41 → 0.0.43

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-native-biometric-verifier",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "description": "A React Native module for biometric verification with face recognition and QR code scanning",
   "main": "src/index.js",
   "private": false,
-  "license": "UNLICENSED",
+  "license": "JESCON TECHNOLOGIES PVT LMT ,THRISSUR,KERALA",
   "author": "PRAFUL DAS M M",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -34,7 +34,6 @@
     "react-native-vector-icons": "^9.0.0",
     "react-native-geolocation-service": "^5.0.0",
     "react-native-image-resizer": "^1.0.0",
-    "@react-navigation/native": "^6.0.0",
     "prop-types": "^15.8.0",
     "react-native-fs": "^2.20.0"
   },

package/src/components/Loader.js

@@ -5,23 +5,30 @@ import {
   Modal,
   Animated,
   Easing,
-  Text
+  Text,
+  Image,
+  Dimensions,
 } from "react-native";
-import FastImage from 'react-native-fast-image';
-import { normalize } from "react-native-elements";
 import { getLoaderGif } from "../utils/getLoaderGif";
 
+const { width, height } = Dimensions.get("window");
+
+// Helper: convert percentage of screen width to px
+const wp = (percent) => (width * percent) / 100;
+
 export default function Loader({
   state,
-  overlayColor = 'rgba(0,0,0,0.4)',
-  loaderColor = 'lightblue',
-  size = 50,
-  gifSource = { uri: "http://emr.amalaims.org:9393/file/getCommonFile/image/Face.gif" },
-  message = '',
+  overlayColor = "rgba(0,0,0,0.4)",
+  loaderColor = "lightblue",
+  size = 12, // % of screen width
+  gifSource = {
+    uri: "http://emr.amalaims.org:9393/file/getCommonFile/image/Face.gif",
+  },
+  message = "",
   messageStyle = {},
-  animationType = 'fade',
+  animationType = "fade",
   hasBackground = true,
-  borderRadius = 20,
+  borderRadius = 4, // %
   shadow = true,
   imageurl,
 }) {
@@ -30,30 +37,29 @@ export default function Loader({
   const [fade] = useState(new Animated.Value(0));
   const [imageSource, setImageSource] = useState(gifSource);
 
-  const error = getLoaderGif(state.animationState, state.currentStep, "http://emr.amalaims.org:9393/", imageurl);
+  const error = getLoaderGif(
+    state.animationState,
+    state.currentStep,
+    "http://emr.amalaims.org:9393/",
+    imageurl
+  );
 
-  // Reset imageSource whenever gifSource prop changes
   useEffect(() => {
     setImageSource(gifSource);
   }, [gifSource]);
 
   const handleImageError = () => {
-    try {
-      setImageSource(error);
-    } catch (err) {
-      console.error("Loader image error:", err);
-    }
+    setImageSource(error);
   };
 
-  // Rotation, pulse, and fade-in animations
   useEffect(() => {
-    if (!gifSource) { // Only animate if not using a GIF
+    if (!gifSource) {
       Animated.loop(
         Animated.timing(rotation, {
           toValue: 1,
           duration: 1500,
           easing: Easing.linear,
-          useNativeDriver: true
+          useNativeDriver: true,
         })
       ).start();
     }
@@ -63,80 +69,90 @@ export default function Loader({
         Animated.timing(pulse, {
           toValue: 1.1,
           duration: 800,
-          useNativeDriver: true
+          useNativeDriver: true,
         }),
         Animated.timing(pulse, {
           toValue: 1,
           duration: 800,
-          useNativeDriver: true
-        })
+          useNativeDriver: true,
+        }),
       ])
     ).start();
 
     Animated.timing(fade, {
       toValue: 1,
       duration: 300,
-      useNativeDriver: true
+      useNativeDriver: true,
     }).start();
   }, []);
 
   const spin = rotation.interpolate({
     inputRange: [0, 1],
-    outputRange: ['0deg', '360deg']
+    outputRange: ["0deg", "360deg"],
   });
 
+  const loaderSize = wp(size);
+  const borderSize = loaderSize * 0.12;
+
   const loaderContent = gifSource ? (
-    <FastImage
-      style={[styles.icon_style, { width: normalize(size), height: normalize(size) }]}
+    <Image
+      style={[
+        styles.icon,
+        { width: loaderSize, height: loaderSize },
+      ]}
       source={imageSource}
-      resizeMode={FastImage.resizeMode.contain}
       onError={handleImageError}
     />
   ) : (
-    <Animated.View style={[
-      styles.defaultLoader,
-      {
-        borderColor: loaderColor,
-        transform: [{ rotate: spin }, { scale: pulse }],
-        width: normalize(size),
-        height: normalize(size),
-        borderWidth: normalize(size / 10)
-      }
-    ]}>
-      <View style={[
-        styles.innerCircle,
+    <Animated.View
+      style={[
+        styles.defaultLoader,
         {
-          backgroundColor: loaderColor,
-          width: normalize(size / 2),
-          height: normalize(size / 2)
-        }
-      ]} />
+          width: loaderSize,
+          height: loaderSize,
+          borderWidth: borderSize,
+          borderColor: loaderColor,
+          transform: [{ rotate: spin }, { scale: pulse }],
+        },
+      ]}
+    >
+      <View
+        style={[
+          styles.innerCircle,
+          {
+            width: loaderSize / 2,
+            height: loaderSize / 2,
+            backgroundColor: loaderColor,
+          },
+        ]}
+      />
     </Animated.View>
   );
 
   return (
     <Modal
       animationType={animationType}
-      transparent={true}
+      transparent
       visible={state.isLoading}
-      onRequestClose={() => { }}
+      onRequestClose={() => {}}
     >
-      <Animated.View style={[
-        styles.modalContainer,
-        {
-          backgroundColor: overlayColor,
-          opacity: fade
-        }
-      ]}>
-        <Animated.View style={[
-          styles.loaderContainer,
-          {
-            backgroundColor: hasBackground ? 'white' : 'transparent',
-            borderRadius: normalize(borderRadius),
-            transform: [{ scale: pulse }],
-            ...(shadow && styles.shadowStyle)
-          }
-        ]}>
+      <Animated.View
+        style={[
+          styles.modalContainer,
+          { backgroundColor: overlayColor, opacity: fade },
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.loaderContainer,
+            {
+              backgroundColor: hasBackground ? "white" : "transparent",
+              borderRadius: wp(borderRadius),
+              transform: [{ scale: pulse }],
+            },
+            shadow && styles.shadowStyle,
+          ]}
+        >
           {loaderContent}
           {message ? (
             <Text style={[styles.messageText, messageStyle]}>
@@ -152,40 +168,36 @@ export default function Loader({
 const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
   },
   loaderContainer: {
-    padding: normalize(20),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  icon_style: {
+    padding: wp(5),
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+  },
+  icon: {
+    resizeMode: "contain",
   },
   defaultLoader: {
-    borderRadius: normalize(100),
-    justifyContent: 'center',
-    alignItems: 'center',
+    borderRadius: 1000,
+    justifyContent: "center",
+    alignItems: "center",
   },
   innerCircle: {
-    borderRadius: normalize(100),
+    borderRadius: 1000,
   },
   messageText: {
-    marginTop: normalize(15),
-    fontSize: normalize(14),
-    color: '#555',
-    textAlign: 'center'
+    marginTop: wp(3),
+    fontSize: wp(3.5),
+    color: "#555",
+    textAlign: "center",
   },
   shadowStyle: {
     shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
+    shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5,
-  }
+  },
 });

package/src/components/StepIndicator.js

@@ -7,45 +7,17 @@ import { Global } from '../utils/Global';
 const StepIndicator = ({ currentStep, qrscan }) => {
   return (
     <View style={styles.statusContainer}>
-      {/* Identity Step */}
-      <View style={styles.statusItem}>
-        <Icon
-          name="face"
-          size={20}
-          color={
-            currentStep === "Identity Verification" ||
-            currentStep === "Location Verification" ||
-            currentStep === "Complete"
-              ? Global.AppTheme.primary
-              : Global.AppTheme.light
-          }
-          style={styles.statusIcon}
-        />
-        <Text
-          style={[
-            styles.statusText,
-            (currentStep === "Identity Verification" ||
-              currentStep === "Location Verification" ||
-              currentStep === "Complete") && styles.statusTextActive,
-          ]}
-        >
-          Identity
-        </Text>
-      </View>
-
-      {/* Show Location only if qrscan = true */}
       {qrscan && (
         <>
-          <View style={styles.statusSeparator} />
           <View style={styles.statusItem}>
             <Icon
               name="location-on"
               size={20}
               color={
                 currentStep === "Location Verification" ||
-                currentStep === "Complete"
-                  ? Global.AppTheme.primary
-                  : Global.AppTheme.light
+                  currentStep === "Complete"
+                  ? Global.AppTheme.light
+                  : Global.AppTheme.primary
               }
               style={styles.statusIcon}
             />
@@ -56,11 +28,41 @@ const StepIndicator = ({ currentStep, qrscan }) => {
                   currentStep === "Complete") && styles.statusTextActive,
               ]}
             >
-              Location
+              QR
             </Text>
           </View>
+          <View style={styles.statusSeparator} />
         </>
       )}
+
+      {/* Identity Step */}
+      <View style={styles.statusItem}>
+        <Icon
+          name="face"
+          size={20}
+          color={
+            currentStep === "Identity Verification" ||
+              currentStep === "Location Verification" ||
+              currentStep === "Complete"
+              ? Global.AppTheme.light
+              : Global.AppTheme.primary
+          }
+          style={styles.statusIcon}
+        />
+        <Text
+          style={[
+            styles.statusText,
+            (currentStep === "Identity Verification" ||
+              currentStep === "Location Verification" ||
+              currentStep === "Complete") && styles.statusTextActive,
+          ]}
+        >
+          ID
+        </Text>
+      </View>
+
+      {/* Show Location only if qrscan = true */}
+
     </View>
   );
 };

package/src/hooks/useCountdown.js

@@ -1,42 +1,44 @@
 import { useRef, useState, useEffect, useCallback } from 'react';
-import { Global } from '../utils/Global';
 
 /**
  * Custom hook for a countdown timer with pause/resume functionality.
  *
+ * @param {number} duration - Countdown duration in seconds
  * @param {Function} onExpire - Callback fired when countdown reaches zero.
- * @returns {Object} countdown, startCountdown, resetCountdown, pauseCountdown, resumeCountdown
+ * @returns {Object}
  */
-export const useCountdown = (onExpire) => {
-  const [countdown, setCountdown] = useState(Global.CountdownDuration);
+export const useCountdown = (duration, onExpire) => {
+  const [countdown, setCountdown] = useState(duration);
   const timerRef = useRef(null);
-  const countdownRef = useRef(Global.CountdownDuration);
+  const countdownRef = useRef(duration);
   const isPausedRef = useRef(false);
   const onExpireRef = useRef(onExpire);
 
-  // Update onExpire callback reference
+  // Keep onExpire updated
   useEffect(() => {
     onExpireRef.current = onExpire;
   }, [onExpire]);
 
+  // Update duration dynamically if it changes
+  useEffect(() => {
+    countdownRef.current = duration;
+    setCountdown(duration);
+  }, [duration]);
+
   // Start or restart the countdown
   const startCountdown = useCallback((onExpireCallback) => {
     try {
-      // Reset countdown
-      countdownRef.current = Global.CountdownDuration;
-      setCountdown(Global.CountdownDuration);
+      countdownRef.current = duration;
+      setCountdown(duration);
       isPausedRef.current = false;
 
-      // Clear any existing timer
       if (timerRef.current) {
         clearInterval(timerRef.current);
         timerRef.current = null;
       }
 
-      // Use provided callback or stored one
       const expireCallback = onExpireCallback || onExpireRef.current;
 
-      // Start new timer
       timerRef.current = setInterval(() => {
         if (isPausedRef.current) return;
 
@@ -45,10 +47,7 @@ export const useCountdown = (onExpire) => {
         if (countdownRef.current <= 0) {
           clearInterval(timerRef.current);
           timerRef.current = null;
-
-          if (typeof expireCallback === 'function') {
-            expireCallback();
-          }
+          expireCallback?.();
         } else {
           setCountdown(countdownRef.current);
         }
@@ -56,23 +55,20 @@ export const useCountdown = (onExpire) => {
     } catch (error) {
       console.error('Error in startCountdown:', error);
     }
-  }, []);
+  }, [duration]);
 
-  // Pause the countdown
   const pauseCountdown = useCallback(() => {
     isPausedRef.current = true;
   }, []);
 
-  // Resume the countdown
   const resumeCountdown = useCallback(() => {
     isPausedRef.current = false;
   }, []);
 
-  // Reset countdown to initial duration
   const resetCountdown = useCallback(() => {
     try {
-      countdownRef.current = Global.CountdownDuration;
-      setCountdown(Global.CountdownDuration);
+      countdownRef.current = duration;
+      setCountdown(duration);
       isPausedRef.current = false;
 
       if (timerRef.current) {
@@ -82,15 +78,19 @@ export const useCountdown = (onExpire) => {
     } catch (error) {
       console.error('Error in resetCountdown:', error);
     }
-  }, []);
+  }, [duration]);
 
-  // Get current countdown value
-  const getCurrentCountdown = useCallback(() => countdownRef.current, []);
+  const getCurrentCountdown = useCallback(
+    () => countdownRef.current,
+    []
+  );
 
-  // Check if countdown is paused
-  const isPaused = useCallback(() => isPausedRef.current, []);
+  const isPaused = useCallback(
+    () => isPausedRef.current,
+    []
+  );
 
-  // Clean up on unmount
+  // Cleanup
   useEffect(() => {
     return () => {
       if (timerRef.current) {
@@ -100,13 +100,13 @@ export const useCountdown = (onExpire) => {
     };
   }, []);
 
-  return { 
-    countdown, 
-    startCountdown, 
-    resetCountdown, 
-    pauseCountdown, 
+  return {
+    countdown,
+    startCountdown,
+    resetCountdown,
+    pauseCountdown,
     resumeCountdown,
     getCurrentCountdown,
-    isPaused
+    isPaused,
   };
 };

package/src/hooks/useFaceDetectionFrameProcessor.js

@@ -7,29 +7,7 @@ import {
   initializeFaceAntiSpoof,
   isFaceAntiSpoofAvailable,
 } from 'react-native-vision-camera-spoof-detector';
-
-// Optimized constants - tuned for performance
-const FACE_STABILITY_THRESHOLD = 3;
-const FACE_MOVEMENT_THRESHOLD = 15;
-const FRAME_PROCESSOR_MIN_INTERVAL_MS = 500;
-const MIN_FACE_SIZE = 0.2;
-
-// Blink detection
-const BLINK_THRESHOLD = 0.3;
-const REQUIRED_BLINKS = 3;
-
-// Anti-spoofing
-const ANTI_SPOOF_CONFIDENCE_THRESHOLD = 0.7;
-const REQUIRED_CONSECUTIVE_LIVE_FRAMES = 3;
-
-// Face centering
-const FACE_CENTER_THRESHOLD_X = 0.2;
-const FACE_CENTER_THRESHOLD_Y = 0.15;
-const MIN_FACE_CENTERED_FRAMES = 2;
-
-// Performance optimization constants
-const MAX_FRAME_PROCESSING_TIME_MS = 500;
-const BATCH_UPDATE_THRESHOLD = 3;
+import { Global } from 'react-native-biometric-verifier/src/utils/Global';
 
 export const useFaceDetectionFrameProcessor = ({
   onStableFaceDetected = () => { },
@@ -46,7 +24,7 @@ export const useFaceDetectionFrameProcessor = ({
     landmarkMode: 'none',
     contourMode: 'none',
     classificationMode: livenessLevel === 1 ? 'all' : 'none',
-    minFaceSize: MIN_FACE_SIZE,
+    minFaceSize: Global.MIN_FACE_SIZE,
   });
 
   const isMounted = useRef(true);
@@ -230,8 +208,8 @@ export const useFaceDetectionFrameProcessor = ({
     const frameCenterY = frameHeight / 2;
 
     return (
-      Math.abs(faceCenterX - frameCenterX) <= frameWidth * FACE_CENTER_THRESHOLD_X &&
-      Math.abs(faceCenterY - frameCenterY) <= frameHeight * FACE_CENTER_THRESHOLD_Y
+      Math.abs(faceCenterX - frameCenterX) <= frameWidth * Global.FACE_CENTER_THRESHOLD_X &&
+      Math.abs(faceCenterY - frameCenterY) <= frameHeight * Global.FACE_CENTER_THRESHOLD_Y
     );
   });
 
@@ -243,7 +221,7 @@ export const useFaceDetectionFrameProcessor = ({
       state.flags.captured ||
       isLoading ||
       !state.flags.isActive ||
-      (now - state.lastProcessedTime < FRAME_PROCESSOR_MIN_INTERVAL_MS)
+      (now - state.lastProcessedTime < Global.FACE_MOVEMENT_THRESHOLD)
     );
   });
 
@@ -265,7 +243,7 @@ export const useFaceDetectionFrameProcessor = ({
       }
 
       // Performance guard - don't process if taking too long
-      if (processingStart - frameProcessingStartTime.current < MAX_FRAME_PROCESSING_TIME_MS) {
+      if (processingStart - frameProcessingStartTime.current < Global.MAX_FRAME_PROCESSING_TIME_MS) {
         frame.release?.();
         return;
       }
@@ -348,13 +326,13 @@ export const useFaceDetectionFrameProcessor = ({
 
           if (centered) {
             state.centering.centeredFrames = Math.min(
-              MIN_FACE_CENTERED_FRAMES,
+              Global.MIN_FACE_CENTERED_FRAMES,
               state.centering.centeredFrames + 1
             );
           } else {
             state.centering.centeredFrames = 0;
           }
-          state.flags.isFaceCentered = state.centering.centeredFrames >= MIN_FACE_CENTERED_FRAMES;
+          state.flags.isFaceCentered = state.centering.centeredFrames >= Global.MIN_FACE_CENTERED_FRAMES;
 
           // Anti-spoof detection only when face is centered and single
           if (state.flags.isFaceCentered) {
@@ -366,19 +344,19 @@ export const useFaceDetectionFrameProcessor = ({
                 const isLive = antiSpoofResult.isLive === true;
                 const confidence = antiSpoofResult.combinedScore || antiSpoofResult.neuralNetworkScore || 0;
 
-                if (isLive && confidence > ANTI_SPOOF_CONFIDENCE_THRESHOLD) {
+                if (isLive && confidence > Global.ANTI_SPOOF_CONFIDENCE_THRESHOLD) {
                   state.antiSpoof.consecutiveLiveFrames = Math.min(
-                    REQUIRED_CONSECUTIVE_LIVE_FRAMES,
+                    Global.REQUIRED_CONSECUTIVE_LIVE_FRAMES,
                     state.antiSpoof.consecutiveLiveFrames + 1
                   );
                 } else {
                   state.antiSpoof.consecutiveLiveFrames = Math.max(0, state.antiSpoof.consecutiveLiveFrames - 1);
                 }
-                state.antiSpoof.isLive = state.antiSpoof.consecutiveLiveFrames >= REQUIRED_CONSECUTIVE_LIVE_FRAMES;
+                state.antiSpoof.isLive = state.antiSpoof.consecutiveLiveFrames >= Global.REQUIRED_CONSECUTIVE_LIVE_FRAMES;
                 state.antiSpoof.confidence = confidence;
 
                 // Batch anti-spoof updates
-                if (state.performance.batchCounter % BATCH_UPDATE_THRESHOLD === 0) {
+                if (state.performance.batchCounter % Global.BATCH_UPDATE_THRESHOLD === 0) {
                   runOnAntiSpoof({
                     isLive: state.antiSpoof.isLive,
                     confidence: state.antiSpoof.confidence,
@@ -410,7 +388,7 @@ export const useFaceDetectionFrameProcessor = ({
             else if (newLivenessStep === 1) {
               const leftEye = face.leftEyeOpenProbability ?? 1;
               const rightEye = face.rightEyeOpenProbability ?? 1;
-              const eyesClosed = leftEye < BLINK_THRESHOLD && rightEye < BLINK_THRESHOLD;
+              const eyesClosed = leftEye < Global.BLINK_THRESHOLD && rightEye < Global.BLINK_THRESHOLD;
 
               if (eyesClosed && !newEyeClosed) {
                 newBlinkCount++;
@@ -420,7 +398,7 @@ export const useFaceDetectionFrameProcessor = ({
                 newEyeClosed = false;
               }
 
-              if (newBlinkCount >= REQUIRED_BLINKS) {
+              if (newBlinkCount >= Global.REQUIRED_BLINKS) {
                 newLivenessStep = 2;
                 runOnLiveness(newLivenessStep);
               }
@@ -434,7 +412,7 @@ export const useFaceDetectionFrameProcessor = ({
           } else {
             const dx = Math.abs(x - state.faceTracking.lastX);
             const dy = Math.abs(y - state.faceTracking.lastY);
-            newStableCount = (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD) 
+            newStableCount = (dx < Global.FACE_MOVEMENT_THRESHOLD && dy < Global.FACE_MOVEMENT_THRESHOLD) 
               ? state.faceTracking.stableCount + 1 
               : 1;
           }
@@ -451,10 +429,10 @@ export const useFaceDetectionFrameProcessor = ({
           state.flags.eyeClosed = newEyeClosed;
           state.performance.batchCounter++;
 
-          const progress = Math.min(100, (newStableCount / FACE_STABILITY_THRESHOLD) * 100);
+          const progress = Math.min(100, (newStableCount / Global.FACE_STABILITY_THRESHOLD) * 100);
           
           // Batch face updates
-          if (state.performance.batchCounter % BATCH_UPDATE_THRESHOLD === 0) {
+          if (state.performance.batchCounter % Global.BATCH_UPDATE_THRESHOLD === 0) {
             runOnFaces(1, progress, newLivenessStep, state.flags.isFaceCentered, {
               isLive: state.antiSpoof.isLive,
               confidence: state.antiSpoof.confidence,
@@ -466,14 +444,14 @@ export const useFaceDetectionFrameProcessor = ({
 
           // Capture condition - optimized
           const shouldCapture = !state.flags.captured && (
-            newStableCount >= FACE_STABILITY_THRESHOLD &&
+            newStableCount >= Global.FACE_STABILITY_THRESHOLD &&
             state.antiSpoof.isLive &&
-            state.antiSpoof.consecutiveLiveFrames >= REQUIRED_CONSECUTIVE_LIVE_FRAMES &&
+            state.antiSpoof.consecutiveLiveFrames >= Global.REQUIRED_CONSECUTIVE_LIVE_FRAMES &&
             state.flags.isFaceCentered &&
             (localState.livenessLevel === 0 || (
               localState.livenessLevel === 1 && 
               newLivenessStep === 2 && 
-              newBlinkCount >= REQUIRED_BLINKS
+              newBlinkCount >= Global.REQUIRED_BLINKS
             ))
           );
 

package/src/index.js

@@ -16,8 +16,6 @@ import {
   Animated,
 } from "react-native";
 import Icon from "react-native-vector-icons/MaterialIcons";
-import { useNavigation } from "@react-navigation/native";
-
 // Custom hooks
 import { useCountdown } from "./hooks/useCountdown";
 import { useGeolocation } from "./hooks/useGeolocation";
@@ -40,11 +38,9 @@ import CaptureImageWithoutEdit from "./components/CaptureImageWithoutEdit";
 import StepIndicator from "./components/StepIndicator";
 
 const BiometricModal = React.memo(
-  ({ data, qrscan = false, callback, apiurl, onclose, frameProcessorFps, livenessLevel, fileurl, imageurl }) => {
-    const navigation = useNavigation();
-
+  ({ data, depkey, qrscan = false, callback, apiurl, onclose, frameProcessorFps, livenessLevel, fileurl, imageurl, navigation, MaxDistanceMeters = 50, duration = 100 }) => {
     // Custom hooks
-    const { countdown, startCountdown, resetCountdown, pauseCountdown, resumeCountdown } = useCountdown();
+    const { countdown, startCountdown, resetCountdown, pauseCountdown, resumeCountdown } = useCountdown(duration);
     const { requestLocationPermission, getCurrentLocation } = useGeolocation();
     const { convertImageToBase64 } = useImageProcessing();
     const { notification, fadeAnim, slideAnim, notifyMessage, clearNotification } = useNotifyMessage();
@@ -52,13 +48,14 @@ const BiometricModal = React.memo(
 
     // State
     const [modalVisible, setModalVisible] = useState(false);
-    const [cameraType, setCameraType] = useState("front");
+    const [cameraType, setCameraType] = useState("back"); // Start with back camera for QR scan
     const [state, setState] = useState({
       isLoading: false,
       loadingType: Global.LoadingTypes.none,
       currentStep: "Start",
       employeeData: null,
-      animationState: Global.AnimationStates.faceScan,
+      animationState: Global.AnimationStates.qrScan, // Start with QR scan animation
+      qrData: null, // Store QR data for later use in face recognition
     });
 
     // Refs
@@ -67,7 +64,6 @@ const BiometricModal = React.memo(
     const responseRef = useRef(null);
     const processedRef = useRef(false);
     const resetTimeoutRef = useRef(null);
-
     // Animation values
     const iconScaleAnim = useRef(new Animated.Value(1)).current;
     const iconOpacityAnim = useRef(new Animated.Value(0)).current;
@@ -156,7 +152,8 @@ const BiometricModal = React.memo(
         loadingType: Global.LoadingTypes.none,
         currentStep: "Start",
         employeeData: null,
-        animationState: Global.AnimationStates.faceScan,
+        animationState: Global.AnimationStates.qrScan,
+        qrData: null,
       });
 
       setModalVisible(false);
@@ -214,112 +211,7 @@ const BiometricModal = React.memo(
       return true;
     }, [apiurl, handleProcessError]);
 
-    // Face scan upload
-    const uploadFaceScan = useCallback(
-      async (selfie) => {
-        if (!validateApiUrl()) return;
-        const currentData = dataRef.current;
-
-        if (!currentData) {
-          handleProcessError("Employee data not found.");
-          return;
-        }
-
-        updateState({
-          isLoading: true,
-          loadingType: Global.LoadingTypes.faceRecognition,
-          animationState: Global.AnimationStates.processing,
-        });
-
-        InteractionManager.runAfterInteractions(async () => {
-          let base64;
-
-          try {
-            updateState({
-              loadingType: Global.LoadingTypes.imageProcessing,
-            });
-
-            base64 = await convertImageToBase64(selfie?.uri);
-          } catch (err) {
-            console.error("Image conversion failed:", err);
-            handleProcessError("Image conversion failed.", err);
-            return;
-          }
-
-          if (!base64) {
-            handleProcessError("Failed to process image.");
-            return;
-          }
-
-          try {
-            const body = { image: base64 };
-            const header = { faceid: currentData };
-            const buttonapi = `${apiurl}python/recognize`;
-
-            updateState({
-              loadingType: Global.LoadingTypes.networkRequest,
-            });
-
-            const response = await networkServiceCall(
-              "POST",
-              buttonapi,
-              header,
-              body
-            );
-
-            if (response?.httpstatus === 200) {
-              responseRef.current = response;
-
-              updateState({
-                employeeData: response.data?.data || null,
-                animationState: Global.AnimationStates.success,
-                isLoading: false,
-                loadingType: Global.LoadingTypes.none,
-              });
-
-              notifyMessage("Identity verified successfully!", "success");
-
-              if (qrscan) {
-                setTimeout(() => startQRCodeScan(), 1200);
-              } else {
-                safeCallback(responseRef.current);
-
-                if (resetTimeoutRef.current) {
-                  clearTimeout(resetTimeoutRef.current);
-                }
-
-                resetTimeoutRef.current = setTimeout(() => {
-                  resetState();
-                }, 1200);
-              }
-            } else {
-              handleProcessError(
-                response?.data?.message ||
-                "Face not recognized. Please try again."
-              );
-            }
-          } catch (error) {
-            console.error("Network request failed:", error);
-            handleProcessError(
-              "Connection error. Please check your network.",
-              error
-            );
-          }
-        });
-      },
-      [
-        convertImageToBase64,
-        notifyMessage,
-        qrscan,
-        resetState,
-        updateState,
-        validateApiUrl,
-        safeCallback,
-        handleProcessError
-      ]
-    );
-
-    // QR code processing
+    // QR code processing - FIRST STEP
     const handleQRScanned = useCallback(
       async (qrCodeData) => {
         if (!validateApiUrl()) return;
@@ -356,14 +248,12 @@ const BiometricModal = React.memo(
 
           const location = await getCurrentLocation();
 
-          const [latStr, lngStr] = qrString.split(",");
+          const [latStr, lngStr, qrkey] = qrString.split(",");
           const lat = parseFloat(latStr);
           const lng = parseFloat(lngStr);
           const validCoords = !isNaN(lat) && !isNaN(lng);
-          const validDev =
-            !isNaN(location?.latitude) && !isNaN(location?.longitude);
-
-          if (validCoords && validDev) {
+          const validDev = !isNaN(location?.latitude) && !isNaN(location?.longitude);
+          if (validCoords && validDev && qrkey === depkey) {
             updateState({
               loadingType: Global.LoadingTypes.calculateDistance,
             });
@@ -374,8 +264,7 @@ const BiometricModal = React.memo(
               location.latitude,
               location.longitude
             );
-
-            if (distance <= Global.MaxDistanceMeters) {
+            if (distance <= MaxDistanceMeters) {
               const locationDetails = {
                 qrLocation: {
                   latitude: lat,
@@ -391,27 +280,24 @@ const BiometricModal = React.memo(
                 verifiedAt: new Date().toISOString(),
               };
 
+              // Store location details and QR data for face recognition
               responseRef.current = {
-                ...(responseRef.current || {}), // existing faceData
                 location: locationDetails,
               };
 
-              safeCallback(responseRef.current);
-
-              notifyMessage("Location verified successfully!", "success");
-
+              // Store QR data in state for face recognition step
               updateState({
+                qrData: qrString,
                 animationState: Global.AnimationStates.success,
                 isLoading: false,
                 loadingType: Global.LoadingTypes.none,
               });
 
-              if (resetTimeoutRef.current) {
-                clearTimeout(resetTimeoutRef.current);
-              }
+              notifyMessage("Location verified successfully!", "success");
 
-              resetTimeoutRef.current = setTimeout(() => {
-                resetState();
+              // Start face recognition after a brief delay
+              setTimeout(() => {
+                startFaceRecognition();
               }, 1200);
             }
             else {
@@ -434,49 +320,165 @@ const BiometricModal = React.memo(
         getCurrentLocation,
         notifyMessage,
         requestLocationPermission,
+        updateState,
+        validateApiUrl,
+        handleProcessError
+      ]
+    );
+
+    // Face scan upload - SECOND STEP
+    const uploadFaceScan = useCallback(
+      async (selfie) => {
+        if (!validateApiUrl()) return;
+
+        // Check if QR scan was completed successfully
+        if (!state.qrData) {
+          handleProcessError("Please complete QR scan first.");
+          return;
+        }
+
+        const currentData = dataRef.current;
+
+        if (!currentData) {
+          handleProcessError("Employee data not found.");
+          return;
+        }
+
+        updateState({
+          isLoading: true,
+          loadingType: Global.LoadingTypes.faceRecognition,
+          animationState: Global.AnimationStates.processing,
+        });
+
+        InteractionManager.runAfterInteractions(async () => {
+          let base64;
+
+          try {
+            updateState({
+              loadingType: Global.LoadingTypes.imageProcessing,
+            });
+
+            base64 = await convertImageToBase64(selfie?.uri);
+          } catch (err) {
+            console.error("Image conversion failed:", err);
+            handleProcessError("Image conversion failed.", err);
+            return;
+          }
+
+          if (!base64) {
+            handleProcessError("Failed to process image.");
+            return;
+          }
+
+          try {
+            const body = { image: base64 };
+            const header = { faceid: currentData };
+            const buttonapi = `${apiurl}python/recognize`;
+
+            updateState({
+              loadingType: Global.LoadingTypes.networkRequest,
+            });
+
+            const response = await networkServiceCall(
+              "POST",
+              buttonapi,
+              header,
+              body
+            );
+
+            if (response?.httpstatus === 200) {
+              // Combine face recognition response with QR location data
+              responseRef.current = {
+                ...responseRef.current, // Contains location data from QR scan
+                ...response.data?.data || {},
+                faceRecognition: response.data?.data || null,
+              };
+
+              updateState({
+                employeeData: response.data?.data || null,
+                animationState: Global.AnimationStates.success,
+                isLoading: false,
+                loadingType: Global.LoadingTypes.none,
+              });
+
+              notifyMessage("Identity verified successfully!", "success");
+
+              // Call the callback with combined data
+              safeCallback(responseRef.current);
+
+              if (resetTimeoutRef.current) {
+                clearTimeout(resetTimeoutRef.current);
+              }
+
+              resetTimeoutRef.current = setTimeout(() => {
+                resetState();
+              }, 1200);
+            } else {
+              handleProcessError(
+                response?.data?.message ||
+                "Face not recognized. Please try again."
+              );
+            }
+          } catch (error) {
+            console.error("Network request failed:", error);
+            handleProcessError(
+              "Connection error. Please check your network.",
+              error
+            );
+          }
+        });
+      },
+      [
+        convertImageToBase64,
+        notifyMessage,
         resetState,
         updateState,
         validateApiUrl,
         safeCallback,
-        handleProcessError
+        handleProcessError,
+        state.qrData
       ]
     );
 
     // Image capture handler
     const handleImageCapture = useCallback(
       async (capturedData) => {
-        if (state.currentStep === "Identity Verification") {
-          uploadFaceScan(capturedData);
-        } else if (state.currentStep === "Location Verification") {
+        if (state.currentStep === "Location Verification") {
           handleQRScanned(capturedData);
+        } else if (state.currentStep === "Identity Verification") {
+          uploadFaceScan(capturedData);
         }
       },
       [state.currentStep, uploadFaceScan, handleQRScanned]
     );
 
-    // Start face scan
-    const handleStartFaceScan = useCallback(() => {
+    // Start QR code scan - FIRST STEP
+    const handleStartQRScan = useCallback(() => {
       updateState({
-        currentStep: "Identity Verification",
-        animationState: Global.AnimationStates.faceScan,
+        currentStep: "Location Verification",
+        animationState: Global.AnimationStates.qrScan,
       });
-      setCameraType("front");
+      setCameraType("back");
     }, [updateState]);
 
-    // Start QR code scan
-    const startQRCodeScan = useCallback(() => {
+    // Start face recognition - SECOND STEP
+    const startFaceRecognition = useCallback(() => {
       updateState({
-        currentStep: "Location Verification",
-        animationState: Global.AnimationStates.qrScan,
+        currentStep: "Identity Verification",
+        animationState: Global.AnimationStates.faceScan,
       });
-      setCameraType("back");
+      setCameraType("front");
     }, [updateState]);
 
     // Start the verification process
     const startProcess = useCallback(() => {
       startCountdown(handleCountdownFinish);
-      handleStartFaceScan();
-    }, [handleCountdownFinish, handleStartFaceScan, startCountdown]);
+      if (qrscan) {
+        handleStartQRScan();
+      } else {
+        startFaceRecognition();
+      }
+    }, [handleCountdownFinish, handleStartQRScan, startCountdown, startFaceRecognition]);
 
     // Open modal when data is received
     useEffect(() => {
@@ -485,7 +487,7 @@ const BiometricModal = React.memo(
         setModalVisible(true);
         startProcess();
       }
-    }, [data, modalVisible, startProcess]);
+    }, [data, modalVisible, startProcess, qrscan]);
 
     // Determine if camera should be shown
     const shouldShowCamera =
@@ -539,7 +541,10 @@ const BiometricModal = React.memo(
           </View>
 
           <View style={styles.topContainerstep}>
-            <StepIndicator currentStep={state.currentStep} qrscan={qrscan} />
+            <StepIndicator
+              currentStep={state.currentStep}
+              qrscan={qrscan}
+            />
           </View>
 
           {state.employeeData && (
@@ -558,7 +563,7 @@ const BiometricModal = React.memo(
 
           <View style={styles.timerContainer}>
             <CountdownTimer
-              duration={Global.CountdownDuration}
+              duration={duration}
               currentTime={countdown}
             />
           </View>

package/src/utils/Global.js

@@ -42,7 +42,27 @@ export class Global {
     format: 'JPEG', // 'PNG' or 'JPEG'
     quality: 85, // 0–100
   };
+  // Optimized constants - tuned for performance
+  static FACE_STABILITY_THRESHOLD = 3;
+  static FACE_MOVEMENT_THRESHOLD = 15;
+  static FRAME_PROCESSOR_MIN_INTERVAL_MS = 500;
+  static MIN_FACE_SIZE = 0.2;
+
+  // Blink detection
+  static BLINK_THRESHOLD = 0.3;
+  static REQUIRED_BLINKS = 3;
+
+  // Anti-spoofing
+  static ANTI_SPOOF_CONFIDENCE_THRESHOLD = 0.7;
+  static REQUIRED_CONSECUTIVE_LIVE_FRAMES = 3;
+
+  // Face centering
+  static FACE_CENTER_THRESHOLD_X = 0.2;
+  static FACE_CENTER_THRESHOLD_Y = 0.15;
+  static MIN_FACE_CENTERED_FRAMES = 2;
+
+  // Performance optimization constants
+  static MAX_FRAME_PROCESSING_TIME_MS = 500;
+  static BATCH_UPDATE_THRESHOLD = 3;
 
-  static CountdownDuration = 100; // seconds
-  static MaxDistanceMeters = 100; // Max allowed distance for QR verification
 }