react-native-biometric-verifier 0.0.55 → 0.0.57

package/src/index.js

@@ -3,8 +3,7 @@ import React, {
   useEffect,
   useRef,
   useCallback,
-  useImperativeHandle,
-  forwardRef,
+  useMemo,
 } from "react";
 import {
   View,
@@ -17,8 +16,7 @@ import {
   Animated,
 } from "react-native";
 import Icon from "react-native-vector-icons/MaterialIcons";
-
-// Custom hooks - Removed unnecessary ones
+// Custom hooks
 import { useCountdown } from "./hooks/useCountdown";
 import { useGeolocation } from "./hooks/useGeolocation";
 import { useImageProcessing } from "./hooks/useImageProcessing";
@@ -26,6 +24,7 @@ import { useNotifyMessage } from "./hooks/useNotifyMessage";
 import { useSafeCallback } from "./hooks/useSafeCallback";
 
 // Utils
+import { getDistanceInMeters } from "./utils/distanceCalculator";
 import { Global } from "./utils/Global";
 import networkServiceCall from "./utils/NetworkServiceCall";
 import { getLoaderGif } from "./utils/getLoaderGif";
@@ -38,629 +37,511 @@ import { Notification } from "./components/Notification";
 import CaptureImageWithoutEdit from "./components/CaptureImageWithoutEdit";
 import StepIndicator from "./components/StepIndicator";
 
-const BiometricModal = forwardRef(({
-  data,
-  depkey,
-  qrscan = false,
-  callback,
-  apiurl,
-  onclose,
-  frameProcessorFps,
-  livenessLevel,
-  fileurl,
-  imageurl,
-  navigation,
-  MaxDistanceMeters = 30,
-  duration = 100,
-  antispooflevel,
-}, ref) => {
-  // Custom hooks - Initialize notification hook first
-  const { notification, fadeAnim, slideAnim, notifyMessage, clearNotification } = useNotifyMessage();
-  const { countdown, startCountdown, resetCountdown, pauseCountdown, resumeCountdown } = useCountdown(duration);
-
-  // Only keep geolocation hook
-  const {
-    requestLocationPermission,
-    getCurrentLocation,
-    stopLocationWatching,
-    calculateSafeDistance,
-  } = useGeolocation(notifyMessage);
-
-  const { convertImageToBase64 } = useImageProcessing();
-  const safeCallback = useSafeCallback(callback, notifyMessage);
-
-  // State - Simplified
-  const [modalVisible, setModalVisible] = useState(false);
-  const [cameraType, setCameraType] = useState("back");
-  const [state, setState] = useState({
-    isLoading: false,
-    loadingType: Global.LoadingTypes.none,
-    currentStep: "Start",
-    employeeData: null,
-    animationState: Global.AnimationStates.qrScan,
-    qrData: null,
-    // Removed: wifiReferenceScan
-  });
-
-  // Refs
-  const dataRef = useRef(data);
-  const mountedRef = useRef(true);
-  const responseRef = useRef(null);
-  const processedRef = useRef(false);
-  const resetTimeoutRef = useRef(null);
-  // Removed: bleScanTimeoutRef, wifiScanTimeoutRef
-
-  // Animation values
-  const iconScaleAnim = useRef(new Animated.Value(1)).current;
-  const iconOpacityAnim = useRef(new Animated.Value(0)).current;
-
-  // Expose methods to parent via ref
-  useImperativeHandle(ref, () => ({
-    reset: resetState,
-    start: startProcess,
-    close: resetState,
-    getStatus: () => state,
-  }));
-
-  // Cleanup on unmount - Simplified
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false;
+const BiometricModal = React.memo(
+  ({ data, depKey, qrscan = false, callback, apiurl, onclose, frameProcessorFps, livenessLevel, fileurl, imageurl, navigation, duration = 100, MaxDistanceMeters = 30, antispooflevel }) => {
 
-      if (resetTimeoutRef.current) {
-        clearTimeout(resetTimeoutRef.current);
-      }
+    // Custom hooks
+    const { countdown, startCountdown, resetCountdown, pauseCountdown, resumeCountdown } = useCountdown(duration);
+    const { requestLocationPermission, getCurrentLocation } = useGeolocation();
+    const { convertImageToBase64 } = useImageProcessing();
+    const { notification, fadeAnim, slideAnim, notifyMessage, clearNotification } = useNotifyMessage();
+    const safeCallback = useSafeCallback(callback, notifyMessage);
 
-      stopLocationWatching();
-      clearNotification();
-    };
-  }, [stopLocationWatching, clearNotification]);
-
-  // Update dataRef when data changes
-  useEffect(() => {
-    dataRef.current = data;
-  }, [data]);
-
-  // Animation helper
-  const animateIcon = useCallback(() => {
-    iconScaleAnim.setValue(1);
-    iconOpacityAnim.setValue(0);
-
-    Animated.sequence([
-      Animated.parallel([
-        Animated.timing(iconOpacityAnim, {
-          toValue: 1,
-          duration: 300,
-          useNativeDriver: true,
-        }),
+    // State
+    const [modalVisible, setModalVisible] = useState(false);
+    const [cameraType, setCameraType] = useState("front");
+    const [state, setState] = useState({
+      isLoading: false,
+      loadingType: Global.LoadingTypes.none,
+      currentStep: "Start",
+      employeeData: null,
+      animationState: Global.AnimationStates.faceScan,
+    });
+
+    // Refs
+    const dataRef = useRef(data);
+    const mountedRef = useRef(true);
+    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;
+
+    // Cleanup on unmount
+    useEffect(() => {
+      return () => {
+        mountedRef.current = false;
+
+        if (resetTimeoutRef.current) {
+          clearTimeout(resetTimeoutRef.current);
+        }
+
+        clearNotification();
+      };
+    }, []);
+
+    // Update dataRef when data changes
+    useEffect(() => {
+      dataRef.current = data;
+    }, [data]);
+
+    // Animation helper
+    const animateIcon = useCallback(() => {
+      // Reset animation
+      iconScaleAnim.setValue(1);
+      iconOpacityAnim.setValue(0);
+
+      // Start animation sequence
+      Animated.sequence([
+        Animated.parallel([
+          Animated.timing(iconOpacityAnim, {
+            toValue: 1,
+            duration: 300,
+            useNativeDriver: true,
+          }),
+          Animated.spring(iconScaleAnim, {
+            toValue: 1.2,
+            friction: 3,
+            useNativeDriver: true,
+          }),
+        ]),
         Animated.spring(iconScaleAnim, {
-          toValue: 1.2,
-          friction: 3,
+          toValue: 1,
+          friction: 5,
           useNativeDriver: true,
         }),
-      ]),
-      Animated.spring(iconScaleAnim, {
-        toValue: 1,
-        friction: 5,
-        useNativeDriver: true,
-      }),
-    ]).start();
-  }, [iconScaleAnim, iconOpacityAnim]);
-
-  // State update helper
-  const updateState = useCallback((newState) => {
-    if (mountedRef.current) {
-      setState((prev) => {
-        const merged = { ...prev, ...newState };
-
-        if (JSON.stringify(prev) !== JSON.stringify(merged)) {
-          if (newState.isLoading !== undefined) {
-            if (newState.isLoading) {
-              pauseCountdown();
-            } else {
-              resumeCountdown();
+      ]).start();
+    }, [iconScaleAnim, iconOpacityAnim]);
+
+    // State update helper
+    const updateState = useCallback((newState) => {
+      if (mountedRef.current) {
+        setState((prev) => {
+          const merged = { ...prev, ...newState };
+
+          if (JSON.stringify(prev) !== JSON.stringify(merged)) {
+            // Pause/resume countdown based on loading state
+            if (newState.isLoading !== undefined) {
+              if (newState.isLoading) {
+                pauseCountdown();
+              } else {
+                resumeCountdown();
+              }
             }
-          }
 
-          if (newState.currentStep && newState.currentStep !== prev.currentStep) {
-            animateIcon();
-          }
+            // Animate icon when step changes
+            if (newState.currentStep && newState.currentStep !== prev.currentStep) {
+              animateIcon();
+            }
 
-          return merged;
-        }
+            return merged;
+          }
 
-        return prev;
-      });
-    }
-  }, [animateIcon, pauseCountdown, resumeCountdown]);
+          return prev;
+        });
+      }
+    }, [animateIcon, pauseCountdown, resumeCountdown]);
 
-  // Reset state helper - Simplified
-  const resetState = useCallback(() => {
-    if (onclose) {
+    // Reset state helper
+    const resetState = useCallback(() => {
       onclose(false);
-    }
 
-    setState({
-      isLoading: false,
-      loadingType: Global.LoadingTypes.none,
-      currentStep: "Start",
-      employeeData: null,
-      animationState: Global.AnimationStates.qrScan,
-      qrData: null,
-    });
-
-    setModalVisible(false);
-    processedRef.current = false;
-    resetCountdown();
-    stopLocationWatching();
-    clearNotification();
-
-    if (resetTimeoutRef.current) {
-      clearTimeout(resetTimeoutRef.current);
-      resetTimeoutRef.current = null;
-    }
-  }, [resetCountdown, stopLocationWatching, clearNotification, onclose]);
-
-  // Error handler
-  const handleProcessError = useCallback(
-    (message, errorObj = null) => {
-      if (errorObj) {
-        console.error("Process Error:", errorObj);
-      }
-
-      notifyMessage(message, "error");
-      updateState({
-        animationState: Global.AnimationStates.error,
+      setState({
         isLoading: false,
         loadingType: Global.LoadingTypes.none,
+        currentStep: "Start",
+        employeeData: null,
+        animationState: Global.AnimationStates.faceScan,
       });
 
+      setModalVisible(false);
+      processedRef.current = false;
+      resetCountdown();
+      clearNotification();
+
       if (resetTimeoutRef.current) {
         clearTimeout(resetTimeoutRef.current);
+        resetTimeoutRef.current = null;
       }
+    }, [resetCountdown, clearNotification]);
 
-      resetTimeoutRef.current = setTimeout(() => {
-        resetState();
-      }, 1200);
-    },
-    [notifyMessage, resetState, updateState]
-  );
-
-  // Countdown finish handler
-  const handleCountdownFinish = useCallback(() => {
-    handleProcessError("Time is up! Please try again.");
-
-    if (navigation?.canGoBack?.()) {
-      navigation.goBack();
-    }
-  }, [handleProcessError, navigation]);
-
-  // API URL validation
-  const validateApiUrl = useCallback(() => {
-    if (!apiurl || typeof apiurl !== "string") {
-      handleProcessError("Invalid API URL configuration.");
-      return false;
-    }
-
-    return true;
-  }, [apiurl, handleProcessError]);
-
-  // Simplified QR scanning handler - GPS + Key verification only
-  const handleQRScanned = useCallback(
-    async (qrCodeData) => {
-      if (!validateApiUrl()) return;
-
-      updateState({
-        animationState: Global.AnimationStates.processing,
-        isLoading: true,
-        loadingType: Global.LoadingTypes.locationVerification,
-      });
-
-      try {
-        // 1. Request location permission
-        updateState({ loadingType: Global.LoadingTypes.locationPermission });
-        const hasLocationPermission = await requestLocationPermission();
-        if (!hasLocationPermission) {
-          handleProcessError("Location permission not granted.");
-          return;
-        }
-
-        // 2. Parse QR data with validation
-        const qrString = typeof qrCodeData === "object" ? qrCodeData?.data : qrCodeData;
-        if (!qrString || typeof qrString !== "string") {
-          handleProcessError("Invalid QR code. Please try again.");
-          return;
+    // Error handler
+    const handleProcessError = useCallback(
+      (message, errorObj = null) => {
+        if (errorObj) {
+          console.error("Process Error:", errorObj);
         }
 
-        // 3. Parse and validate QR coordinates
-        const parts = qrString.split(",");
+        notifyMessage(message, "error");
+        updateState({
+          animationState: Global.AnimationStates.error,
+          isLoading: false,
+          loadingType: Global.LoadingTypes.none,
+        });
 
-        if (parts.length < 3) {
-          handleProcessError("Invalid QR format. Expected: latitude,longitude,key");
-          return;
+        if (resetTimeoutRef.current) {
+          clearTimeout(resetTimeoutRef.current);
         }
 
-        const latStr = parts[0];
-        const lngStr = parts[1];
-        const qrDepKey = parts[2];
-        const qrAccuracy = parts.length > 3 ? parseFloat(parts[3]) : 5;
+        resetTimeoutRef.current = setTimeout(() => {
+          resetState();
+        }, 1200);
+      },
+      [notifyMessage, resetState, updateState]
+    );
 
-        const qrLat = parseFloat(latStr);
-        const qrLng = parseFloat(lngStr);
+    // Countdown finish handler
+    const handleCountdownFinish = useCallback(() => {
+      handleProcessError("Time is up! Please try again.");
 
-        if (isNaN(qrLat) || isNaN(qrLng)) {
-          handleProcessError("Invalid coordinates in QR code.");
-          return;
-        }
+      if (navigation.canGoBack()) {
+        navigation.goBack();
+      }
+    }, [handleProcessError, navigation]);
 
-        // 4. Get high-accuracy location
-        updateState({ loadingType: Global.LoadingTypes.gettingLocation });
+    // API URL validation
+    const validateApiUrl = useCallback(() => {
+      if (!apiurl || typeof apiurl !== "string") {
+        handleProcessError("Invalid API URL configuration.");
+        return false;
+      }
 
-        let location;
-        try {
-          location = await getCurrentLocation();
-        } catch (locationError) {
-          console.error('Location error:', locationError);
-          handleProcessError("Failed to get location. Please try again.");
-          return;
-        }
+      return true;
+    }, [apiurl, handleProcessError]);
 
-        // Validate location object
-        if (!location || typeof location !== 'object') {
-          handleProcessError("Invalid location data received.");
-          return;
-        }
+    // Face scan upload
+    const uploadFaceScan = useCallback(
+      async (selfie) => {
+        if (!validateApiUrl()) return;
+        const currentData = dataRef.current;
 
-        // Validate location coordinates
-        if (typeof location.latitude !== 'number' || typeof location.longitude !== 'number' ||
-          isNaN(location.latitude) || isNaN(location.longitude)) {
-          handleProcessError("Invalid GPS coordinates received.");
+        if (!currentData) {
+          handleProcessError("Employee data not found.");
           return;
         }
 
-        // Validate location accuracy
-        if (location.accuracy > 50) {
-          notifyMessage(`Location accuracy is ${location.accuracy.toFixed(1)}m. For best results, move to an open area.`, 'warning');
-        }
-
-        // 5. Calculate distance using safe calculation
-        updateState({ loadingType: Global.LoadingTypes.calculateDistance });
-
-        const distance = calculateSafeDistance(
-          { latitude: qrLat, longitude: qrLng },
-          { latitude: location.latitude, longitude: location.longitude }
-        );
+        updateState({
+          isLoading: true,
+          loadingType: Global.LoadingTypes.faceRecognition,
+          animationState: Global.AnimationStates.processing,
+        });
 
-        // Validate distance calculation
-        if (distance === Infinity || isNaN(distance)) {
-          handleProcessError("Failed to calculate distance. Please try again.");
-          return;
-        }
+        InteractionManager.runAfterInteractions(async () => {
+          let base64;
 
-        const distanceWithinThreshold = distance <= MaxDistanceMeters;
-
-        // Simple verification criteria - GPS + Key only
-        const verificationPassed = distanceWithinThreshold && qrDepKey === depkey;
-
-        if (verificationPassed) {
-          const locationDetails = {
-            qrLocation: {
-              latitude: qrLat,
-              longitude: qrLng,
-              accuracy: qrAccuracy
-            },
-            deviceLocation: {
-              latitude: location.latitude,
-              longitude: location.longitude,
-              altitude: location.altitude || 0,
-              accuracy: location.accuracy,
-              speed: location.speed || 0,
-              heading: location.heading || 0,
-              timestamp: location.timestamp || Date.now()
-            },
-            distanceMeters: distance,
-            accuracyBuffer: MaxDistanceMeters,
-            verified: true,
-            verificationMethod: "GPS+Key",
-            verifiedAt: new Date().toISOString(),
-            locationMethod: location.provider || 'unknown',
-            qrData: qrString,
-            qrKey: qrDepKey
-          };
-
-          responseRef.current = { location: locationDetails };
+          try {
+            updateState({
+              loadingType: Global.LoadingTypes.imageProcessing,
+            });
 
-          updateState({
-            qrData: qrString,
-            animationState: Global.AnimationStates.success,
-            isLoading: false,
-            loadingType: Global.LoadingTypes.none,
-          });
+            base64 = await convertImageToBase64(selfie?.uri);
+          } catch (err) {
+            console.error("Image conversion failed:", err);
+            handleProcessError("Image conversion failed.", err);
+            return;
+          }
 
-          const successMessage = `Location verified! Distance: ${distance.toFixed(1)}m (±${Math.max(location.accuracy || 0, qrAccuracy).toFixed(1)}m)`;
-          notifyMessage(successMessage, "success");
-          setTimeout(() => startFaceRecognition(), 1200);
-        } else {
-          let errorMsg = `Verification failed: ${distance.toFixed(1)}m away`;
-          if (qrDepKey !== depkey) errorMsg += " (Key mismatch)";
-          handleProcessError(errorMsg);
-        }
-      } catch (error) {
-        console.error("Location verification failed:", error);
-        handleProcessError("Unable to verify location. Please try again.", error);
-      }
-    },
-    [
-      validateApiUrl,
-      updateState,
-      requestLocationPermission,
-      getCurrentLocation,
-      notifyMessage,
-      handleProcessError,
-      startFaceRecognition,
-      depkey,
-      MaxDistanceMeters,
-      calculateSafeDistance,
-    ]
-  );
-
-  // Face scan upload - SECOND STEP (simplified, no WiFi revalidation)
-  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;
-      }
+          if (!base64) {
+            handleProcessError("Failed to process image.");
+            return;
+          }
 
-      const currentData = dataRef.current;
+          try {
+            const body = { image: base64 };
+            const header = { faceid: currentData };
+            const buttonapi = `${apiurl}python/recognize`;
 
-      if (!currentData) {
-        handleProcessError("Employee data not found.");
-        return;
-      }
+            updateState({
+              loadingType: Global.LoadingTypes.networkRequest,
+            });
 
-      updateState({
-        isLoading: true,
-        loadingType: Global.LoadingTypes.faceRecognition,
-        animationState: Global.AnimationStates.processing,
-      });
+            const response = await networkServiceCall(
+              "POST",
+              buttonapi,
+              header,
+              body
+            );
 
-      InteractionManager.runAfterInteractions(async () => {
-        let base64;
+            if (response?.httpstatus === 200) {
+              responseRef.current = {
+                ...responseRef.current,
+                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");
+
+              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
+    const handleQRScanned = useCallback(
+      async (qrCodeData) => {
+        if (!validateApiUrl()) return;
+
+        updateState({
+          animationState: Global.AnimationStates.processing,
+          isLoading: true,
+          loadingType: Global.LoadingTypes.locationVerification,
+        });
 
         try {
           updateState({
-            loadingType: Global.LoadingTypes.imageProcessing,
+            loadingType: Global.LoadingTypes.locationPermission,
           });
 
-          base64 = await convertImageToBase64(selfie?.uri);
-        } catch (err) {
-          console.error("Image conversion failed:", err);
-          handleProcessError("Image conversion failed.", err);
-          return;
-        }
+          const hasPermission = await requestLocationPermission();
 
-        if (!base64) {
-          handleProcessError("Failed to process image.");
-          return;
-        }
+          if (!hasPermission) {
+            handleProcessError("Location permission not granted.");
+            return;
+          }
 
-        try {
-          const body = { image: base64 };
-          const header = { faceid: currentData };
-          const buttonapi = `${apiurl}python/recognize`;
+          const qrString =
+            typeof qrCodeData === "object" ? qrCodeData?.data : qrCodeData;
+
+          if (!qrString || typeof qrString !== "string") {
+            handleProcessError("Invalid QR code. Please try again.");
+            return;
+          }
 
           updateState({
-            loadingType: Global.LoadingTypes.networkRequest,
+            loadingType: Global.LoadingTypes.gettingLocation,
           });
 
-          const response = await networkServiceCall(
-            "POST",
-            buttonapi,
-            header,
-            body
-          );
+          const location = await getCurrentLocation();
 
-          if (response?.httpstatus === 200) {
-            // Combine face recognition response with QR location data
-            responseRef.current = {
-              ...responseRef.current,
-              ...response.data?.data || {},
-              faceRecognition: response.data?.data || null,
-            };
+          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) {
             updateState({
-              employeeData: response.data?.data || null,
-              animationState: Global.AnimationStates.success,
-              isLoading: false,
-              loadingType: Global.LoadingTypes.none,
+              loadingType: Global.LoadingTypes.calculateDistance,
             });
 
-            notifyMessage("Identity verified successfully!", "success");
+            const distance = getDistanceInMeters(
+              lat,
+              lng,
+              location.latitude,
+              location.longitude
+            );
 
-            // Call the callback with combined data
-            safeCallback(responseRef.current);
+            if (distance <= MaxDistanceMeters && qrKey === depKey) {
+              responseRef.current = location
+              notifyMessage("Location verified successfully!", "success");
 
-            if (resetTimeoutRef.current) {
-              clearTimeout(resetTimeoutRef.current);
-            }
+              updateState({
+                animationState: Global.AnimationStates.success,
+                isLoading: false,
+                loadingType: Global.LoadingTypes.none,
+              });
+              setTimeout(() => handleStartFaceScan(), 1200);
 
-            resetTimeoutRef.current = setTimeout(() => {
-              resetState();
-            }, 1200);
+            } else {
+              handleProcessError(
+                `Location mismatch (${distance.toFixed(0)}m away).`
+              );
+            }
           } else {
-            handleProcessError(
-              response?.data?.message ||
-              "Face not recognized. Please try again."
-            );
+            handleProcessError("Invalid coordinates in QR code.");
           }
         } catch (error) {
-          console.error("Network request failed:", error);
+          console.error("Location verification failed:", error);
           handleProcessError(
-            "Connection error. Please check your network.",
+            "Unable to verify location. Please try again.",
             error
           );
         }
+      },
+      [
+        getCurrentLocation,
+        notifyMessage,
+        requestLocationPermission,
+        resetState,
+        updateState,
+        validateApiUrl,
+        handleProcessError
+      ]
+    );
+
+    // Image capture handler
+    const handleImageCapture = useCallback(
+      async (capturedData) => {
+        if (state.currentStep === "Identity Verification") {
+          uploadFaceScan(capturedData);
+        } else if (state.currentStep === "Location Verification") {
+          handleQRScanned(capturedData);
+        }
+      },
+      [state.currentStep, uploadFaceScan, handleQRScanned]
+    );
+
+    // Start face scan
+    const handleStartFaceScan = useCallback(() => {
+      updateState({
+        currentStep: "Identity Verification",
+        animationState: Global.AnimationStates.faceScan,
       });
-    },
-    [
-      convertImageToBase64,
-      notifyMessage,
-      resetState,
-      updateState,
-      validateApiUrl,
-      safeCallback,
-      handleProcessError,
-      state.qrData,
-      apiurl,
-    ]
-  );
-
-  // Image capture handler
-  const handleImageCapture = useCallback(
-    async (capturedData) => {
-      if (state.currentStep === "Location Verification") {
-        await handleQRScanned(capturedData);
-      } else if (state.currentStep === "Identity Verification") {
-        await uploadFaceScan(capturedData);
-      }
-    },
-    [state.currentStep, uploadFaceScan, handleQRScanned]
-  );
-
-  // Start QR code scan - FIRST STEP
-  const handleStartQRScan = useCallback(() => {
-    updateState({
-      currentStep: "Location Verification",
-      animationState: Global.AnimationStates.qrScan,
-    });
-    setCameraType("back");
-  }, [updateState]);
+      setCameraType("front");
+    }, [updateState]);
 
-  // Start face recognition - SECOND STEP
-  const startFaceRecognition = useCallback(() => {
-    updateState({
-      currentStep: "Identity Verification",
-      animationState: Global.AnimationStates.faceScan,
-    });
-    setCameraType("front");
-  }, [updateState]);
-
-  // Start the verification process
-  const startProcess = useCallback(() => {
-    startCountdown(handleCountdownFinish);
-    if (qrscan) {
-      handleStartQRScan();
-    } else {
-      startFaceRecognition();
-    }
-  }, [handleCountdownFinish, handleStartQRScan, startCountdown, startFaceRecognition, qrscan]);
-
-  // Open modal when data is received
-  useEffect(() => {
-    if (data && !modalVisible && !processedRef.current) {
-      processedRef.current = true;
-      setModalVisible(true);
-      startProcess();
-    }
-  }, [data, modalVisible, startProcess]);
-
-  // Determine if camera should be shown
-  const shouldShowCamera =
-    (state.currentStep === "Identity Verification" ||
-      state.currentStep === "Location Verification") &&
-    state.animationState !== Global.AnimationStates.success &&
-    state.animationState !== Global.AnimationStates.error;
-
-  return (
-    <Modal
-      visible={modalVisible}
-      animationType="slide"
-      transparent
-      onRequestClose={resetState}
-      statusBarTranslucent
-    >
-      <View style={styles.modalContainer}>
-        {/* Camera component - full screen */}
-        {shouldShowCamera && !state.isLoading && (
-          <View style={styles.cameraContainer}>
-            <CaptureImageWithoutEdit
-              cameraType={cameraType}
-              onCapture={handleImageCapture}
-              showCodeScanner={state.currentStep === "Location Verification"}
-              isLoading={state.isLoading}
-              frameProcessorFps={frameProcessorFps}
-              livenessLevel={livenessLevel}
-              antispooflevel={antispooflevel}
-            />
-          </View>
-        )}
-
-        {/* UI elements positioned absolutely on top of camera */}
-        <TouchableOpacity
-          style={styles.closeButton}
-          onPress={resetState}
-          accessibilityLabel="Close modal"
-          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
-        >
-          <Icon name="close" size={24} color={Global.AppTheme.light} />
-        </TouchableOpacity>
-
-        <View style={styles.topContainer}>
-          {!shouldShowCamera && (
-            <View style={styles.headerContainer}>
-              <View style={styles.titleContainer}>
-                <Text style={styles.title}>Biometric Verification</Text>
-                <Text style={styles.subtitle}>{state.currentStep}</Text>
-              </View>
+    // Start QR code scan
+    const startQRCodeScan = useCallback(() => {
+      updateState({
+        currentStep: "Location Verification",
+        animationState: Global.AnimationStates.qrScan,
+      });
+      setCameraType("back");
+    }, [updateState]);
+
+    // Start the verification process
+    const startProcess = useCallback(() => {
+      startCountdown(handleCountdownFinish);
+      if (qrscan) {
+        startQRCodeScan()
+      } else {
+        handleStartFaceScan();
+      }
+    }, [handleCountdownFinish, handleStartFaceScan, startCountdown, startQRCodeScan]);
+
+    // Open modal when data is received
+    useEffect(() => {
+      if (data && !modalVisible && !processedRef.current) {
+        processedRef.current = true;
+        setModalVisible(true);
+        startProcess();
+      }
+    }, [data, modalVisible, startProcess]);
+
+    // Determine if camera should be shown
+    const shouldShowCamera =
+      (state.currentStep === "Identity Verification" ||
+        state.currentStep === "Location Verification") &&
+      state.animationState !== Global.AnimationStates.success &&
+      state.animationState !== Global.AnimationStates.error;
+
+    return (
+      <Modal
+        visible={modalVisible}
+        animationType="slide"
+        transparent
+        onRequestClose={resetState}
+        statusBarTranslucent
+      >
+        <View style={styles.modalContainer}>
+          {/* Camera component - full screen */}
+          {shouldShowCamera && !state.isLoading && (
+            <View style={styles.cameraContainer}>
+              <CaptureImageWithoutEdit
+                cameraType={cameraType}
+                onCapture={handleImageCapture}
+                showCodeScanner={state.currentStep === "Location Verification"}
+                isLoading={state.isLoading}
+                frameProcessorFps={frameProcessorFps}
+                livenessLevel={livenessLevel}
+                antispooflevel={antispooflevel}
+              />
             </View>
           )}
-        </View>
 
-        <View style={styles.topContainerstep}>
-          <StepIndicator
-            currentStep={state.currentStep}
-            qrscan={qrscan}
-          />
-        </View>
+          {/* UI elements positioned absolutely on top of camera */}
+          <TouchableOpacity
+            style={styles.closeButton}
+            onPress={resetState}
+            accessibilityLabel="Close modal"
+            hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+          >
+            <Icon name="close" size={24} color={Global.AppTheme.light} />
+          </TouchableOpacity>
+
+          <View style={styles.topContainer}>
+            {!shouldShowCamera && (
+              <View style={styles.headerContainer}>
+                <View style={styles.titleContainer}>
+                  <Text style={styles.title}>Biometric Verification</Text>
+                  <Text style={styles.subtitle}>{state.currentStep}</Text>
+                </View>
+              </View>
+            )}
+          </View>
 
-        {state.employeeData && (
-          <View style={styles.cardContainer}>
-            <Card employeeData={state.employeeData} apiurl={apiurl} fileurl={fileurl} />
+          <View style={styles.topContainerstep}>
+            <StepIndicator currentStep={state.currentStep} qrscan={qrscan} />
           </View>
-        )}
 
-        <View style={styles.notificationContainer}>
-          <Notification
-            notification={notification}
-            fadeAnim={fadeAnim}
-            slideAnim={slideAnim}
-          />
-        </View>
+          {state.employeeData && (
+            <View style={styles.cardContainer}>
+              <Card employeeData={state.employeeData} apiurl={apiurl} fileurl={fileurl} />
+            </View>
+          )}
+
+          <View style={styles.notificationContainer}>
+            <Notification
+              notification={notification}
+              fadeAnim={fadeAnim}
+              slideAnim={slideAnim}
+            />
+          </View>
 
-        <View style={styles.timerContainer}>
-          <CountdownTimer
-            duration={duration}
-            currentTime={countdown}
+          <View style={styles.timerContainer}>
+            <CountdownTimer
+              duration={Global.CountdownDuration}
+              currentTime={countdown}
+            />
+          </View>
+          <Loader
+            state={state}
+            gifSource={getLoaderGif(state.animationState, state.currentStep, apiurl, imageurl)}
           />
         </View>
-        <Loader
-          state={state}
-          gifSource={getLoaderGif(state.animationState, state.currentStep, apiurl, imageurl)}
-        />
-      </View>
-    </Modal>
-  );
-});
-
-// Wrap with memo after forwardRef
-const MemoizedBiometricModal = React.memo(BiometricModal);
-
-// Add display name for debugging
-MemoizedBiometricModal.displayName = 'BiometricModal';
+      </Modal>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   modalContainer: {
@@ -687,7 +568,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom: Platform.OS === 'ios' ? 50 : 30,
     left: 0,
-    right: 0,
     zIndex: 10,
   },
   headerContainer: {
@@ -723,16 +603,6 @@ const styles = StyleSheet.create({
     textShadowOffset: { width: 1, height: 1 },
     textShadowRadius: 2,
   },
-  wifiIndicator: {
-    fontSize: 12,
-    color: Global.AppTheme.primary || '#4CAF50',
-    marginTop: 4,
-    fontWeight: '500',
-    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
-    textShadowColor: 'rgba(0, 0, 0, 0.2)',
-    textShadowOffset: { width: 1, height: 1 },
-    textShadowRadius: 1,
-  },
   closeButton: {
     position: 'absolute',
     top: Platform.OS === 'ios' ? 40 : 20,
@@ -767,4 +637,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default MemoizedBiometricModal;
+export default BiometricModal;