@trustchex/react-native-sdk 1.355.1 → 1.357.0

package/lib/module/Screens/Dynamic/LivenessDetectionScreen.js

@@ -2,10 +2,9 @@
 
 import Svg, { Rect as SvgRect, Circle, Mask } from 'react-native-svg';
 import { useNavigation } from '@react-navigation/native';
-import React, { useState, useReducer, useContext, useEffect, useCallback } from 'react';
-import { Dimensions, Text, View, StyleSheet, Platform, Vibration } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import React, { useState, useReducer, useContext, useEffect, useCallback, useRef } from 'react';
+import { StyleSheet, Text, View, Dimensions, Vibration } from 'react-native';
+import { useSafeAreaInsets, SafeAreaView } from 'react-native-safe-area-context';
 import NativeCircularProgress from "../../Shared/Components/NativeCircularProgress.js";
 import FaceCamera from "../../Shared/Components/FaceCamera.js";
 import NavigationManager from "../../Shared/Components/NavigationManager.js";
@@ -14,7 +13,7 @@ import { contains } from "../../Shared/Libs/contains.js";
 import { useTranslation } from 'react-i18next';
 import StyledButton from "../../Shared/Components/StyledButton.js";
 import LottieView from 'lottie-react-native';
-import { speakWithDebounce } from "../../Shared/Libs/tts.utils.js";
+import { speak, resetLastMessage } from "../../Shared/Libs/tts.utils.js";
 import { trackFunnelStep, useScreenTracking, trackVerificationStart, trackVerificationComplete } from "../../Shared/Libs/analytics.utils.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const {
@@ -41,6 +40,7 @@ const LivenessDetectionScreen = () => {
   } = useTranslation();
   const [isRecording, setIsRecording] = useState(false);
   const insets = useSafeAreaInsets();
+  const referenceFaceTrackingId = useRef(null);
 
   // Track screen view and exit
   useScreenTracking('liveness_detection');
@@ -56,13 +56,16 @@ const LivenessDetectionScreen = () => {
     processComplete: false,
     videoPath: ''
   });
-  const [instructions, _setInstructions] = useState({
+  const hasNavigatedRef = useRef(false);
+  const [instructions] = useState({
     START: {
       instruction: t('livenessDetectionScreen.start')
     },
     SMILE: {
       instruction: t('livenessDetectionScreen.smile'),
-      minProbability: 0.7
+      minProbability: 0.7,
+      maxAngle: LOOK_STRAIGHT_ANGLE_LIMIT,
+      minAngle: -LOOK_STRAIGHT_ANGLE_LIMIT
     },
     LOOK_STRAIGHT_AND_BLINK: {
       instruction: t('livenessDetectionScreen.lookStraightAndBlink'),
@@ -91,6 +94,8 @@ const LivenessDetectionScreen = () => {
   });
   const [instructionList, setInstructionList] = useState([]);
   const [hasGuideShown, setHasGuideShown] = useState(false);
+  const stoppingRecordingRef = useRef(false); // Track if we're already stopping to prevent multiple calls
+  const lastVoiceGuidanceMessage = useRef('');
   useEffect(() => {
     const il = Object.keys(instructions).filter(instruction => !['START', 'FINISH'].includes(instruction) && (
     // Look straight and blink is always included
@@ -110,55 +115,73 @@ const LivenessDetectionScreen = () => {
       processComplete: false,
       videoPath: ''
     });
+    lastVoiceGuidanceMessage.current = '';
+    resetLastMessage();
   }, [instructions, appContext.currentWorkflowStep?.data?.allowedLivenessInstructionTypes]);
+  const isCommandInProgress = useRef(false);
   const startRecording = useCallback(async () => {
-    if (isRecording) {
-      try {
+    console.log('[LivenessDetection] startRecording called, current state isRecording:', isRecording);
+    if (isCommandInProgress.current) {
+      console.log('[LivenessDetection] Skipping startRecording: Command already in progress');
+      return;
+    }
+    isCommandInProgress.current = true;
+    try {
+      if (isRecording) {
+        console.log('[LivenessDetection] isRecording is true, cancelling existing recording first');
         await camera?.cancelRecording();
         setIsRecording(false);
-      } catch (error) {
-        // User cancelled recording - expected behavior, no need to track
       }
-    }
-    setTimeout(() => {
-      // Track liveness check started
+      console.log('[LivenessDetection] Starting new recording');
       trackVerificationStart('LIVENESS_CHECK');
       camera?.startRecording({
         fileType: 'mp4',
-        videoCodec: 'h265',
-        onRecordingError() {
-          // Recording errors are retried automatically, no need to track them
+        onRecordingError(error) {
+          console.error('[LivenessDetection] *** Recording error callback ***:', error);
           setIsRecording(false);
+          isCommandInProgress.current = false;
         },
         onRecordingFinished(video) {
-          setTimeout(() => {
-            dispatch({
-              type: 'VIDEO_RECORDED',
-              payload: video.path
-            });
-
-            // Track liveness check completion
-            trackVerificationComplete('LIVENESS_CHECK', true, 1);
-            trackFunnelStep('Liveness Check Completed', 3, 5, 'document_scanning', true);
-            setIsRecording(false);
-          }, 500);
+          // Only process if we actually called stopRecording (i.e., reached FINISH)
+          if (!stoppingRecordingRef.current) {
+            return;
+          }
+          dispatch({
+            type: 'VIDEO_RECORDED',
+            payload: video.path
+          });
+          trackVerificationComplete('LIVENESS_CHECK', true, 1);
+          trackFunnelStep('Liveness Check Completed', 3, 5, 'document_scanning', true);
+          setIsRecording(false);
+          isCommandInProgress.current = false;
         }
       });
-    }, 500);
-    setIsRecording(true);
+      setIsRecording(true);
+      console.log('[LivenessDetection] startRecording command sent to camera');
+    } catch (error) {
+      console.error('[LivenessDetection] Error in startRecording:', error);
+      isCommandInProgress.current = false;
+    }
   }, [camera, isRecording]);
   const stopRecording = useCallback(async () => {
     try {
       await camera?.stopRecording();
-      setIsRecording(false);
     } catch (error) {
-      // Stop recording can fail due to race conditions when user navigates away
-      // This is expected behavior and not actionable
+      console.error('[LivenessDetection] Error in stopRecording:', error);
     }
   }, [camera]);
-  const areEyesOpen = face => face.leftEyeOpenProbability >= 0.8 && face.rightEyeOpenProbability >= 0.8;
+  const areEyesOpen = face => {
+    // Handle undefined probabilities (when ML Kit can't detect eyes)
+    const leftOpen = face.leftEyeOpenProbability ?? 0;
+    const rightOpen = face.rightEyeOpenProbability ?? 0;
+    return leftOpen >= 0.8 && rightOpen >= 0.8;
+  };
   const instructionReducer = (state, action) => {
     switch (action.type) {
+      case 'RESET':
+        console.log('[LivenessDetection] Resetting to initial state');
+        referenceFaceTrackingId.current = null;
+        return initialState;
       case 'BRIGHTNESS_LOW':
         if (action.payload) {
           return {
@@ -181,7 +204,8 @@ const LivenessDetectionScreen = () => {
         if (action.payload) {
           return {
             ...state,
-            faceTooBig: action.payload
+            faceTooBig: action.payload,
+            progressFill: 0
           };
         }
         return initialState;
@@ -190,39 +214,170 @@ const LivenessDetectionScreen = () => {
           return {
             ...state,
             faceDetected: action.payload,
-            progressFill: 100 / (state.instructionList.length + 1)
+            progressFill: state.currentInstruction === 'START' ? 0 // No actions completed yet
+            : state.progressFill // Keep progress if we're past START
           };
         }
-        return initialState;
+        // Face lost - reset to START if we haven't begun the flow yet
+        console.log('[LivenessDetection] Face lost');
+        if (state.currentInstruction === 'START') {
+          return {
+            ...state,
+            faceDetected: false,
+            progressFill: 0
+          };
+        }
+        // If past START, this should have been caught by onFacesDetected
+        // but just in case, keep state stable
+        return {
+          ...state,
+          faceDetected: false
+        };
       case 'VIDEO_RECORDED':
+        // Only finalize if we're at FINISH instruction - prevents premature completion from stale callbacks
+        if (state.currentInstruction !== 'FINISH') {
+          return state;
+        }
         return {
           ...state,
-          videoPath: action.payload
+          videoPath: action.payload,
+          processComplete: true,
+          progressFill: 100
         };
       case 'NEXT_INSTRUCTION':
-        if (action.payload === 'FINISH') {
+        {
+          const currentInstructionIndex = state.instructionList.indexOf(action.payload);
+          const nextInstructionIndex = currentInstructionIndex + 1;
+          const nextInstruction = state.instructionList[nextInstructionIndex];
+
+          // Reset TTS state when moving to any new instruction to ensure it speaks
+          lastVoiceGuidanceMessage.current = '';
+          resetLastMessage();
+
+          // Calculate progress based on actual action steps (excluding START and FINISH)
+          // When last action is completed (moving to FINISH), show 100%
+          const totalActionSteps = state.instructionList.length - 2; // Exclude START and FINISH
+          const completedActionSteps = currentInstructionIndex; // Steps completed before current (START is index 0)
+
+          const newProgressFill = nextInstruction === 'FINISH' ? 100 // Last action completed - show 100%
+          : completedActionSteps / totalActionSteps * 100;
           return {
             ...state,
-            processComplete: true,
-            progressFill: 100
+            currentInstruction: nextInstruction,
+            progressFill: newProgressFill
           };
         }
-        const nextInstructionIndex = instructionList.findIndex(instruction => instruction === action.payload) + 1;
-        const nextInstruction = state.instructionList[nextInstructionIndex];
-        const progressMultiplier = nextInstructionIndex + 1;
-        const newProgressFill = 100 / (state.instructionList.length + 1) * progressMultiplier;
-        return {
-          ...state,
-          currentInstruction: nextInstruction,
-          progressFill: newProgressFill
-        };
       default:
         throw new Error('Unexpected action type.');
     }
   };
   const [state, dispatch] = useReducer(instructionReducer, initialState);
-  const onFacesDetected = useCallback(async (faces, image, isImageBright) => {
+  useEffect(() => {
+    if (!appContext.currentWorkflowStep?.data?.voiceGuidanceActive || !hasGuideShown) return;
+    let text = '';
+
+    // Priority order: errors first, then face placement, then instructions
+    if (state.brightnessLow) {
+      text = t('livenessDetectionScreen.brightnessLow');
+    } else if (state.multipleFacesDetected) {
+      text = t('livenessDetectionScreen.multipleFacesDetected');
+    } else if (state.faceTooBig) {
+      text = t('livenessDetectionScreen.faceTooBig');
+    } else if (!state.faceDetected) {
+      // Only speak "place face" message when face is not detected
+      text = t('livenessDetectionScreen.placeFaceInsideCircle');
+    } else if (state.faceDetected && state.currentInstruction !== 'START') {
+      // Face is detected and we've moved past START - speak the actual instruction
+      // Don't speak START instruction, wait for first actual liveness instruction
+      text = instructions[state.currentInstruction]?.instruction ?? '';
+    }
+    // If currentInstruction is 'START' and face is detected, don't speak anything
+    // Let the instruction advance first, then speak the next instruction
+
+    // Only speak if message changed and is not empty
+    if (text && text !== lastVoiceGuidanceMessage.current) {
+      lastVoiceGuidanceMessage.current = text;
+      // Bypass interval for liveness instructions to ensure all instructions are spoken
+      speak(text, true);
+    }
+  }, [appContext.currentWorkflowStep?.data?.voiceGuidanceActive, hasGuideShown, state.brightnessLow, state.multipleFacesDetected, state.faceTooBig, state.faceDetected, state.currentInstruction, instructions, t]);
+  const onFacesDetected = useCallback(async (faces, image, isImageBright, frameWidth, frameHeight) => {
+    // Skip processing if recording is being finalized or process is already complete
+    if (stoppingRecordingRef.current || state.processComplete) {
+      return;
+    }
+
+    // Check if no faces detected
+    if (faces.length === 0) {
+      // Face not detected - reset progress if we've started the flow
+      if (state.currentInstruction === 'START') {
+        // Just mark face as not detected
+        dispatch({
+          type: 'FACE_DETECTED',
+          payload: false
+        });
+      } else {
+        console.log('[LivenessDetection] No face detected after START, resetting to beginning');
+        if (isRecording) {
+          await camera?.cancelRecording();
+          setIsRecording(false);
+        }
+        isCommandInProgress.current = false;
+        stoppingRecordingRef.current = false;
+        dispatch({
+          type: 'RESET',
+          payload: undefined
+        });
+      }
+      return;
+    }
     const face = faces[0];
+
+    // Track face identity - ensure same person throughout liveness check
+    if (face.trackingId !== undefined) {
+      if (referenceFaceTrackingId.current === null) {
+        // First face detected - store tracking ID
+        referenceFaceTrackingId.current = face.trackingId;
+        console.log('[LivenessDetection] Stored reference face tracking ID:', face.trackingId);
+      } else if (referenceFaceTrackingId.current !== face.trackingId) {
+        // Different person detected - reset
+        console.log('[LivenessDetection] Different person detected (tracking ID changed from', referenceFaceTrackingId.current, 'to', face.trackingId, '), resetting');
+        if (isRecording) {
+          await camera?.cancelRecording();
+          setIsRecording(false);
+        }
+        isCommandInProgress.current = false;
+        stoppingRecordingRef.current = false;
+        referenceFaceTrackingId.current = null;
+        dispatch({
+          type: 'RESET',
+          payload: undefined
+        });
+        return;
+      }
+    }
+
+    // Check if frame orientation is correct (should be portrait: width < height)
+    if (frameWidth > frameHeight) {
+      console.warn('[LivenessDetection] WARNING: Frame is landscape but expected portrait!', {
+        frameWidth,
+        frameHeight,
+        faceX: face.bounds.x,
+        faceY: face.bounds.y,
+        faceWidth: face.bounds.width,
+        faceHeight: face.bounds.height
+      });
+    }
+
+    // Calculate preview rect in frame coordinates (not screen coordinates)
+    // Preview circle is 80% of frame width, centered
+    const previewSizeInFrame = frameWidth * 0.8;
+    const previewRectInFrame = {
+      minX: (frameWidth - previewSizeInFrame) / 2,
+      minY: (frameHeight - previewSizeInFrame) / 2,
+      width: previewSizeInFrame,
+      height: previewSizeInFrame
+    };
     const faceRectSmaller = {
       width: face.bounds.width - PREVIEW_EDGE_OFFSET,
       height: face.bounds.height - PREVIEW_EDGE_OFFSET,
@@ -230,22 +385,52 @@ const LivenessDetectionScreen = () => {
       minX: face.bounds.x + PREVIEW_EDGE_OFFSET / 2
     };
     const previewContainsFace = contains({
-      outside: PREVIEW_RECT,
+      outside: previewRectInFrame,
       inside: faceRectSmaller
     });
     const multipleFacesDetected = faces.length > 1;
     if (!isImageBright) {
-      dispatch({
-        type: 'BRIGHTNESS_LOW',
-        payload: true
-      });
+      // Brightness too low - reset progress if we've started the flow
+      if (state.currentInstruction === 'START') {
+        dispatch({
+          type: 'BRIGHTNESS_LOW',
+          payload: true
+        });
+      } else {
+        console.log('[LivenessDetection] Brightness low after START, resetting to beginning');
+        if (isRecording) {
+          await camera?.cancelRecording();
+          setIsRecording(false);
+        }
+        isCommandInProgress.current = false;
+        stoppingRecordingRef.current = false;
+        dispatch({
+          type: 'RESET',
+          payload: undefined
+        });
+      }
       return;
     }
     if (!previewContainsFace) {
-      dispatch({
-        type: 'FACE_DETECTED',
-        payload: false
-      });
+      // Face went outside circle - reset progress if we've started the flow
+      if (state.currentInstruction === 'START') {
+        dispatch({
+          type: 'FACE_DETECTED',
+          payload: false
+        });
+      } else {
+        console.log('[LivenessDetection] Face outside circle after START, resetting to beginning');
+        if (isRecording) {
+          await camera?.cancelRecording();
+          setIsRecording(false);
+        }
+        isCommandInProgress.current = false;
+        stoppingRecordingRef.current = false;
+        dispatch({
+          type: 'RESET',
+          payload: undefined
+        });
+      }
       return;
     }
     if (state.brightnessLow) {
@@ -255,10 +440,25 @@ const LivenessDetectionScreen = () => {
       });
     }
     if (!state.multipleFacesDetected && multipleFacesDetected) {
-      dispatch({
-        type: 'MULTIPLE_FACES_DETECTED',
-        payload: true
-      });
+      // Multiple faces detected - reset progress if we've started the flow
+      if (state.currentInstruction === 'START') {
+        dispatch({
+          type: 'MULTIPLE_FACES_DETECTED',
+          payload: true
+        });
+      } else {
+        console.log('[LivenessDetection] Multiple faces after START, resetting to beginning');
+        if (isRecording) {
+          await camera?.cancelRecording();
+          setIsRecording(false);
+        }
+        isCommandInProgress.current = false;
+        stoppingRecordingRef.current = false;
+        dispatch({
+          type: 'RESET',
+          payload: undefined
+        });
+      }
       return;
     }
     if (state.multipleFacesDetected && !multipleFacesDetected) {
@@ -267,22 +467,41 @@ const LivenessDetectionScreen = () => {
         payload: false
       });
     }
-    if (!state.faceDetected) {
-      if (face.bounds.width >= PREVIEW_SIZE && face.bounds.height >= PREVIEW_SIZE) {
+
+    // Check if face is too big
+    const faceTooBig = face.bounds.width >= previewSizeInFrame && face.bounds.height >= previewSizeInFrame;
+    if (faceTooBig) {
+      // Face too big - reset progress if we've started the flow
+      if (state.currentInstruction !== 'START') {
+        console.log('[LivenessDetection] Face too big after START, resetting to beginning');
+        if (isRecording) {
+          await camera?.cancelRecording();
+          setIsRecording(false);
+        }
+        isCommandInProgress.current = false;
+        stoppingRecordingRef.current = false;
         dispatch({
-          type: 'FACE_TOO_BIG',
-          payload: true
+          type: 'RESET',
+          payload: undefined
         });
-        return;
-      }
-      if (state.faceTooBig) {
+      } else if (!state.faceTooBig) {
         dispatch({
           type: 'FACE_TOO_BIG',
-          payload: false
+          payload: true
         });
-        return;
       }
+      return;
+    }
+
+    // Face is good size now, clear too big flag if set
+    if (state.faceTooBig) {
+      dispatch({
+        type: 'FACE_TOO_BIG',
+        payload: false
+      });
     }
+
+    // Face is detected and good size
     if (!state.faceDetected) {
       dispatch({
         type: 'FACE_DETECTED',
@@ -292,13 +511,11 @@ const LivenessDetectionScreen = () => {
     if (state.currentInstruction !== state.previousInstruction) {
       state.previousInstruction = state.currentInstruction;
       Vibration.vibrate(100);
-      if (appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
-        speakWithDebounce(instructions[state.currentInstruction]?.instruction ?? '');
-      }
     }
     switch (state.currentInstruction) {
       case 'START':
         if (state.faceDetected) {
+          console.log('[LivenessDetection] Starting flow...');
           await startRecording();
           dispatch({
             type: 'NEXT_INSTRUCTION',
@@ -310,6 +527,7 @@ const LivenessDetectionScreen = () => {
         if (instructions.LOOK_STRAIGHT_AND_BLINK.minAngle < face.yawAngle && face.yawAngle < instructions.LOOK_STRAIGHT_AND_BLINK.maxAngle && instructions.LOOK_STRAIGHT_AND_BLINK.minAngle < face.pitchAngle && face.pitchAngle < instructions.LOOK_STRAIGHT_AND_BLINK.maxAngle) {
           if (instructions.LOOK_STRAIGHT_AND_BLINK.eyesClosed) {
             if (areEyesOpen(face)) {
+              console.log('[LivenessDetection] LOOK_STRAIGHT_AND_BLINK: Eyes opened, completing instruction');
               instructions.LOOK_STRAIGHT_AND_BLINK.eyesClosed = false;
               instructions.LOOK_STRAIGHT_AND_BLINK.photo = image;
               dispatch({
@@ -323,14 +541,22 @@ const LivenessDetectionScreen = () => {
         }
         return;
       case 'SMILE':
-        if (face.smilingProbability >= instructions.SMILE.minProbability) {
-          instructions.SMILE.photo = image;
-          dispatch({
-            type: 'NEXT_INSTRUCTION',
-            payload: 'SMILE'
-          });
+        {
+          // Handle undefined smilingProbability (when ML Kit can't detect smile)
+          const smilingProb = face.smilingProbability ?? 0;
+          // Ensure user is looking at camera (face direction check)
+          const isFacingCamera = instructions.SMILE.minAngle < face.yawAngle && face.yawAngle < instructions.SMILE.maxAngle && instructions.SMILE.minAngle < face.pitchAngle && face.pitchAngle < instructions.SMILE.maxAngle;
+
+          // Check if smiling with sufficient probability AND looking at camera AND eyes open
+          if (smilingProb >= instructions.SMILE.minProbability && isFacingCamera && areEyesOpen(face)) {
+            instructions.SMILE.photo = image;
+            dispatch({
+              type: 'NEXT_INSTRUCTION',
+              payload: 'SMILE'
+            });
+          }
+          return;
         }
-        return;
       case 'LOOK_UP':
         if (face.pitchAngle >= instructions.LOOK_UP.minAngle && areEyesOpen(face)) {
           instructions.LOOK_UP.photo = image;
@@ -341,108 +567,93 @@ const LivenessDetectionScreen = () => {
         }
         return;
       case 'TURN_HEAD_LEFT':
-        if (Platform.OS === 'ios') {
-          if (face.yawAngle <= instructions.TURN_HEAD_LEFT.maxAngle && areEyesOpen(face)) {
-            instructions.TURN_HEAD_LEFT.photo = image;
-            dispatch({
-              type: 'NEXT_INSTRUCTION',
-              payload: 'TURN_HEAD_LEFT'
-            });
-          }
-        } else {
-          if (face.yawAngle >= instructions.TURN_HEAD_LEFT.minAngle && areEyesOpen(face)) {
+        {
+          const isLeftTurn = face.yawAngle >= TURN_ANGLE_LIMIT;
+          if (isLeftTurn && areEyesOpen(face)) {
             instructions.TURN_HEAD_LEFT.photo = image;
             dispatch({
               type: 'NEXT_INSTRUCTION',
               payload: 'TURN_HEAD_LEFT'
             });
           }
+          return;
         }
-        return;
       case 'TURN_HEAD_RIGHT':
-        if (Platform.OS === 'ios') {
-          if (face.yawAngle >= instructions.TURN_HEAD_RIGHT.maxAngle && areEyesOpen(face)) {
-            instructions.TURN_HEAD_RIGHT.photo = image;
-            dispatch({
-              type: 'NEXT_INSTRUCTION',
-              payload: 'TURN_HEAD_RIGHT'
-            });
-          }
-        } else {
-          if (face.yawAngle <= instructions.TURN_HEAD_RIGHT.minAngle && areEyesOpen(face)) {
+        {
+          const isRightTurn = face.yawAngle <= -TURN_ANGLE_LIMIT;
+          if (isRightTurn && areEyesOpen(face)) {
             instructions.TURN_HEAD_RIGHT.photo = image;
             dispatch({
               type: 'NEXT_INSTRUCTION',
               payload: 'TURN_HEAD_RIGHT'
             });
           }
+          return;
         }
-        return;
       case 'FINISH':
-        await stopRecording();
-        dispatch({
-          type: 'NEXT_INSTRUCTION',
-          payload: 'FINISH'
+        // Prevent multiple calls to stopRecording
+        if (stoppingRecordingRef.current) {
+          return;
+        }
+        stoppingRecordingRef.current = true;
+        stopRecording().catch(error => {
+          console.error('[LivenessDetection] Error stopping recording:', error);
         });
         return;
     }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [state.brightnessLow, state.faceDetected, state.multipleFacesDetected, state.faceTooBig, state.currentInstruction, instructions.LOOK_STRAIGHT_AND_BLINK, instructions.SMILE, instructions.LOOK_UP, instructions.TURN_HEAD_LEFT, instructions.TURN_HEAD_RIGHT, stopRecording, startRecording]);
+  [state.brightnessLow, state.faceDetected, state.multipleFacesDetected, state.faceTooBig, state.currentInstruction, instructions.LOOK_STRAIGHT_AND_BLINK, instructions.SMILE, instructions.LOOK_UP, instructions.TURN_HEAD_LEFT, instructions.TURN_HEAD_RIGHT, stopRecording, startRecording, isRecording, camera, state.processComplete]);
   useEffect(() => {
-    if (state.processComplete && !!state.videoPath && !!state.instructionList && !!appContext.identificationInfo && !!navigation && !!instructions) {
+    console.log('[LivenessDetection] Navigation check:', {
+      processComplete: state.processComplete,
+      hasVideoPath: !!state.videoPath,
+      videoPath: state.videoPath,
+      hasInstructionList: !!state.instructionList,
+      hasIdentificationInfo: !!appContext.identificationInfo,
+      hasNavigation: !!navigation,
+      hasNavigated: hasNavigatedRef.current
+    });
+    if (state.processComplete && state.videoPath && !!state.instructionList && !!appContext.identificationInfo && !!navigation && !!instructions && !hasNavigatedRef.current) {
+      console.log('[LivenessDetection] All conditions met, finalizing liveness data');
+      hasNavigatedRef.current = true;
       appContext.identificationInfo.livenessDetection = {
-        instructions: [...state.instructionList.map(instruction => ({
+        instructions: state.instructionList.map(instruction => ({
           instruction: instruction,
           photo: instructions[instruction].photo ?? ''
-        }))],
+        })),
         videoPath: state.videoPath
       };
+      console.log('[LivenessDetection] Navigating to next step');
       navigationManagerRef.current?.navigateToNextStep();
     }
   }, [state.processComplete, state.videoPath, state.instructionList, appContext.identificationInfo, navigation, instructions]);
+
+  // Cleanup: Cancel recording when component unmounts
+  // IMPORTANT: Empty dependency array ensures this only runs on actual unmount
+  useEffect(() => {
+    // Capture the ref itself (not its value) so we can read .current at cleanup time
+    const stoppingRef = stoppingRecordingRef;
+    const cameraRef = camera;
+    return () => {
+      console.log('[LivenessDetection] Component unmounting, checking if should cancel recording');
+      console.log('[LivenessDetection] stoppingRecordingRef.current:', stoppingRef.current);
+      // Don't cancel if we're already stopping/finishing - let the recording finalize
+      if (stoppingRef.current) {
+        console.log('[LivenessDetection] Recording is finishing, not cancelling');
+        return;
+      }
+      console.log('[LivenessDetection] Cancelling incomplete recording');
+      // Cancel any ongoing recording when component unmounts
+      cameraRef?.cancelRecording().catch(() => {
+        // Ignore errors during cleanup
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Empty array = only run on mount/unmount
+
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [!hasGuideShown ? /*#__PURE__*/_jsxs(SafeAreaView, {
-      style: styles.guide,
-      children: [/*#__PURE__*/_jsx(LottieView, {
-        source: require('../../Shared/Animations/face-scan.json'),
-        style: styles.guideAnimation,
-        loop: true,
-        autoPlay: true
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.guideHeader,
-        children: t('livenessDetectionScreen.guideHeader')
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.guidePoints,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.guideText,
-          children: t('livenessDetectionScreen.guideText')
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.guideText,
-          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint1')]
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.guideText,
-          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint2')]
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.guideText,
-          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint3')]
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.guideText,
-          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint4')]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: {
-          paddingBottom: insets.bottom
-        },
-        children: /*#__PURE__*/_jsx(StyledButton, {
-          mode: "contained",
-          onPress: () => {
-            setHasGuideShown(true);
-          },
-          children: t('general.letsGo')
-        })
-      })]
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [hasGuideShown ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(FaceCamera, {
         onFacesDetected: onFacesDetected,
         onCameraInitialized: setCamera,
@@ -481,11 +692,13 @@ const LivenessDetectionScreen = () => {
           mask: "url(#hole-mask)"
         })]
       }), /*#__PURE__*/_jsx(View, {
-        style: [styles.instructionsContainerTop, {
-          paddingTop: insets.top
+        style: [styles.instructionsContainerBottom, {
+          top: PREVIEW_RECT.minY + PREVIEW_SIZE + 20
         }],
         children: /*#__PURE__*/_jsx(Text, {
-          style: styles.instructions,
+          style: styles.action,
+          numberOfLines: 3,
+          adjustsFontSizeToFit: true,
           children: (() => {
             if (state.brightnessLow) {
               return t('livenessDetectionScreen.brightnessLow');
@@ -493,20 +706,52 @@ const LivenessDetectionScreen = () => {
               return t('livenessDetectionScreen.multipleFacesDetected');
             } else if (state.faceTooBig) {
               return t('livenessDetectionScreen.faceTooBig');
-            } else if (state.faceDetected) {
-              return t('livenessDetectionScreen.followInstructions');
-            } else {
+            } else if (!state.faceDetected) {
               return t('livenessDetectionScreen.placeFaceInsideCircle');
+            } else {
+              return instructions[state.currentInstruction]?.instruction ?? '';
             }
           })()
         })
+      })]
+    }) : /*#__PURE__*/_jsxs(SafeAreaView, {
+      style: styles.guide,
+      children: [/*#__PURE__*/_jsx(LottieView, {
+        source: require('../../Shared/Animations/face-scan.json'),
+        style: styles.guideAnimation,
+        loop: true,
+        autoPlay: true
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.guideHeader,
+        children: t('livenessDetectionScreen.guideHeader')
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.guidePoints,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.guideText,
+          children: t('livenessDetectionScreen.guideText')
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint1')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint2')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint3')]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.guideText,
+          children: ["\u2022 ", t('livenessDetectionScreen.guidePoint4')]
+        })]
       }), /*#__PURE__*/_jsx(View, {
-        style: [styles.instructionsContainerBottom, {
+        style: {
           paddingBottom: insets.bottom
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.action,
-          children: state.faceDetected && !state.faceTooBig && !state.multipleFacesDetected && !state.brightnessLow && instructions[state.currentInstruction]?.instruction
+        },
+        children: /*#__PURE__*/_jsx(StyledButton, {
+          mode: "contained",
+          onPress: () => {
+            setHasGuideShown(true);
+          },
+          children: t('general.letsGo')
         })
       })]
     }), /*#__PURE__*/_jsx(View, {
@@ -546,43 +791,23 @@ const styles = StyleSheet.create({
     left: 0,
     zIndex: 1
   },
-  instructionsContainerTop: {
-    flex: 1,
-    position: 'absolute',
-    top: 0,
-    width: '100%',
-    height: windowHeight / 4,
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    zIndex: 1,
-    padding: 20
-  },
   instructionsContainerBottom: {
-    flex: 1,
     position: 'absolute',
-    bottom: 0,
     width: '100%',
-    height: windowHeight / 4,
+    maxHeight: windowHeight / 4,
     justifyContent: 'flex-start',
     alignItems: 'center',
     zIndex: 1,
-    padding: 20,
-    gap: 20
-  },
-  instructions: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: 20,
-    color: 'black'
+    paddingHorizontal: 20,
+    paddingVertical: 10
   },
   action: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: 24,
+    fontSize: 22,
     fontWeight: 'bold',
-    color: 'black'
+    color: 'black',
+    textAlign: 'center',
+    lineHeight: 30,
+    paddingHorizontal: 10
   },
   footer: {
     position: 'absolute',