react-native-biometric-verifier 0.0.17 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-biometric-verifier",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "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,4 @@
-import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import {
   View,
   TouchableOpacity,
@@ -8,6 +8,7 @@ import {
   Platform,
   AppState,
   BackHandler,
+  Animated,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import {
@@ -39,6 +40,7 @@ const CaptureImageWithoutEdit = React.memo(
     const [faces, setFaces] = useState([]);
     const [singleFaceDetected, setSingleFaceDetected] = useState(false);
     const [cameraError, setCameraError] = useState(null);
+    const [livenessStep, setLivenessStep] = useState(0);
 
     const captured = useRef(false);
     const appState = useRef(AppState.currentState);
@@ -46,11 +48,15 @@ const CaptureImageWithoutEdit = React.memo(
     const initializationAttempts = useRef(0);
     const maxInitializationAttempts = 3;
 
+    // Animation values
+    const instructionAnim = useRef(new Animated.Value(1)).current;
+
     // Reset capture state
     const resetCaptureState = useCallback(() => {
       captured.current = false;
       setSingleFaceDetected(false);
       setFaces([]);
+      setLivenessStep(0);
     }, []);
 
     // Code scanner
@@ -132,6 +138,18 @@ const CaptureImageWithoutEdit = React.memo(
       }
     }, []);
 
+    const onLivenessUpdate = useCallback((step) => {
+      setLivenessStep(step);
+      
+      // Animate instruction change
+      instructionAnim.setValue(0);
+      Animated.timing(instructionAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }, [instructionAnim]);
+
     // Use the face detection frame processor hook
     const {
       frameProcessor,
@@ -143,6 +161,7 @@ const CaptureImageWithoutEdit = React.memo(
     } = useFaceDetectionFrameProcessor({
       onStableFaceDetected,
       onFacesUpdate,
+      onLivenessUpdate,
       showCodeScanner,
       isLoading,
       isActive: showCamera && cameraInitialized, // Pass active state
@@ -343,6 +362,28 @@ const CaptureImageWithoutEdit = React.memo(
       }, 500);
     }, [initializeCamera, resetCaptureState, forceResetCaptureState]);
 
+    // Render liveness instructions
+    const renderLivenessInstruction = () => {
+      if (faces.length === 0) return 'Position your face in the frame';
+      
+      switch (livenessStep) {
+        case 0:
+          return 'Look straight into the camera';
+        case 1:
+          return 'Turn your face to the right';
+        case 2:
+          return 'Now turn your face to the left';
+        case 3:
+          if (captured.current) {
+            return 'Capturing...';
+          } else {
+            return 'Perfect! Hold still for capture...';
+          }
+        default:
+          return 'Position your face in the frame';
+      }
+    };
+
     // camera placeholder / UI
     const renderCameraPlaceholder = () => (
       <View style={styles.cameraContainer}>
@@ -430,32 +471,65 @@ const CaptureImageWithoutEdit = React.memo(
           renderCameraPlaceholder()
         )}
 
-        {/* Face detection status text */}
+        {/* Liveness Detection UI */}
         {!showCodeScanner && shouldRenderCamera && (
+          <View style={styles.livenessContainer}>
+            {/* Instructions with animation */}
+            <Animated.View 
+              style={[
+                styles.instructionContainer,
+                {
+                  opacity: instructionAnim,
+                  transform: [
+                    {
+                      translateY: instructionAnim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [10, 0],
+                      }),
+                    },
+                  ],
+                },
+              ]}
+            >
+              <Text style={styles.instructionText}>{renderLivenessInstruction()}</Text>
+            </Animated.View>
+
+            {/* Step Indicators */}
+            <View style={styles.stepsContainer}>
+              {[0, 1, 2].map((step) => (
+                <React.Fragment key={step}>
+                  <View style={[
+                    styles.stepIndicator,
+                    livenessStep > step ? styles.stepCompleted : 
+                    livenessStep === step ? styles.stepCurrent : styles.stepPending
+                  ]}>
+                    <Text style={styles.stepText}>{step + 1}</Text>
+                  </View>
+                  {step < 2 && (
+                    <View style={[
+                      styles.stepConnector,
+                      livenessStep > step ? styles.connectorCompleted : {}
+                    ]} />
+                  )}
+                </React.Fragment>
+              ))}
+            </View>
+
+            {/* Step Labels */}
+            <View style={styles.stepLabelsContainer}>
+              <Text style={styles.stepLabel}>Center</Text>
+              <Text style={styles.stepLabel}>Right</Text>
+              <Text style={styles.stepLabel}>Left</Text>
+            </View>
+          </View>
+        )}
+
+        {/* Face detection status */}
+        {!showCodeScanner && shouldRenderCamera && faces.length > 1 && (
           <View style={styles.faceDetectionStatus}>
-            {faces.length === 0 && (
-              <Text style={styles.faceDetectionText}>
-                Position your face in the frame
-              </Text>
-            )}
-            {faces.length > 1 && (
-              <Text style={[styles.faceDetectionText, styles.multipleFacesText]}>
-                Multiple faces detected. Please ensure only one person is in the frame.
-              </Text>
-            )}
-            {singleFaceDetected && !captured.current && (
-              <Text style={[styles.faceDetectionText, styles.singleFaceText]}>
-                Face detected. Hold still...
-              </Text>
-            )}
-            {captured.current && (
-              <View style={styles.capturingContainer}>
-                <ActivityIndicator size="small" color={COLORS.light} />
-                <Text style={[styles.faceDetectionText, styles.capturingText]}>
-                  Capturing...
-                </Text>
-              </View>
-            )}
+            <Text style={[styles.faceDetectionText, styles.multipleFacesText]}>
+              Multiple faces detected. Please ensure only one person is in the frame.
+            </Text>
           </View>
         )}
 
@@ -465,10 +539,10 @@ const CaptureImageWithoutEdit = React.memo(
             <TouchableOpacity
               style={[
                 styles.flipButton,
-                (isLoading || captured.current) && styles.flipButtonDisabled,
+                (isLoading || captured.current || livenessStep > 0) && styles.flipButtonDisabled,
               ]}
               onPress={onToggleCamera}
-              disabled={isLoading || captured.current}
+              disabled={isLoading || captured.current || livenessStep > 0}
               accessibilityLabel="Flip camera"
             >
               <Icon name="flip-camera-ios" size={28} color={COLORS.light} />
@@ -579,19 +653,80 @@ const styles = StyleSheet.create({
   multipleFacesText: {
     backgroundColor: 'rgba(255,0,0,0.7)',
   },
-  singleFaceText: {
-    backgroundColor: 'rgba(0,255,0,0.7)',
+  // Liveness detection styles
+  livenessContainer: {
+    position: 'absolute',
+    top: 40,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    paddingHorizontal: 20,
   },
-  capturingText: {
-    backgroundColor: 'rgba(0,100,255,0.7)',
+  instructionContainer: {
+    backgroundColor: 'rgba(0,0,0,0.8)',
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 8,
+    marginBottom: 20,
   },
-  capturingContainer: {
+  instructionText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  stepsContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: 'rgba(0,100,255,0.7)',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 8,
+    marginBottom: 8,
+  },
+  stepIndicator: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 2,
+  },
+  stepCompleted: {
+    backgroundColor: COLORS.primary,
+    borderColor: COLORS.primary,
+  },
+  stepCurrent: {
+    backgroundColor: COLORS.primary,
+    borderColor: COLORS.primary,
+    opacity: 0.7,
+  },
+  stepPending: {
+    backgroundColor: 'transparent',
+    borderColor: 'rgba(255,255,255,0.5)',
+  },
+  stepText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+  stepConnector: {
+    flex: 1,
+    height: 2,
+    backgroundColor: 'rgba(255,255,255,0.3)',
+    marginHorizontal: 4,
+  },
+  connectorCompleted: {
+    backgroundColor: COLORS.primary,
+  },
+  stepLabelsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingHorizontal: 10,
+  },
+  stepLabel: {
+    color: 'white',
+    fontSize: 12,
+    opacity: 0.8,
+    textAlign: 'center',
+    flex: 1,
   },
 });
 

package/src/components/Loader.js

@@ -16,7 +16,7 @@ export default function Loader({
   overlayColor = 'rgba(0,0,0,0.4)',
   loaderColor = 'lightblue',
   size = 50,
-  gifSource = {uri:`http://emr.amalaims.org:9393/file/getCommonFile/image/heartpulse.gif`},
+  gifSource = {uri: `http://emr.amalaims.org:9393/file/getCommonFile/image/heartpulse.gif`},
   message = '',
   messageStyle = {},
   animationType = 'fade',
@@ -27,6 +27,19 @@ export default function Loader({
   const [rotation] = useState(new Animated.Value(0));
   const [pulse] = useState(new Animated.Value(1));
   const [fade] = useState(new Animated.Value(0));
+  const [imageSource, setImageSource] = useState(gifSource);
+
+  // Reset imageSource whenever gifSource prop changes
+  useEffect(() => {
+    setImageSource(gifSource);
+  }, [gifSource]);
+
+  const handleImageError = () => {
+    // Fallback to default heartpulse GIF when image fails to load
+    setImageSource({ 
+      uri: "http://emr.amalaims.org:9393/file/getCommonFile/image/heartpulse.gif" 
+    });
+  };
 
   // Rotation animation
   useEffect(() => {
@@ -73,7 +86,9 @@ export default function Loader({
   const loaderContent = gifSource ? (
     <FastImage
       style={[styles.icon_style, { width: normalize(size), height: normalize(size) }]}
-      source={gifSource}
+      source={imageSource}
+      resizeMode={FastImage.resizeMode.contain}
+      onError={handleImageError}
     />
   ) : (
     <Animated.View style={[
@@ -120,7 +135,6 @@ export default function Loader({
             ...(shadow && styles.shadowStyle)
           }
         ]}>
-          {console.log('loadersource--------------------',JSON.stringify(gifSource))}
           {loaderContent}
           {message ? (
             <Text style={[styles.messageText, messageStyle]}>

package/src/hooks/useFaceDetectionFrameProcessor.js

@@ -3,20 +3,25 @@ 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
+// Tuned constants for liveness detection
 const FACE_STABILITY_THRESHOLD = 3;
 const FACE_MOVEMENT_THRESHOLD = 15;
-const FRAME_PROCESSOR_MIN_INTERVAL_MS = 1000;
+const FRAME_PROCESSOR_MIN_INTERVAL_MS = 800;
 const MIN_FACE_SIZE = 0.2;
 
+// Liveness detection constants
+const YAW_LEFT_THRESHOLD = -15; // face turned left (negative yaw)
+const YAW_RIGHT_THRESHOLD = 15; // face turned right (positive yaw)
+const YAW_CENTER_THRESHOLD = 5; // face centered
+
 export const useFaceDetectionFrameProcessor = ({
   onStableFaceDetected = () => {},
   onFacesUpdate = () => {},
+  onLivenessUpdate = () => {},
   showCodeScanner = false,
   isLoading = false,
-  isActive = true, // Add this prop to control activation
+  isActive = true,
 }) => {
-  // Face detector (fast mode only)
   const { detectFaces } = useFaceDetector({
     performanceMode: 'fast',
     landmarkMode: 'none',
@@ -25,23 +30,26 @@ export const useFaceDetectionFrameProcessor = ({
     minFaceSize: MIN_FACE_SIZE,
   });
 
-  // Use ref to track component mount state
   const isMounted = useRef(true);
 
-  // Consolidated shared state to reduce memory usage
-  const sharedState = useMemo(() => Worklets.createSharedValue({
-    lastProcessedTime: 0,
-    lastX: 0,
-    lastY: 0,
-    lastW: 0,
-    lastH: 0,
-    stableCount: 0,
-    captured: false,
-    showCodeScanner: showCodeScanner,
-    isActive: isActive, // Track active state
-  }), []);
+  const sharedState = useMemo(() =>
+    Worklets.createSharedValue({
+      lastProcessedTime: 0,
+      lastX: 0,
+      lastY: 0,
+      lastW: 0,
+      lastH: 0,
+      stableCount: 0,
+      captured: false,
+      showCodeScanner: showCodeScanner,
+      isActive: isActive,
+      livenessStep: 0, // 0=look straight, 1=left done, 2=right done, 3=ready for capture
+      leftTurnVerified: false,
+      rightTurnVerified: false,
+      currentYaw: 0,
+      yawStableCount: 0,
+    }), []);
 
-  // Update states when props change
   useEffect(() => {
     if (!isMounted.current) return;
     
@@ -51,58 +59,55 @@ export const useFaceDetectionFrameProcessor = ({
       isActive: isActive
     };
     
-    // Reset capture state when component becomes active again
+    // Reset when becoming active again
     if (isActive && sharedState.value.captured) {
       sharedState.value = {
         ...sharedState.value,
         captured: false,
         stableCount: 0,
-        lastX: 0,
-        lastY: 0,
-        lastW: 0,
-        lastH: 0
+        livenessStep: 0,
+        leftTurnVerified: false,
+        rightTurnVerified: false,
+        yawStableCount: 0,
       };
     }
-  }, [showCodeScanner, isActive]);
+  }, [showCodeScanner, isActive, sharedState]);
 
-  // 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 (error) {
-          if (__DEV__) console.log('runOnStable error:', error);
-        }
-      }),
-    [onStableFaceDetected]
+  const runOnStable = useMemo(() =>
+    Worklets.createRunOnJS((faceRect) => {
+      try {
+        onStableFaceDetected?.(faceRect);
+      } catch (error) {
+        console.error('Error in runOnStable:', error);
+      }
+    }), [onStableFaceDetected]
   );
 
-  const runOnFaces = useMemo(
-    () =>
-      Worklets.createRunOnJS((count, progress) => {
-        try {
-          onFacesUpdate?.({ count, progress });
-        } catch (error) {
-          if (__DEV__) console.log('runOnFaces error:', error);
-        }
-      }),
-    [onFacesUpdate]
+  const runOnFaces = useMemo(() =>
+    Worklets.createRunOnJS((count, progress, step) => {
+      try {
+        onFacesUpdate?.({ count, progress, step });
+      } catch (error) {
+        console.error('Error in runOnFaces:', error);
+      }
+    }), [onFacesUpdate]
+  );
+
+  const runOnLiveness = useMemo(() =>
+    Worklets.createRunOnJS((step) => {
+      try {
+        onLivenessUpdate?.(step);
+      } catch (error) {
+        console.error('Error in runOnLiveness:', error);
+      }
+    }), [onLivenessUpdate]
   );
 
-  // Frame processor with memory optimization
   const frameProcessor = useFrameProcessor((frame) => {
     'worklet';
-
-    // Get current state
     const state = sharedState.value;
-    
-    // Kill switches - release frame immediately if not needed
+
+    // Early return conditions
     if (state.showCodeScanner || state.captured || isLoading || !state.isActive) {
       frame.release?.();
       return;
@@ -117,7 +122,6 @@ export const useFaceDetectionFrameProcessor = ({
     let detected;
     try {
       detected = detectFaces?.(frame);
-      // Release frame immediately after face detection to prevent memory leaks
       frame.release?.();
     } catch (error) {
       frame.release?.();
@@ -125,76 +129,146 @@ export const useFaceDetectionFrameProcessor = ({
     }
 
     if (!detected || detected.length === 0) {
-      // No faces → reset stability but don't reset captured state completely
-      sharedState.value = {
-        ...state,
-        stableCount: 0,
-        lastProcessedTime: now
+      sharedState.value = { 
+        ...state, 
+        stableCount: 0, 
+        lastProcessedTime: now,
+        yawStableCount: 0
       };
-      runOnFaces(0, 0);
+      runOnFaces(0, 0, state.livenessStep);
       return;
     }
 
     if (detected.length === 1 && !state.captured) {
-      const f = detected[0];
-      if (!f?.bounds) {
-        runOnFaces(0, 0);
+      const face = detected[0];
+      if (!face?.bounds || face.yawAngle === undefined) {
+        runOnFaces(0, 0, state.livenessStep);
         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);
+      const yaw = face.yawAngle;
+      const x = Math.max(0, face.bounds.x);
+      const y = Math.max(0, face.bounds.y);
+      const width = Math.max(0, face.bounds.width);
+      const height = Math.max(0, face.bounds.height);
+
+      let newLivenessStep = state.livenessStep;
+      let newLeftTurnVerified = state.leftTurnVerified;
+      let newRightTurnVerified = state.rightTurnVerified;
+      let newYawStableCount = state.yawStableCount;
 
-      let newStableCount;
+      // Liveness detection logic
+      if (newLivenessStep === 0) {
+        // Step 0: Wait for face to be centered and stable
+        if (Math.abs(yaw) < YAW_CENTER_THRESHOLD) {
+          newYawStableCount++;
+          if (newYawStableCount >= 2) {
+            newLivenessStep = 1; // Ready for left turn
+            runOnLiveness(newLivenessStep);
+            newYawStableCount = 0;
+          }
+        } else {
+          newYawStableCount = 0;
+        }
+      } 
+      else if (newLivenessStep === 1 && !newLeftTurnVerified) {
+        // Step 1: Detect left turn
+        if (yaw < YAW_LEFT_THRESHOLD) {
+          newYawStableCount++;
+          if (newYawStableCount >= 2) {
+            newLeftTurnVerified = true;
+            newLivenessStep = 2; // Ready for right turn
+            runOnLiveness(newLivenessStep);
+            newYawStableCount = 0;
+          }
+        } else {
+          newYawStableCount = Math.max(0, newYawStableCount - 0.5);
+        }
+      } 
+      else if (newLivenessStep === 2 && newLeftTurnVerified && !newRightTurnVerified) {
+        // Step 2: Detect right turn
+        if (yaw > YAW_RIGHT_THRESHOLD) {
+          newYawStableCount++;
+          if (newYawStableCount >= 2) {
+            newRightTurnVerified = true;
+            newLivenessStep = 3; // Ready for capture
+            runOnLiveness(newLivenessStep);
+            newYawStableCount = 0;
+          }
+        } else {
+          newYawStableCount = Math.max(0, newYawStableCount - 0.5);
+        }
+      } 
+      else if (newLivenessStep === 3 && newLeftTurnVerified && newRightTurnVerified) {
+        // Step 3: Wait for face to return to center for capture
+        if (Math.abs(yaw) < YAW_CENTER_THRESHOLD) {
+          newYawStableCount++;
+        } else {
+          newYawStableCount = 0;
+        }
+      }
+
+      // Calculate face stability for capture
+      let newStableCount = state.stableCount;
       if (state.lastX === 0 && state.lastY === 0) {
-        // First detection
         newStableCount = 1;
       } else {
         const dx = Math.abs(x - state.lastX);
         const dy = Math.abs(y - state.lastY);
-
         if (dx < FACE_MOVEMENT_THRESHOLD && dy < FACE_MOVEMENT_THRESHOLD) {
           newStableCount = state.stableCount + 1;
         } else {
-          newStableCount = 1; // restart stability
+          newStableCount = 1;
         }
       }
 
       // Update shared state
       sharedState.value = {
         ...state,
+        lastProcessedTime: now,
         lastX: x,
         lastY: y,
         lastW: width,
         lastH: height,
         stableCount: newStableCount,
-        lastProcessedTime: now
+        livenessStep: newLivenessStep,
+        leftTurnVerified: newLeftTurnVerified,
+        rightTurnVerified: newRightTurnVerified,
+        currentYaw: yaw,
+        yawStableCount: newYawStableCount,
       };
 
-      if (newStableCount >= FACE_STABILITY_THRESHOLD) {
+      // Calculate progress for UI
+      const progress = Math.min(100, (newStableCount / FACE_STABILITY_THRESHOLD) * 100);
+      runOnFaces(1, progress, newLivenessStep);
+
+      // Capture conditions: liveness complete + face stable + face centered
+      if (newLivenessStep === 3 && 
+          newLeftTurnVerified && 
+          newRightTurnVerified && 
+          newStableCount >= FACE_STABILITY_THRESHOLD &&
+          Math.abs(yaw) < YAW_CENTER_THRESHOLD &&
+          newYawStableCount >= 2) {
+        
         sharedState.value = {
           ...sharedState.value,
           captured: true
         };
-        runOnStable(x, y, width, height);
-      } else {
-        runOnFaces(1, newStableCount);
+        runOnStable({ x, y, width, height });
       }
+
     } else {
-      // Multiple faces → not allowed
-      sharedState.value = {
-        ...state,
-        stableCount: 0,
-        lastProcessedTime: now
+      // Multiple faces or other conditions
+      sharedState.value = { 
+        ...state, 
+        stableCount: 0, 
+        lastProcessedTime: now,
+        yawStableCount: 0
       };
-      runOnFaces(detected.length, 0);
+      runOnFaces(detected.length, 0, state.livenessStep);
     }
   }, [detectFaces, isLoading]);
 
-  // Reset everything safely
   const resetCaptureState = useCallback(() => {
     sharedState.value = {
       ...sharedState.value,
@@ -204,11 +278,15 @@ export const useFaceDetectionFrameProcessor = ({
       lastW: 0,
       lastH: 0,
       stableCount: 0,
-      captured: false
+      captured: false,
+      livenessStep: 0,
+      leftTurnVerified: false,
+      rightTurnVerified: false,
+      currentYaw: 0,
+      yawStableCount: 0,
     };
   }, [sharedState]);
 
-  // Force reset capture state (for external calls)
   const forceResetCaptureState = useCallback(() => {
     sharedState.value = {
       lastProcessedTime: 0,
@@ -219,31 +297,34 @@ export const useFaceDetectionFrameProcessor = ({
       stableCount: 0,
       captured: false,
       showCodeScanner: sharedState.value.showCodeScanner,
-      isActive: sharedState.value.isActive
+      isActive: sharedState.value.isActive,
+      livenessStep: 0,
+      leftTurnVerified: false,
+      rightTurnVerified: false,
+      currentYaw: 0,
+      yawStableCount: 0,
     };
   }, [sharedState]);
 
-  // Update QR/Scanner toggle
   const updateShowCodeScanner = useCallback(
     (value) => {
-      sharedState.value = {
-        ...sharedState.value,
-        showCodeScanner: !!value
+      sharedState.value = { 
+        ...sharedState.value, 
+        showCodeScanner: !!value 
       };
-    },
+    }, 
     [sharedState]
   );
 
-  // Update active state
   const updateIsActive = useCallback(
     (active) => {
-      sharedState.value = {
-        ...sharedState.value,
+      sharedState.value = { 
+        ...sharedState.value, 
         isActive: active,
-        // Reset capture state when reactivating
-        captured: active ? false : sharedState.value.captured
+        // Reset capture state when deactivating
+        captured: active ? sharedState.value.captured : false
       };
-    },
+    }, 
     [sharedState]
   );
 
@@ -253,7 +334,6 @@ export const useFaceDetectionFrameProcessor = ({
     
     return () => {
       isMounted.current = false;
-      // Reset state when component unmounts
       forceResetCaptureState();
     };
   }, [forceResetCaptureState]);
@@ -261,7 +341,7 @@ export const useFaceDetectionFrameProcessor = ({
   return {
     frameProcessor,
     resetCaptureState,
-    forceResetCaptureState, // Use this when reopening
+    forceResetCaptureState,
     updateShowCodeScanner,
     updateIsActive,
     capturedSV: { value: sharedState.value.captured },