react-native-biometric-verifier 0.0.18 → 0.0.20

package/src/components/CaptureImageWithoutEdit.js

@@ -5,7 +5,6 @@ import {
   Text,
   StyleSheet,
   ActivityIndicator,
-  Platform,
   AppState,
   BackHandler,
   Animated,
@@ -18,35 +17,35 @@ import {
   useCameraFormat,
   CameraRuntimeError,
 } from 'react-native-vision-camera';
-import { COLORS } from "../utils/constants";
+import { Global } from '../utils/Global';
 import { useFaceDetectionFrameProcessor } from '../hooks/useFaceDetectionFrameProcessor';
 
 const CaptureImageWithoutEdit = React.memo(
   ({
     cameraType = 'front',
     onCapture,
-    onToggleCamera,
     showCodeScanner = false,
     isLoading = false,
-    currentStep = '',
     frameProcessorFps = 1,
+    livenessLevel = 1, // 0=no liveness, 1=blink only, 2=face turn only, 3=both
   }) => {
     const cameraRef = useRef(null);
     const [cameraDevice, setCameraDevice] = useState(null);
     const [cameraPermission, setCameraPermission] = useState('not-determined');
     const [showCamera, setShowCamera] = useState(false);
     const [cameraInitialized, setCameraInitialized] = useState(false);
+    const [currentCameraType, setCurrentCameraType] = useState(cameraType);
 
     const [faces, setFaces] = useState([]);
-    const [singleFaceDetected, setSingleFaceDetected] = useState(false);
     const [cameraError, setCameraError] = useState(null);
     const [livenessStep, setLivenessStep] = useState(0);
+    const [blinkCount, setBlinkCount] = useState(0);
+    const [progress, setProgress] = useState(0);
+    const [faceCount, setFaceCount] = useState(0);
 
     const captured = useRef(false);
     const appState = useRef(AppState.currentState);
     const isMounted = useRef(true);
-    const initializationAttempts = useRef(0);
-    const maxInitializationAttempts = 3;
 
     // Animation values
     const instructionAnim = useRef(new Animated.Value(1)).current;
@@ -54,9 +53,11 @@ const CaptureImageWithoutEdit = React.memo(
     // Reset capture state
     const resetCaptureState = useCallback(() => {
       captured.current = false;
-      setSingleFaceDetected(false);
       setFaces([]);
       setLivenessStep(0);
+      setBlinkCount(0);
+      setProgress(0);
+      setFaceCount(0);
     }, []);
 
     // Code scanner
@@ -76,61 +77,59 @@ const CaptureImageWithoutEdit = React.memo(
     });
 
     // Callbacks for face detection events
-    const onStableFaceDetected = useCallback((faceRect) => {
+    const onStableFaceDetected = useCallback(async (faceRect) => {
       if (!isMounted.current) return;
       if (captured.current) return;
 
       captured.current = true;
-      setSingleFaceDetected(true);
       setFaces([faceRect]);
 
-      (async () => {
-        try {
-          if (!cameraRef.current) {
-            throw new Error('Camera ref not available');
-          }
-
-          const photo = await cameraRef.current.takePhoto({
-            flash: 'off',
-            qualityPrioritization: 'balanced',
-            enableShutterSound: false,
-            skipMetadata: true,
-          });
+      try {
+        if (!cameraRef.current) {
+          throw new Error('Camera ref not available');
+        }
 
-          if (!photo || !photo.path) {
-            throw new Error('Failed to capture photo - no path returned');
-          }
+        const photo = await cameraRef.current.takePhoto({
+          flash: 'off',
+          qualityPrioritization: 'quality',
+          enableShutterSound: false,
+          skipMetadata: true,
+        });
 
-          const photopath = `file://${photo.path}`;
-          const fileName = photopath.substr(photopath.lastIndexOf('/') + 1);
-          const photoData = {
-            uri: photopath,
-            filename: fileName,
-            filetype: 'image/jpeg',
-          };
-
-          onCapture(photoData);
-        } catch (e) {
-          console.error('Capture error:', e);
-          captured.current = false;
-          resetCaptureState();
-          setCameraError('Failed to capture image. Please try again.');
+        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 = {
+          uri: photopath,
+          filename: fileName,
+          filetype: 'image/jpeg',
+        };
+
+        onCapture(photoData, faceRect);
+      } catch (e) {
+        console.error('Capture error:', e);
+        captured.current = false;
+        resetCaptureState();
+        setCameraError('Failed to capture image. Please try again.');
+      }
     }, [onCapture, resetCaptureState]);
 
     const onFacesUpdate = useCallback((payload) => {
       if (!isMounted.current) return;
       try {
-        const { count } = payload;
+        const { count, progress } = payload;
+        setFaceCount(count);
+        setProgress(progress);
+
         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) {
@@ -138,9 +137,10 @@ const CaptureImageWithoutEdit = React.memo(
       }
     }, []);
 
-    const onLivenessUpdate = useCallback((step) => {
+    const onLivenessUpdate = useCallback((step, extra) => {
       setLivenessStep(step);
-      
+      if (extra?.blinkCount !== undefined) setBlinkCount(extra.blinkCount);
+
       // Animate instruction change
       instructionAnim.setValue(0);
       Animated.timing(instructionAnim, {
@@ -153,7 +153,6 @@ const CaptureImageWithoutEdit = React.memo(
     // Use the face detection frame processor hook
     const {
       frameProcessor,
-      resetCaptureState: resetFrameProcessor,
       forceResetCaptureState,
       updateShowCodeScanner,
       updateIsActive,
@@ -164,69 +163,51 @@ const CaptureImageWithoutEdit = React.memo(
       onLivenessUpdate,
       showCodeScanner,
       isLoading,
-      isActive: showCamera && cameraInitialized, // Pass active state
+      isActive: showCamera && cameraInitialized,
+      livenessLevel, // Pass liveness level to hook
     });
 
     // Sync captured state with the shared value
     useEffect(() => {
       if (capturedSV?.value && !captured.current) {
         captured.current = true;
-        setSingleFaceDetected(true);
       } else if (!capturedSV?.value && captured.current) {
         captured.current = false;
-        setSingleFaceDetected(false);
       }
     }, [capturedSV?.value]);
 
-    // Initialize camera
-    const initializeCamera = useCallback(async () => {
+    // Get Camera Permission - from original code
+    const getPermission = useCallback(async () => {
       try {
         if (!isMounted.current) return;
-        if (initializationAttempts.current >= maxInitializationAttempts) {
-          setCameraError('Failed to initialize camera after multiple attempts');
-          return;
-        }
 
-        initializationAttempts.current += 1;
         setCameraError(null);
+        const newCameraPermission = await Camera.requestCameraPermission();
+        setCameraPermission(newCameraPermission);
 
-        const permission = await Camera.requestCameraPermission();
-        setCameraPermission(permission);
-
-        if (permission === 'granted') {
+        if (newCameraPermission === 'granted') {
           const devices = await Camera.getAvailableCameraDevices();
-          
-          if (!devices || devices.length === 0) {
-            throw new Error('No camera devices found');
-          }
-          
-          const device = getCameraDevice(devices, cameraType);
-
-          if (device) {
-            setCameraDevice(device);
-            setTimeout(() => setShowCamera(true), 100);
-            initializationAttempts.current = 0; // Reset attempts on success
-          } else {
-            throw new Error(`No camera device found for type: ${cameraType}`);
-          }
+          setCameraDevice(getCameraDevice(devices, currentCameraType));
+          setShowCamera(true);
         } else {
-          throw new Error(`Camera permission ${permission}`);
+          setCameraError('Camera permission denied');
         }
+      } catch (error) {
+        console.error('Camera permission error:', error);
+        setCameraError('Failed to get camera permission');
+      }
+    }, [currentCameraType]);
+
+    // Simplified camera initialization
+    const initializeCamera = useCallback(async () => {
+      try {
+        if (!isMounted.current) return;
+        await getPermission();
       } 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);
-        }
+        setCameraError('Failed to initialize camera');
       }
-    }, [cameraType]);
+    }, [getPermission]);
 
     // Effects: lifecycle, camera init, app state, cleanup
     useEffect(() => {
@@ -236,7 +217,6 @@ const CaptureImageWithoutEdit = React.memo(
       return () => {
         isMounted.current = false;
         setShowCamera(false);
-        // Reset frame processor state on unmount
         forceResetCaptureState();
       };
     }, [initializeCamera, forceResetCaptureState]);
@@ -246,6 +226,15 @@ const CaptureImageWithoutEdit = React.memo(
       updateIsActive(showCamera && cameraInitialized);
     }, [showCamera, cameraInitialized, updateIsActive]);
 
+    // Handle camera type changes from parent
+    useEffect(() => {
+      if (cameraType !== currentCameraType) {
+        setCurrentCameraType(cameraType);
+        // Reinitialize camera with new type
+        initializeCamera();
+      }
+    }, [cameraType, currentCameraType, initializeCamera]);
+
     // app state change
     useEffect(() => {
       const subscription = AppState.addEventListener('change', nextAppState => {
@@ -253,7 +242,6 @@ const CaptureImageWithoutEdit = React.memo(
           if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
             if (cameraPermission === 'granted') {
               setShowCamera(true);
-              // Reset capture state when app comes back to foreground
               if (captured.current) {
                 forceResetCaptureState();
                 resetCaptureState();
@@ -280,10 +268,9 @@ const CaptureImageWithoutEdit = React.memo(
     // android back handler
     useEffect(() => {
       const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
-        // Don't allow back press in camera screen
         return true;
       });
-      
+
       return () => {
         try {
           backHandler.remove();
@@ -316,7 +303,6 @@ const CaptureImageWithoutEdit = React.memo(
 
       setCameraError(errorMessage);
       setShowCamera(false);
-      // Reset capture state on error
       forceResetCaptureState();
       resetCaptureState();
     }, [forceResetCaptureState, resetCaptureState]);
@@ -324,7 +310,6 @@ const CaptureImageWithoutEdit = React.memo(
     const handleCameraInitialized = useCallback(() => {
       setCameraInitialized(true);
       setCameraError(null);
-      // Ensure frame processor is active after initialization
       updateIsActive(true);
     }, [updateIsActive]);
 
@@ -338,7 +323,6 @@ const CaptureImageWithoutEdit = React.memo(
     useEffect(() => {
       try {
         updateShowCodeScanner(!!showCodeScanner);
-        // Reset capture state when switching modes
         if (showCodeScanner && captured.current) {
           forceResetCaptureState();
           resetCaptureState();
@@ -352,7 +336,6 @@ const CaptureImageWithoutEdit = React.memo(
     const handleRetry = useCallback(() => {
       setCameraError(null);
       setShowCamera(false);
-      // Reset both local and frame processor state
       forceResetCaptureState();
       resetCaptureState();
       setTimeout(() => {
@@ -362,34 +345,101 @@ 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...';
-          }
+  
+
+    // Helper text for user guidance based on liveness level
+    const getInstruction = useCallback(() => {
+      if (faceCount > 1) {
+        return 'Multiple faces detected';
+      }
+
+      if (livenessLevel === 0) {
+        if (faces.length === 0) return 'Position your face in the frame';
+        if (progress < 100) return 'Hold still...';
+        return 'Perfect! Capturing...';
+      }
+
+      if (livenessLevel === 1) {
+        switch (livenessStep) {
+          case 0:
+            return 'Face the camera straight';
+          case 1:
+            return `Blink your eyes ${blinkCount} of 3 times`;
+          case 2:
+            return 'Perfect! Hold still — capturing...';
+          default:
+            return 'Align your face in frame';
+        }
+      }
+
+      if (livenessLevel === 2) {
+        switch (livenessStep) {
+          case 0:
+            return 'Face the camera straight';
+          case 1:
+            return 'Turn your head to the LEFT';
+          case 2:
+            return 'Turn your head to the RIGHT';
+          case 3:
+            return 'Perfect! Hold still — capturing...';
+          default:
+            return 'Align your face in frame';
+        }
+      }
+
+      if (livenessLevel === 3) {
+        switch (livenessStep) {
+          case 0:
+            return 'Face the camera straight';
+          case 1:
+            return 'Turn your head to the LEFT';
+          case 2:
+            return 'Turn your head to the RIGHT';
+          case 3:
+            return `Blink your eyes ${blinkCount} of 3 times`;
+          case 4:
+            return 'Perfect! Hold still — capturing...';
+          default:
+            return 'Align your face in frame';
+        }
+      }
+
+      return 'Align your face in frame';
+    }, [livenessLevel, livenessStep, blinkCount, faces.length, progress, faceCount]);
+
+
+    // Get step configuration based on liveness level
+    const getStepConfig = useCallback(() => {
+      switch (livenessLevel) {
+        case 0: // No liveness
+          return { totalSteps: 0, showSteps: false };
+        case 1: // Blink only
+          return { totalSteps: 1, showSteps: true };
+        case 2: // Face turn only
+          return { totalSteps: 2, showSteps: true };
+        case 3: // Both
+          return { totalSteps: 3, showSteps: true };
         default:
-          return 'Position your face in the frame';
+          return { totalSteps: 0, showSteps: false };
+      }
+    }, [livenessLevel]);
+
+    const stepConfig = getStepConfig();
+
+    // Get instruction text style based on content
+    const getInstructionStyle = useCallback(() => {
+      if (faceCount > 1) {
+        return [styles.instructionText, { color: Global.AppTheme.error }];
       }
-    };
+      return styles.instructionText;
+    }, [faceCount]);
 
     // camera placeholder / UI
     const renderCameraPlaceholder = () => (
       <View style={styles.cameraContainer}>
         {cameraError ? (
           <View style={styles.errorContainer}>
-            <Icon name="error-outline" size={40} color={COLORS.error} />
+            <Icon name="error-outline" size={40} color={Global.AppTheme.error} />
             <Text style={styles.errorText}>{cameraError}</Text>
             <TouchableOpacity
               style={styles.retryButton}
@@ -401,7 +451,7 @@ const CaptureImageWithoutEdit = React.memo(
           </View>
         ) : cameraPermission === 'denied' || cameraPermission === 'restricted' ? (
           <View style={styles.placeholderContainer}>
-            <Icon name="camera-off" size={40} color={COLORS.light} />
+            <Icon name="camera-off" size={40} color={Global.AppTheme.light} />
             <Text style={styles.placeholderText}>
               Camera permission required. Please enable in settings.
             </Text>
@@ -415,14 +465,14 @@ const CaptureImageWithoutEdit = React.memo(
           </View>
         ) : cameraPermission === 'not-determined' ? (
           <View style={styles.placeholderContainer}>
-            <ActivityIndicator size="large" color={COLORS.primary} />
+            <ActivityIndicator size="large" color={Global.AppTheme.primary} />
             <Text style={styles.placeholderText}>
               Requesting camera access...
             </Text>
           </View>
         ) : !cameraDevice ? (
           <View style={styles.placeholderContainer}>
-            <Icon name="camera-alt" size={40} color={COLORS.light} />
+            <Icon name="camera-alt" size={40} color={Global.AppTheme.light} />
             <Text style={styles.placeholderText}>Camera not available</Text>
             <TouchableOpacity
               style={styles.retryButton}
@@ -434,7 +484,7 @@ const CaptureImageWithoutEdit = React.memo(
           </View>
         ) : (
           <View style={styles.placeholderContainer}>
-            <ActivityIndicator size="large" color={COLORS.primary} />
+            <ActivityIndicator size="large" color={Global.AppTheme.primary} />
             <Text style={styles.placeholderText}>Initializing camera...</Text>
           </View>
         )}
@@ -447,106 +497,149 @@ const CaptureImageWithoutEdit = React.memo(
       !cameraError;
 
     return (
-      <View style={styles.cameraContainer}>
-        {shouldRenderCamera ? (
-          <Camera
-            ref={cameraRef}
-            style={styles.camera}
-            device={cameraDevice}
-            isActive={showCamera && !isLoading && appState.current === 'active'}
-            photo={true}
-            format={format}
-            codeScanner={showCodeScanner ? codeScanner : undefined}
-            frameProcessor={!showCodeScanner && cameraInitialized ? frameProcessor : undefined}
-            frameProcessorFps={frameProcessorFps}
-            onInitialized={handleCameraInitialized}
-            onError={handleCameraError}
-            enableZoomGesture={false}
-            exposure={0}
-            pixelFormat="yuv"
-            preset="medium"
-            orientation="portrait"
-          />
-        ) : (
-          renderCameraPlaceholder()
-        )}
+      <View style={styles.container}>
+        <View style={styles.cameraContainer}>
+          {shouldRenderCamera ? (
+            <Camera
+              ref={cameraRef}
+              style={styles.camera}
+              device={cameraDevice}
+              isActive={showCamera && !isLoading && appState.current === 'active'}
+              photo={true}
+              format={format}
+              codeScanner={showCodeScanner ? codeScanner : undefined}
+              frameProcessor={!showCodeScanner && cameraInitialized ? frameProcessor : undefined}
+              frameProcessorFps={frameProcessorFps}
+              onInitialized={handleCameraInitialized}
+              onError={handleCameraError}
+              enableZoomGesture={false}
+              exposure={0}
+              pixelFormat="yuv"
+              preset="medium"
+              orientation="portrait"
+            />
+          ) : (
+            renderCameraPlaceholder()
+          )}
 
-        {/* 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>
+          {/* Liveness Detection UI */}
+          {!showCodeScanner && shouldRenderCamera && livenessLevel > 0 && (
+            <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={getInstructionStyle()}>{getInstruction()}</Text>
+              </Animated.View>
+
+              {/* Blink Progress for blink steps */}
+              {(livenessLevel === 1 || livenessLevel === 3) && livenessStep === (livenessLevel === 1 ? 1 : 3) && (
+                <View style={styles.blinkProgressContainer}>
+                  {[1, 2, 3].map((i) => (
+                    <View
+                      key={i}
+                      style={[
+                        styles.blinkDot,
+                        blinkCount >= i && styles.blinkDotActive,
+                      ]}
+                    />
+                  ))}
+                </View>
+              )}
+
+              {/* Step Indicators - only show for liveness levels 1, 2, 3 */}
+              {stepConfig.showSteps && faceCount <= 1 && (
+                <>
+                  <View style={styles.stepsContainer}>
+                    {Array.from({ length: stepConfig.totalSteps + 1 }).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 < stepConfig.totalSteps && (
+                          <View style={[
+                            styles.stepConnector,
+                            livenessStep > step ? styles.connectorCompleted : {}
+                          ]} />
+                        )}
+                      </React.Fragment>
+                    ))}
                   </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>
+                  {/* Step Labels */}
+                  <View style={styles.stepLabelsContainer}>
+                    {livenessLevel === 1 && (
+                      <>
+                        <Text style={styles.stepLabel}>Center</Text>
+                        <Text style={styles.stepLabel}>Blink</Text>
+                      </>
+                    )}
+                    {livenessLevel === 2 && (
+                      <>
+                        <Text style={styles.stepLabel}>Center</Text>
+                        <Text style={styles.stepLabel}>Left</Text>
+                        <Text style={styles.stepLabel}>Right</Text>
+                      </>
+                    )}
+                    {livenessLevel === 3 && (
+                      <>
+                        <Text style={styles.stepLabel}>Center</Text>
+                        <Text style={styles.stepLabel}>Left</Text>
+                        <Text style={styles.stepLabel}>Right</Text>
+                        <Text style={styles.stepLabel}>Blink</Text>
+                      </>
+                    )}
+                  </View>
+                </>
+              )}
             </View>
-          </View>
-        )}
-
-        {/* Face detection status */}
-        {!showCodeScanner && shouldRenderCamera && faces.length > 1 && (
-          <View style={styles.faceDetectionStatus}>
-            <Text style={[styles.faceDetectionText, styles.multipleFacesText]}>
-              Multiple faces detected. Please ensure only one person is in the frame.
-            </Text>
-          </View>
-        )}
+          )}
 
-        {/* Controls */}
-        <View style={styles.cameraControls}>
-          {onToggleCamera && currentStep === 'Identity Verification' && shouldRenderCamera && (
-            <TouchableOpacity
-              style={[
-                styles.flipButton,
-                (isLoading || captured.current || livenessStep > 0) && styles.flipButtonDisabled,
-              ]}
-              onPress={onToggleCamera}
-              disabled={isLoading || captured.current || livenessStep > 0}
-              accessibilityLabel="Flip camera"
-            >
-              <Icon name="flip-camera-ios" size={28} color={COLORS.light} />
-            </TouchableOpacity>
+          {/* Simple face detection UI for liveness level 0 */}
+          {!showCodeScanner && shouldRenderCamera && livenessLevel === 0 && (
+            <View style={styles.livenessContainer}>
+              <Animated.View
+                style={[
+                  styles.instructionContainer,
+                  {
+                    opacity: instructionAnim,
+                  },
+                ]}
+              >
+                <Text style={getInstructionStyle()}>{getInstruction()}</Text>
+              </Animated.View>
+
+              {/* Progress bar for stability - only show when single face detected */}
+              {faceCount === 1 && (
+                <View style={styles.stabilityContainer}>
+                  <View style={styles.stabilityBar}>
+                    <View
+                      style={[
+                        styles.stabilityProgress,
+                        { width: `${progress}%` }
+                      ]}
+                    />
+                  </View>
+                </View>
+              )}
+            </View>
           )}
         </View>
       </View>
@@ -557,18 +650,40 @@ const CaptureImageWithoutEdit = React.memo(
 CaptureImageWithoutEdit.displayName = 'CaptureImageWithoutEdit';
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+  },
   cameraContainer: {
     flex: 1,
     width: '100%',
     borderRadius: 12,
     overflow: 'hidden',
-    backgroundColor: COLORS.dark,
+    backgroundColor: Global.AppTheme.dark,
     minHeight: 300,
   },
   camera: {
     flex: 1,
     width: '100%',
   },
+  controlsContainer: {
+    position: 'absolute',
+    bottom: 20,
+    right: 20,
+    alignItems: 'center',
+  },
+  cameraSwitchButton: {
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    padding: 12,
+    borderRadius: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  controlText: {
+    color: 'white',
+    fontSize: 10,
+    marginTop: 4,
+  },
   placeholderContainer: {
     flex: 1,
     justifyContent: 'center',
@@ -582,77 +697,28 @@ const styles = StyleSheet.create({
     padding: 20,
   },
   errorText: {
-    color: COLORS.error,
+    color: Global.AppTheme.error,
     fontSize: 16,
     textAlign: 'center',
     marginVertical: 16,
   },
   retryButton: {
-    backgroundColor: COLORS.primary,
+    backgroundColor: Global.AppTheme.primary,
     paddingHorizontal: 20,
     paddingVertical: 10,
     borderRadius: 8,
     marginTop: 10,
   },
   retryButtonText: {
-    color: COLORS.light,
+    color: Global.AppTheme.light,
     fontWeight: 'bold',
   },
   placeholderText: {
-    color: COLORS.light,
+    color: Global.AppTheme.light,
     fontSize: 16,
     textAlign: 'center',
     marginTop: 16,
   },
-  cameraControls: {
-    position: 'absolute',
-    bottom: 30,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  flipButton: {
-    position: 'absolute',
-    right: 30,
-    bottom: 40,
-    width: 55,
-    height: 55,
-    borderRadius: 27.5,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOpacity: 0.3,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 5,
-    elevation: 6,
-  },
-  flipButtonDisabled: {
-    opacity: 0.5,
-  },
-  faceDetectionStatus: {
-    position: 'absolute',
-    top: 40,
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-  },
-  faceDetectionText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-    backgroundColor: 'rgba(0,0,0,0.7)',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 8,
-    textAlign: 'center',
-    marginHorizontal: 20,
-  },
-  multipleFacesText: {
-    backgroundColor: 'rgba(255,0,0,0.7)',
-  },
   // Liveness detection styles
   livenessContainer: {
     position: 'absolute',
@@ -667,7 +733,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 12,
     borderRadius: 8,
-    marginBottom: 20,
+    marginBottom: 10,
   },
   instructionText: {
     color: 'white',
@@ -675,6 +741,20 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     textAlign: 'center',
   },
+  blinkProgressContainer: {
+    flexDirection: 'row',
+    marginVertical: 8,
+  },
+  blinkDot: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: '#555',
+    marginHorizontal: 4,
+  },
+  blinkDotActive: {
+    backgroundColor: '#00ff88',
+  },
   stepsContainer: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -689,12 +769,12 @@ const styles = StyleSheet.create({
     borderWidth: 2,
   },
   stepCompleted: {
-    backgroundColor: COLORS.primary,
-    borderColor: COLORS.primary,
+    backgroundColor: Global.AppTheme.primary,
+    borderColor: Global.AppTheme.primary,
   },
   stepCurrent: {
-    backgroundColor: COLORS.primary,
-    borderColor: COLORS.primary,
+    backgroundColor: Global.AppTheme.primary,
+    borderColor: Global.AppTheme.primary,
     opacity: 0.7,
   },
   stepPending: {
@@ -713,13 +793,13 @@ const styles = StyleSheet.create({
     marginHorizontal: 4,
   },
   connectorCompleted: {
-    backgroundColor: COLORS.primary,
+    backgroundColor: Global.AppTheme.primary,
   },
   stepLabelsContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     width: '100%',
-    paddingHorizontal: 10,
+    paddingHorizontal: 5,
   },
   stepLabel: {
     color: 'white',
@@ -728,6 +808,24 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     flex: 1,
   },
+  // Stability bar for level 0
+  stabilityContainer: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  stabilityBar: {
+    width: '80%',
+    height: 6,
+    backgroundColor: 'rgba(255,255,255,0.3)',
+    borderRadius: 3,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  stabilityProgress: {
+    height: '100%',
+    backgroundColor: Global.AppTheme.primary,
+    borderRadius: 3,
+  },
 });
 
 export default CaptureImageWithoutEdit;