react-native-biometric-verifier 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-biometric-verifier",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "A React Native module for biometric verification with face recognition and QR code scanning",
   "main": "src/index.js",
   "scripts": {

package/src/components/CaptureImageWithoutEdit.js

@@ -1,4 +1,3 @@
-// CaptureImageWithoutEdit.js
 import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import {
   View,
@@ -16,19 +15,10 @@ import {
   getCameraDevice,
   useCodeScanner,
   useCameraFormat,
-  useFrameProcessor,
   CameraRuntimeError,
 } from 'react-native-vision-camera';
-import { Worklets } from 'react-native-worklets-core';
-import { useFaceDetector } from 'react-native-vision-camera-face-detector';
 import { COLORS } from "../utils/constants";
-
-// Constants for configuration
-const FACE_STABILITY_THRESHOLD = 4; // how many stable samples required
-const FACE_MOVEMENT_THRESHOLD = 18; // pixel threshold (adjust as needed)
-const FRAME_PROCESSOR_MIN_INTERVAL_MS = 700; // throttle; process at most every ~700ms
-const FRAME_PROCESSOR_FPS = 1;
-const MIN_FACE_SIZE = 0.2;
+import { useFaceDetectionFrameProcessor } from '../hooks/useFaceDetectionFrameProcessor';
 
 const CaptureImageWithoutEdit = React.memo(
   ({
@@ -38,6 +28,7 @@ const CaptureImageWithoutEdit = React.memo(
     showCodeScanner = false,
     isLoading = false,
     currentStep = '',
+    frameProcessorFps = 1,
   }) => {
     const cameraRef = useRef(null);
     const [cameraDevice, setCameraDevice] = useState(null);
@@ -45,65 +36,48 @@ const CaptureImageWithoutEdit = React.memo(
     const [showCamera, setShowCamera] = useState(false);
     const [cameraInitialized, setCameraInitialized] = useState(false);
 
-    const [faces, setFaces] = useState([]); // minimal rectangles for UI
+    const [faces, setFaces] = useState([]);
     const [singleFaceDetected, setSingleFaceDetected] = useState(false);
     const [cameraError, setCameraError] = useState(null);
 
-    const captured = useRef(false); // JS-side guard to avoid double-capture
+    const captured = useRef(false);
     const appState = useRef(AppState.currentState);
     const isMounted = useRef(true);
+    const initializationAttempts = useRef(0);
+    const maxInitializationAttempts = 3;
+
+    // Reset capture state
+    const resetCaptureState = useCallback(() => {
+      captured.current = false;
+      setSingleFaceDetected(false);
+      setFaces([]);
+    }, []);
 
-    // Face detector options
-    const faceDetectionOptions = {
-      performanceMode: 'fast',
-      landmarkMode: 'none',
-      contourMode: 'none',
-      classificationMode: 'none',
-      minFaceSize: MIN_FACE_SIZE,
-    };
-    const { detectFaces } = useFaceDetector(faceDetectionOptions);
-
-    // Code scanner (unchanged)
+    // Code scanner
     const codeScanner = useCodeScanner({
       codeTypes: ['qr', 'ean-13'],
       onCodeScanned: (codes) => {
-        if (showCodeScanner && codes && codes[0]?.value && !isLoading) {
-          console.log('QR Code scanned:', codes[0].value);
-          onCapture(codes[0].value);
+        try {
+          if (showCodeScanner && codes && codes[0]?.value && !isLoading) {
+            console.log('QR Code scanned:', codes[0].value);
+            onCapture(codes[0].value);
+          }
+        } catch (error) {
+          console.error('Error processing scanned code:', error);
+          setCameraError('Failed to process QR code');
         }
       },
     });
 
-    //
-    // --- Worklet-safe shared state (create once) ---
-    //
-    // Use useMemo to create shared values only once per component lifetime.
-    const lastProcessedTime = useMemo(() => Worklets.createSharedValue(0), []);
-    const lastBounds = useMemo(() => Worklets.createSharedValue(null), []);
-    const stableCount = useMemo(() => Worklets.createSharedValue(0), []);
-    const capturedSV = useMemo(() => Worklets.createSharedValue(false), []);
-    const showCodeScannerSV = useMemo(() => Worklets.createSharedValue(false), []);
-
-    //
-    // --- RunOnJS callbacks (small payloads only) ---
-    //
+    // Callbacks for face detection events
     const onStableFaceDetected = useCallback((faceRect) => {
       if (!isMounted.current) return;
       if (captured.current) return;
 
-      // keep JS-side guard
       captured.current = true;
-      // keep UI minimal
       setSingleFaceDetected(true);
       setFaces([faceRect]);
 
-      // Ensure the worklet shared flag is set (worklet already sets it but keep JS consistent)
-      try {
-        capturedSV.value = true;
-      } catch (e) {
-        // ignore if not accessible for some reason
-      }
-
       (async () => {
         try {
           if (!cameraRef.current) {
@@ -117,6 +91,10 @@ const CaptureImageWithoutEdit = React.memo(
             skipMetadata: true,
           });
 
+          if (!photo || !photo.path) {
+            throw new Error('Failed to capture photo - no path returned');
+          }
+
           const photopath = `file://${photo.path}`;
           const fileName = photopath.substr(photopath.lastIndexOf('/') + 1);
           const photoData = {
@@ -128,169 +106,146 @@ const CaptureImageWithoutEdit = React.memo(
           onCapture(photoData);
         } catch (e) {
           console.error('Capture error:', e);
-          // reset both JS and worklet flags so user can retry
           captured.current = false;
-          try {
-            capturedSV.value = false;
-            stableCount.value = 0;
-            lastBounds.value = null;
-          } catch (err) {
-            // swallow
-          }
+          resetCaptureState();
           setCameraError('Failed to capture image. Please try again.');
         }
       })();
-    }, [onCapture, capturedSV, stableCount, lastBounds]);
+    }, [onCapture, resetCaptureState]);
 
     const onFacesUpdate = useCallback((payload) => {
       if (!isMounted.current) return;
-      const { count } = payload;
-      if (count === 1) {
-        setSingleFaceDetected(true);
-        setFaces(prev => {
-          if (prev.length === 1) return prev;
-          return [{ x: 0, y: 0, width: 0, height: 0 }];
-        });
-      } else {
-        setSingleFaceDetected(false);
-        setFaces([]);
+      try {
+        const { count } = payload;
+        if (count === 1) {
+          setSingleFaceDetected(true);
+          setFaces(prev => {
+            if (prev.length === 1) return prev;
+            return [{ x: 0, y: 0, width: 0, height: 0 }];
+          });
+        } else {
+          setSingleFaceDetected(false);
+          setFaces([]);
+        }
+      } catch (error) {
+        console.error('Error updating faces:', error);
       }
-      // we don't store 'progress' in state to keep UI lightweight
     }, []);
 
-    const runOnStable = Worklets.createRunOnJS(onStableFaceDetected);
-    const runOnFaces = Worklets.createRunOnJS(onFacesUpdate);
-
-    //
-    // --- Frame processor (worklet): uses shared values above ---
-    //
-    const frameProcessor = useFrameProcessor((frame) => {
-      'worklet';
-      // use shared values created via Worklets.createSharedValue
-      if (showCodeScannerSV.value || capturedSV.value) return;
-
-      const now = performance.now();
-      if (!lastProcessedTime.value) lastProcessedTime.value = 0;
-      if (now - lastProcessedTime.value < FRAME_PROCESSOR_MIN_INTERVAL_MS) return;
-      lastProcessedTime.value = now;
+    // Use the face detection frame processor hook
+    const {
+      frameProcessor,
+      resetCaptureState: resetFrameProcessor,
+      updateShowCodeScanner,
+      capturedSV,
+    } = useFaceDetectionFrameProcessor({
+      onStableFaceDetected,
+      onFacesUpdate,
+      showCodeScanner,
+      isLoading,
+    });
 
+    // Initialize camera
+    const initializeCamera = useCallback(async () => {
       try {
-        const detected = detectFaces(frame);
-        const len = detected.length;
+        if (!isMounted.current) return;
+        if (initializationAttempts.current >= maxInitializationAttempts) {
+          setCameraError('Failed to initialize camera after multiple attempts');
+          return;
+        }
 
-        if (len === 1 && !capturedSV.value) {
-          const f = detected[0];
-          const bounds = f.bounds; // { x, y, width, height }
+        initializationAttempts.current += 1;
+        setCameraError(null);
 
-          if (!lastBounds.value) {
-            lastBounds.value = bounds;
-            stableCount.value = 1;
-          } else {
-            const dx = Math.abs(bounds.x - lastBounds.value.x);
-            const dy = Math.abs(bounds.y - lastBounds.value.y);
+        const permission = await Camera.requestCameraPermission();
+        setCameraPermission(permission);
 
-            if (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD) {
-              stableCount.value = (stableCount.value || 0) + 1;
-            } else {
-              stableCount.value = 0;
-            }
-            lastBounds.value = bounds;
+        if (permission === 'granted') {
+          const devices = await Camera.getAvailableCameraDevices();
+          
+          if (!devices || devices.length === 0) {
+            throw new Error('No camera devices found');
           }
+          
+          const device = getCameraDevice(devices, cameraType);
 
-          if ((stableCount.value || 0) >= FACE_STABILITY_THRESHOLD) {
-            // mark captured on worklet side to stop further processing immediately
-            capturedSV.value = true;
-
-            // send only minimal rectangle data to JS to avoid expensive bridging
-            const faceRect = {
-              x: Math.round(lastBounds.value.x),
-              y: Math.round(lastBounds.value.y),
-              width: Math.round(lastBounds.value.width),
-              height: Math.round(lastBounds.value.height),
-            };
-
-            runOnStable(faceRect);
+          if (device) {
+            setCameraDevice(device);
+            setTimeout(() => setShowCamera(true), 100);
+            initializationAttempts.current = 0; // Reset attempts on success
           } else {
-            // lightweight UI update
-            runOnFaces({ count: 1, progress: stableCount.value || 0 });
+            throw new Error(`No camera device found for type: ${cameraType}`);
           }
         } else {
-          // no face or multiple faces -> reset worklet-side stability trackers
-          lastBounds.value = null;
-          stableCount.value = 0;
-          capturedSV.value = false;
-          runOnFaces({ count: len });
+          throw new Error(`Camera permission ${permission}`);
+        }
+      } catch (error) {
+        console.error('Camera initialization failed:', error);
+        if (isMounted.current) {
+          let errorMessage = 'Failed to initialize camera';
+          
+          if (error.message.includes('permission')) {
+            errorMessage = 'Camera permission denied';
+          } else if (error.message.includes('No camera devices')) {
+            errorMessage = 'No camera available on this device';
+          }
+          
+          setCameraError(errorMessage);
         }
-      } catch (e) {
-        // swallow errors in worklet; don't do heavy logging here
       }
-    }, [detectFaces]);
+    }, [cameraType]);
 
-    //
-    // --- Effects: lifecycle, camera init, app state, cleanup ---
-    //
+    // Effects: lifecycle, camera init, app state, cleanup
     useEffect(() => {
       isMounted.current = true;
-
-      const initializeCamera = async () => {
-        try {
-          if (!isMounted.current) return;
-
-          const permission = await Camera.requestCameraPermission();
-          setCameraPermission(permission);
-
-          if (permission === 'granted') {
-            const devices = await Camera.getAvailableCameraDevices();
-            const device = getCameraDevice(devices, cameraType);
-
-            if (device) {
-              setCameraDevice(device);
-              // short delay so camera UI transitions cleanly
-              setTimeout(() => setShowCamera(true), 100);
-            } else {
-              console.error('No camera device found for type:', cameraType);
-              setCameraError('Camera not available on this device');
-            }
-          } else {
-            setCameraError('Camera permission denied');
-          }
-        } catch (error) {
-          console.error('Camera init failed:', error);
-          if (isMounted.current) {
-            setCameraError('Failed to initialize camera');
-          }
-        }
-      };
-
       initializeCamera();
 
       return () => {
         isMounted.current = false;
         setShowCamera(false);
       };
-    }, [cameraType]);
+    }, [initializeCamera]);
 
     // app state change
     useEffect(() => {
       const subscription = AppState.addEventListener('change', nextAppState => {
-        if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
-          // App came to the foreground
-          if (cameraPermission === 'granted') {
-            setShowCamera(true);
+        try {
+          if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+            if (cameraPermission === 'granted') {
+              setShowCamera(true);
+            }
+          } else if (nextAppState.match(/inactive|background/)) {
+            setShowCamera(false);
           }
-        } else if (nextAppState.match(/inactive|background/)) {
-          setShowCamera(false);
+          appState.current = nextAppState;
+        } catch (error) {
+          console.error('Error handling app state change:', error);
         }
-        appState.current = nextAppState;
       });
 
-      return () => subscription.remove();
+      return () => {
+        try {
+          subscription.remove();
+        } catch (error) {
+          console.error('Error removing app state listener:', error);
+        }
+      };
     }, [cameraPermission]);
 
-    // android back handler (same as before)
+    // android back handler
     useEffect(() => {
-      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => false);
-      return () => backHandler.remove();
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+        // Don't allow back press in camera screen
+        return true;
+      });
+      
+      return () => {
+        try {
+          backHandler.remove();
+        } catch (error) {
+          console.error('Error removing back handler:', error);
+        }
+      };
     }, []);
 
     // handle camera errors
@@ -323,13 +278,34 @@ const CaptureImageWithoutEdit = React.memo(
       setCameraError(null);
     }, []);
 
-    // format selection (unchanged)
+    // format selection
     const format = useCameraFormat(cameraDevice, [
       { videoResolution: { width: 640, height: 640 } },
       { fps: 30 },
     ]);
 
-    // camera placeholder / UI (kept the same)
+    // keep worklet's showCodeScanner flag in sync
+    useEffect(() => {
+      try {
+        updateShowCodeScanner(!!showCodeScanner);
+      } catch (error) {
+        console.error('Error updating code scanner:', error);
+      }
+    }, [showCodeScanner, updateShowCodeScanner]);
+
+    // Retry camera initialization
+    const handleRetry = useCallback(() => {
+      setCameraError(null);
+      setShowCamera(false);
+      resetCaptureState();
+      setTimeout(() => {
+        if (isMounted.current) {
+          initializeCamera();
+        }
+      }, 500);
+    }, [initializeCamera, resetCaptureState]);
+
+    // camera placeholder / UI
     const renderCameraPlaceholder = () => (
       <View style={styles.cameraContainer}>
         {cameraError ? (
@@ -338,25 +314,25 @@ const CaptureImageWithoutEdit = React.memo(
             <Text style={styles.errorText}>{cameraError}</Text>
             <TouchableOpacity
               style={styles.retryButton}
-              onPress={() => {
-                setCameraError(null);
-                setShowCamera(false);
-                setTimeout(() => {
-                  if (isMounted.current) {
-                    setShowCamera(true);
-                  }
-                }, 500);
-              }}
+              onPress={handleRetry}
+              accessibilityLabel="Retry camera initialization"
             >
               <Text style={styles.retryButtonText}>Retry</Text>
             </TouchableOpacity>
           </View>
-        ) : cameraPermission === 'denied' ? (
+        ) : cameraPermission === 'denied' || cameraPermission === 'restricted' ? (
           <View style={styles.placeholderContainer}>
             <Icon name="camera-off" size={40} color={COLORS.light} />
             <Text style={styles.placeholderText}>
               Camera permission required. Please enable in settings.
             </Text>
+            <TouchableOpacity
+              style={styles.retryButton}
+              onPress={handleRetry}
+              accessibilityLabel="Request camera permission again"
+            >
+              <Text style={styles.retryButtonText}>Request Again</Text>
+            </TouchableOpacity>
           </View>
         ) : cameraPermission === 'not-determined' ? (
           <View style={styles.placeholderContainer}>
@@ -369,6 +345,13 @@ const CaptureImageWithoutEdit = React.memo(
           <View style={styles.placeholderContainer}>
             <Icon name="camera-alt" size={40} color={COLORS.light} />
             <Text style={styles.placeholderText}>Camera not available</Text>
+            <TouchableOpacity
+              style={styles.retryButton}
+              onPress={handleRetry}
+              accessibilityLabel="Retry camera initialization"
+            >
+              <Text style={styles.retryButtonText}>Retry</Text>
+            </TouchableOpacity>
           </View>
         ) : (
           <View style={styles.placeholderContainer}>
@@ -384,33 +367,6 @@ const CaptureImageWithoutEdit = React.memo(
       cameraDevice &&
       !cameraError;
 
-    // keep worklet's showCodeScanner flag in sync
-    useEffect(() => {
-      try {
-        showCodeScannerSV.value = !!showCodeScanner;
-      } catch (e) {
-        // ignore
-      }
-      return () => {
-        try { showCodeScannerSV.value = false; } catch (e) {}
-      };
-    }, [showCodeScanner, showCodeScannerSV]);
-
-    // cleanup shared values when component unmounts
-    useEffect(() => {
-      return () => {
-        try {
-          lastProcessedTime.value = 0;
-          lastBounds.value = null;
-          stableCount.value = 0;
-          capturedSV.value = false;
-          showCodeScannerSV.value = false;
-        } catch (e) {
-          // ignore
-        }
-      };
-    }, [lastProcessedTime, lastBounds, stableCount, capturedSV, showCodeScannerSV]);
-
     return (
       <View style={styles.cameraContainer}>
         {shouldRenderCamera ? (
@@ -423,7 +379,7 @@ const CaptureImageWithoutEdit = React.memo(
             format={format}
             codeScanner={showCodeScanner ? codeScanner : undefined}
             frameProcessor={!showCodeScanner && cameraInitialized ? frameProcessor : undefined}
-            frameProcessorFps={FRAME_PROCESSOR_FPS}
+            frameProcessorFps={frameProcessorFps}
             onInitialized={handleCameraInitialized}
             onError={handleCameraError}
             enableZoomGesture={false}
@@ -455,9 +411,12 @@ const CaptureImageWithoutEdit = React.memo(
               </Text>
             )}
             {captured.current && (
-              <Text style={[styles.faceDetectionText, styles.capturingText]}>
-                Capturing...
-              </Text>
+              <View style={styles.capturingContainer}>
+                <ActivityIndicator size="small" color={COLORS.light} />
+                <Text style={[styles.faceDetectionText, styles.capturingText]}>
+                  Capturing...
+                </Text>
+              </View>
             )}
           </View>
         )}
@@ -521,6 +480,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 10,
     borderRadius: 8,
+    marginTop: 10,
   },
   retryButtonText: {
     color: COLORS.light,
@@ -587,6 +547,14 @@ const styles = StyleSheet.create({
   capturingText: {
     backgroundColor: 'rgba(0,100,255,0.7)',
   },
+  capturingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,100,255,0.7)',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+  },
 });
 
-export default CaptureImageWithoutEdit;
+export default CaptureImageWithoutEdit;

package/src/components/{CCard.js → Card.js}

@@ -4,11 +4,11 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import PropTypes from 'prop-types';
 import { COLORS } from '../utils/constants';
 
-export const CCard = ({ employeeData, apiurl }) => {
+export const Card = ({ employeeData, apiurl }) => {
   const [imageError, setImageError] = useState(false);
 
   if (!employeeData || typeof employeeData !== 'object') {
-    console.warn('CCard: Invalid or missing employeeData');
+    console.warn('Card: Invalid or missing employeeData');
     return null;
   }
 
@@ -52,7 +52,7 @@ export const CCard = ({ employeeData, apiurl }) => {
   );
 };
 
-CCard.propTypes = {
+Card.propTypes = {
   employeeData: PropTypes.shape({
     facename: PropTypes.string,
     faceid: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -133,4 +133,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default CCard;
+export default Card;

package/src/hooks/useFaceDetectionFrameProcessor.js

@@ -0,0 +1,167 @@
+import { useCallback, useMemo } from 'react';
+import { Worklets } from 'react-native-worklets-core';
+import { useFrameProcessor } from 'react-native-vision-camera';
+import { useFaceDetector } from 'react-native-vision-camera-face-detector';
+
+// Tuned constants
+const FACE_STABILITY_THRESHOLD = 3;
+const FACE_MOVEMENT_THRESHOLD = 15;
+const FRAME_PROCESSOR_MIN_INTERVAL_MS = 1000;
+const MIN_FACE_SIZE = 0.2;
+
+export const useFaceDetectionFrameProcessor = ({
+  onStableFaceDetected = () => {},
+  onFacesUpdate = () => {},
+  showCodeScanner = false,
+  isLoading = false,
+}) => {
+  // Face detector (fast mode only)
+  const { detectFaces } = useFaceDetector({
+    performanceMode: 'fast',
+    landmarkMode: 'none',
+    contourMode: 'none',
+    classificationMode: 'none',
+    minFaceSize: MIN_FACE_SIZE,
+  });
+
+  // Shared state
+  const lastProcessedTime = useMemo(() => Worklets.createSharedValue(0), []);
+  const lastX = useMemo(() => Worklets.createSharedValue(0), []);
+  const lastY = useMemo(() => Worklets.createSharedValue(0), []);
+  const lastW = useMemo(() => Worklets.createSharedValue(0), []);
+  const lastH = useMemo(() => Worklets.createSharedValue(0), []);
+  const stableCount = useMemo(() => Worklets.createSharedValue(0), []);
+  const capturedSV = useMemo(() => Worklets.createSharedValue(false), []);
+  const showCodeScannerSV = useMemo(
+    () => Worklets.createSharedValue(showCodeScanner),
+    [showCodeScanner]
+  );
+
+  // Safe JS callbacks
+  const runOnStable = useMemo(
+    () =>
+      Worklets.createRunOnJS((x, y, width, height) => {
+        try {
+          onStableFaceDetected?.({
+            x: Math.max(0, Math.round(x)),
+            y: Math.max(0, Math.round(y)),
+            width: Math.max(0, Math.round(width)),
+            height: Math.max(0, Math.round(height)),
+          });
+        } catch {}
+      }),
+    [onStableFaceDetected]
+  );
+
+  const runOnFaces = useMemo(
+    () =>
+      Worklets.createRunOnJS((count, progress) => {
+        try {
+          onFacesUpdate?.({ count, progress });
+        } catch {}
+      }),
+    [onFacesUpdate]
+  );
+
+  // Frame processor
+  const frameProcessor = useFrameProcessor((frame) => {
+    'worklet';
+
+    // Kill switches
+    if (showCodeScannerSV.value || capturedSV.value || isLoading) return;
+
+    const now = frame?.timestamp ? frame.timestamp / 1e6 : Date.now();
+    if (now - lastProcessedTime.value < FRAME_PROCESSOR_MIN_INTERVAL_MS) return;
+    lastProcessedTime.value = now;
+
+    let detected;
+    try {
+      detected = detectFaces?.(frame);
+    } catch {
+      return; // skip invalid frame
+    }
+
+    if (!detected || detected.length === 0) {
+      // No faces → reset
+      stableCount.value = 0;
+      capturedSV.value = false;
+      runOnFaces(0, 0);
+      return;
+    }
+
+    if (detected.length === 1 && !capturedSV.value) {
+      const f = detected[0];
+      if (!f?.bounds) {
+        runOnFaces(0, 0);
+        return;
+      }
+
+      // Clamp invalid values
+      const x = Math.max(0, f.bounds.x ?? 0);
+      const y = Math.max(0, f.bounds.y ?? 0);
+      const width = Math.max(0, f.bounds.width ?? 0);
+      const height = Math.max(0, f.bounds.height ?? 0);
+
+      if (lastX.value === 0 && lastY.value === 0) {
+        // First detection
+        lastX.value = x;
+        lastY.value = y;
+        lastW.value = width;
+        lastH.value = height;
+        stableCount.value = 1;
+      } else {
+        const dx = Math.abs(x - lastX.value);
+        const dy = Math.abs(y - lastY.value);
+
+        if (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD) {
+          stableCount.value += 1;
+        } else {
+          stableCount.value = 1; // restart stability
+        }
+
+        lastX.value = x;
+        lastY.value = y;
+        lastW.value = width;
+        lastH.value = height;
+      }
+
+      if (stableCount.value >= FACE_STABILITY_THRESHOLD) {
+        capturedSV.value = true;
+        runOnStable(lastX.value, lastY.value, lastW.value, lastH.value);
+      } else {
+        runOnFaces(1, stableCount.value);
+      }
+    } else {
+      // Multiple faces → not allowed
+      stableCount.value = 0;
+      capturedSV.value = false;
+      runOnFaces(detected.length, 0);
+    }
+  }, [detectFaces, isLoading]);
+
+  // Reset everything safely
+  const resetCaptureState = useCallback(() => {
+    capturedSV.value = false;
+    stableCount.value = 0;
+    lastX.value = 0;
+    lastY.value = 0;
+    lastW.value = 0;
+    lastH.value = 0;
+    lastProcessedTime.value = 0;
+  }, []);
+
+  // Update QR/Scanner toggle
+  const updateShowCodeScanner = useCallback(
+    (value) => {
+      showCodeScannerSV.value = !!value;
+    },
+    [showCodeScannerSV]
+  );
+
+  return {
+    frameProcessor,
+    resetCaptureState,
+    updateShowCodeScanner,
+    capturedSV,
+  };
+};

package/src/index.js

@@ -16,10 +16,16 @@ 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";
 import { useImageProcessing } from "./hooks/useImageProcessing";
 import { useNotifyMessage } from "./hooks/useNotifyMessage";
+import { useSafeCallback } from "./hooks/useSafeCallback";
+
+// Utils
 import { getDistanceInMeters } from "./utils/distanceCalculator";
 import {
   ANIMATION_STATES,
@@ -28,29 +34,31 @@ import {
   MAX_DISTANCE_METERS,
   LOADING_TYPES,
 } from "./utils/constants";
+import networkServiceCall from "./utils/NetworkServiceCall";
+import { getLoaderGif } from "./utils/getLoaderGif";
+
+// Components
 import Loader from "./components/Loader";
 import { CountdownTimer } from "./components/CountdownTimer";
-import { CCard } from "./components/CCard";
+import { Card } from "./components/Card";
 import { Notification } from "./components/Notification";
-import { useNavigation } from "@react-navigation/native";
-import networkServiceCall from "./utils/NetworkServiceCall";
-import { getLoaderGif } from "./utils/getLoaderGif";
-import { useSafeCallback } from "./hooks/useSafeCallback";
 import CaptureImageWithoutEdit from "./components/CaptureImageWithoutEdit";
 import StepIndicator from "./components/StepIndicator";
 
-const BiometricVerificationModal = React.memo(
-  ({ data, qrscan = false, callback, apiurl, onclose }) => {
+const BiometricModal = React.memo(
+  ({ data, qrscan = false, callback, apiurl, onclose, frameProcessorFps }) => {
     const navigation = useNavigation();
+    
+    // Custom hooks
     const { countdown, startCountdown, resetCountdown, pauseCountdown, resumeCountdown } = useCountdown();
     const { requestLocationPermission, getCurrentLocation } = useGeolocation();
     const { convertImageToBase64 } = useImageProcessing();
-    const { notification, fadeAnim, slideAnim, notifyMessage, clearNotification } =
-      useNotifyMessage();
+    const { notification, fadeAnim, slideAnim, notifyMessage, clearNotification } = useNotifyMessage();
+    const safeCallback = useSafeCallback(callback, notifyMessage);
 
+    // State
     const [modalVisible, setModalVisible] = useState(false);
     const [cameraType, setCameraType] = useState("front");
-
     const [state, setState] = useState({
       isLoading: false,
       loadingType: LOADING_TYPES.NONE,
@@ -59,32 +67,35 @@ const BiometricVerificationModal = React.memo(
       animationState: ANIMATION_STATES.FACE_SCAN,
     });
 
+    // Refs
     const dataRef = useRef(data);
     const mountedRef = useRef(true);
     const responseRef = useRef(null);
     const processedRef = useRef(false);
-    const safeCallback = useSafeCallback(callback, notifyMessage);
     const resetTimeoutRef = useRef(null);
     
-    // Animation values for icons
+    // Animation values
     const iconScaleAnim = useRef(new Animated.Value(1)).current;
     const iconOpacityAnim = useRef(new Animated.Value(0)).current;
 
     // Cleanup on unmount
     useEffect(() => {
-      console.log("🔧 BiometricVerificationModal mounted");
+      console.log("🔧 BiometricModal mounted");
 
       return () => {
-        console.log("🧹 BiometricVerificationModal unmounting - cleaning up");
+        console.log("🧹 BiometricModal unmounting - cleaning up");
         mountedRef.current = false;
+        
         if (resetTimeoutRef.current) {
           clearTimeout(resetTimeoutRef.current);
           console.log("⏹️ Cleared reset timeout");
         }
+        
         clearNotification();
       };
     }, []);
 
+    // Update dataRef when data changes
     useEffect(() => {
       dataRef.current = data;
       console.log(
@@ -93,11 +104,12 @@ const BiometricVerificationModal = React.memo(
       );
     }, [data]);
 
+    // Animation helper
     const animateIcon = useCallback(() => {
       // Reset animation
       iconScaleAnim.setValue(1);
       iconOpacityAnim.setValue(0);
-      
+
       // Start animation sequence
       Animated.sequence([
         Animated.parallel([
@@ -120,13 +132,15 @@ const BiometricVerificationModal = React.memo(
       ]).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)) {
             console.log("🔄 State updated:", merged);
-            
+
             // Pause/resume countdown based on loading state
             if (newState.isLoading !== undefined) {
               if (newState.isLoading) {
@@ -137,14 +151,15 @@ const BiometricVerificationModal = React.memo(
                 resumeCountdown();
               }
             }
-            
+
             // Animate icon when step changes
             if (newState.currentStep && newState.currentStep !== prev.currentStep) {
               animateIcon();
             }
-            
+
             return merged;
           }
+          
           return prev;
         });
       } else {
@@ -152,9 +167,11 @@ const BiometricVerificationModal = React.memo(
       }
     }, [animateIcon, pauseCountdown, resumeCountdown]);
 
+    // Reset state helper
     const resetState = useCallback(() => {
       console.log("🔄 Resetting biometric modal state");
       onclose(false);
+      
       setState({
         isLoading: false,
         loadingType: LOADING_TYPES.NONE,
@@ -162,6 +179,7 @@ const BiometricVerificationModal = React.memo(
         employeeData: null,
         animationState: ANIMATION_STATES.FACE_SCAN,
       });
+      
       setModalVisible(false);
       processedRef.current = false;
       resetCountdown();
@@ -174,6 +192,7 @@ const BiometricVerificationModal = React.memo(
       }
     }, [resetCountdown, clearNotification]);
 
+    // Error handler
     const handleProcessError = useCallback(
       (message, errorObj = null) => {
         console.error("❌ Process Error:", message, errorObj || "");
@@ -189,6 +208,7 @@ const BiometricVerificationModal = React.memo(
         if (resetTimeoutRef.current) {
           clearTimeout(resetTimeoutRef.current);
         }
+        
         resetTimeoutRef.current = setTimeout(() => {
           console.log("⏰ Error timeout completed - resetting state");
           resetState();
@@ -197,25 +217,30 @@ const BiometricVerificationModal = React.memo(
       [notifyMessage, resetState, updateState]
     );
 
+    // Countdown finish handler
     const handleCountdownFinish = useCallback(() => {
       console.log("⏰ Countdown finished");
       handleProcessError("Time is up! Please try again.");
+      
       if (navigation.canGoBack()) {
         console.log("↩️ Navigating back due to timeout");
         navigation.goBack();
       }
     }, [handleProcessError, navigation]);
 
+    // API URL validation
     const validateApiUrl = useCallback(() => {
       if (!apiurl || typeof apiurl !== "string") {
         console.error("❌ Invalid API URL:", apiurl);
         handleProcessError("Invalid API URL configuration.");
         return false;
       }
+      
       console.log("✅ API URL validated:", apiurl);
       return true;
     }, [apiurl, handleProcessError]);
 
+    // Face scan upload
     const uploadFaceScan = useCallback(
       async (selfie) => {
         console.log("📸 Uploading face scan");
@@ -237,6 +262,7 @@ const BiometricVerificationModal = React.memo(
 
         InteractionManager.runAfterInteractions(async () => {
           let base64;
+          
           try {
             console.log("🖼️ Converting image to base64");
             updateState({
@@ -279,6 +305,7 @@ const BiometricVerificationModal = React.memo(
             if (response?.httpstatus === 200) {
               console.log("✅ Face recognition successful");
               responseRef.current = response;
+              
               updateState({
                 employeeData: response.data?.data || null,
                 animationState: ANIMATION_STATES.SUCCESS,
@@ -294,9 +321,11 @@ const BiometricVerificationModal = React.memo(
               } else {
                 console.log("✅ Verification complete - calling callback");
                 safeCallback(responseRef.current);
+                
                 if (resetTimeoutRef.current) {
                   clearTimeout(resetTimeoutRef.current);
                 }
+                
                 resetTimeoutRef.current = setTimeout(() => {
                   console.log("⏰ Success timeout completed - resetting");
                   resetState();
@@ -306,7 +335,7 @@ const BiometricVerificationModal = React.memo(
               console.warn("⚠️ Face recognition failed:", response?.data?.error);
               handleProcessError(
                 response?.data?.error?.message ||
-                  "Face not recognized. Please try again."
+                "Face not recognized. Please try again."
               );
             }
           } catch (error) {
@@ -330,6 +359,7 @@ const BiometricVerificationModal = React.memo(
       ]
     );
 
+    // QR code processing
     const handleQRScanned = useCallback(
       async (qrCodeData) => {
         console.log("🔍 Processing scanned QR code");
@@ -412,6 +442,7 @@ const BiometricVerificationModal = React.memo(
               console.log("✅ Location verified successfully");
               safeCallback(responseRef.current);
               notifyMessage("Location verified successfully!", "success");
+              
               updateState({
                 animationState: ANIMATION_STATES.SUCCESS,
                 isLoading: false,
@@ -421,6 +452,7 @@ const BiometricVerificationModal = React.memo(
               if (resetTimeoutRef.current) {
                 clearTimeout(resetTimeoutRef.current);
               }
+              
               resetTimeoutRef.current = setTimeout(() => {
                 console.log("⏰ Location success timeout - resetting");
                 resetState();
@@ -464,6 +496,7 @@ const BiometricVerificationModal = React.memo(
       ]
     );
 
+    // Image capture handler
     const handleImageCapture = useCallback(
       async (capturedData) => {
         console.log("📷 Image captured for step:", state.currentStep);
@@ -479,6 +512,7 @@ const BiometricVerificationModal = React.memo(
       [state.currentStep, uploadFaceScan, handleQRScanned]
     );
 
+    // Start face scan
     const handleStartFaceScan = useCallback(() => {
       console.log("👤 Starting face scan");
       updateState({
@@ -488,6 +522,7 @@ const BiometricVerificationModal = React.memo(
       setCameraType("front");
     }, [updateState]);
 
+    // Start QR code scan
     const startQRCodeScan = useCallback(() => {
       console.log("📍 Starting QR code scan");
       updateState({
@@ -497,6 +532,7 @@ const BiometricVerificationModal = React.memo(
       setCameraType("back");
     }, [updateState]);
 
+    // Toggle camera
     const toggleCamera = useCallback(() => {
       console.log("🔄 Toggling camera");
       setCameraType((prevType) => {
@@ -506,12 +542,14 @@ const BiometricVerificationModal = React.memo(
       });
     }, []);
 
+    // Start the verification process
     const startProcess = useCallback(() => {
       console.log("🚀 Starting verification process");
       startCountdown(handleCountdownFinish);
       handleStartFaceScan();
     }, [handleCountdownFinish, handleStartFaceScan, startCountdown]);
 
+    // Open modal when data is received
     useEffect(() => {
       if (data && !modalVisible && !processedRef.current) {
         console.log("📥 New data received, opening modal");
@@ -521,6 +559,7 @@ const BiometricVerificationModal = React.memo(
       }
     }, [data, modalVisible, startProcess]);
 
+    // Loader source memoization
     const loaderSource = useMemo(
       () =>
         state.isLoading &&
@@ -528,6 +567,7 @@ const BiometricVerificationModal = React.memo(
       [state.isLoading, state.animationState, state.currentStep, apiurl]
     );
 
+    // Determine if camera should be shown
     const shouldShowCamera =
       (state.currentStep === "Identity Verification" ||
         state.currentStep === "Location Verification") &&
@@ -535,35 +575,17 @@ const BiometricVerificationModal = React.memo(
       state.animationState !== ANIMATION_STATES.ERROR;
 
     return (
-      <>
-        <Modal
-          visible={modalVisible}
-          animationType="slide"
-          transparent
-          onRequestClose={resetState}
-          statusBarTranslucent
-        >
-          <View style={styles.modalContainer}>
-            <TouchableOpacity
-              style={styles.closeButton}
-              onPress={resetState}
-              accessibilityLabel="Close modal"
-              hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
-            >
-              <Icon name="close" size={24} color={COLORS.light} />
-            </TouchableOpacity>
-
-            <View style={styles.headerContainer}>
-              
-              <View style={styles.titleContainer}>
-                <Text style={styles.title}>Biometric Verification</Text>
-                <Text style={styles.subtitle}>{state.currentStep}</Text>
-              </View>
-            </View>
-
-            <StepIndicator currentStep={state.currentStep} qrscan={qrscan} />
-
-            {shouldShowCamera && !state.isLoading && (
+      <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}
@@ -571,30 +593,63 @@ const BiometricVerificationModal = React.memo(
                 showCodeScanner={state.currentStep === "Location Verification"}
                 isLoading={state.isLoading}
                 currentStep={state.currentStep}
+                frameProcessorFps={frameProcessorFps}
               />
+            </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={COLORS.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>
+          
+          <View style={styles.topContainerstep}>
+            <StepIndicator currentStep={state.currentStep} qrscan={qrscan} />
+          </View>
 
-            {state.employeeData && (
-              <CCard employeeData={state.employeeData} apiurl={apiurl} />
-            )}
+          {state.employeeData && (
+            <View style={styles.cardContainer}>
+              <Card employeeData={state.employeeData} apiurl={apiurl} />
+            </View>
+          )}
 
+          <View style={styles.notificationContainer}>
             <Notification
               notification={notification}
               fadeAnim={fadeAnim}
               slideAnim={slideAnim}
             />
+          </View>
 
+          <View style={styles.timerContainer}>
             <CountdownTimer
               duration={COUNTDOWN_DURATION}
               currentTime={countdown}
             />
-            <Loader
-              gifSource={loaderSource}
-              visible={state.isLoading}
-            />
           </View>
-        </Modal>
-      </>
+
+          <Loader
+            gifSource={loaderSource}
+            visible={state.isLoading}
+          />
+        </View>
+      </Modal>
     );
   }
 );
@@ -603,18 +658,38 @@ const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
     backgroundColor: COLORS.modalBackground || 'rgba(0, 0, 0, 0.85)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 50,
+  },
+  cameraContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 0,
+  },
+  topContainer: {
+    position: 'absolute',
+    top: Platform.OS === 'ios' ? 50 : 30,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    paddingHorizontal: 20,
+  },
+  topContainerstep: {
+    position: 'absolute',
+    bottom: Platform.OS === 'ios' ? 50 : 30,
+    left: 0,
+    zIndex: 10,
   },
   headerContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     marginBottom: 15,
+    marginTop: 10,
   },
   titleContainer: {
     flex: 1,
-    marginLeft:10
+    marginLeft: 10
   },
   title: {
     fontSize: 26,
@@ -641,13 +716,36 @@ const styles = StyleSheet.create({
   },
   closeButton: {
     position: 'absolute',
-    top: Platform.OS === 'ios' ? 50 : 30,
+    top: Platform.OS === 'ios' ? 40 : 20,
     right: 20,
-    zIndex: 10,
+    zIndex: 20,
     backgroundColor: 'rgba(255, 255, 255, 0.15)',
     borderRadius: 20,
     padding: 8,
   },
+  cardContainer: {
+    position: 'absolute',
+    bottom: 100,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    paddingHorizontal: 20,
+  },
+  notificationContainer: {
+    position: 'absolute',
+    top: Platform.OS === 'ios' ? 120 : 100,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    paddingHorizontal: 20,
+  },
+  timerContainer: {
+    position: 'absolute',
+    bottom: Platform.OS === 'ios' ? 40 : 20,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+  },
 });
 
-export default BiometricVerificationModal;
+export default BiometricModal;

package/src/utils/NetworkServiceCall.js

@@ -20,7 +20,7 @@ const networkServiceCall = async (method, url, extraHeaders = {}, body = {}) =>
 
     const response = await fetch(url, dataset);
 
-    console.log("🌐 Response Status:", response);
+    console.log("🌐 Response Status:", response.status);
 
     const result = await response.json();
     console.log("✅ API Success:", result);
@@ -32,4 +32,14 @@ const networkServiceCall = async (method, url, extraHeaders = {}, body = {}) =>
   }
 };
 
+// ✅ GET API Call helper
+export const getApiCall = (url, extraHeaders = {}) => {
+  return networkServiceCall('GET', url, extraHeaders);
+};
+
+// ✅ POST API Call helper
+export const postApiCall = (url, body = {}, extraHeaders = {}) => {
+  return networkServiceCall('POST', url, extraHeaders, body);
+};
+
 export default networkServiceCall;

package/src/utils/logger.js

@@ -1,7 +0,0 @@
-export const createLogger = (moduleName) => {
-  return (message, data = null) => {
-    if (__DEV__) {
-      console.log(`[${moduleName}] ${message}`, JSON.stringify(data));
-    }
-  };
-};