@trustchex/react-native-sdk 1.355.1 → 1.357.0

package/src/Screens/Dynamic/LivenessDetectionScreen.tsx

@@ -6,21 +6,16 @@ import React, {
   useContext,
   useEffect,
   useCallback,
+  useRef,
 } from 'react';
+import { StyleSheet, Text, View, Dimensions, Vibration } from 'react-native';
 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';
+  useSafeAreaInsets,
+  SafeAreaView,
+} from 'react-native-safe-area-context';
 import NativeCircularProgress from '../../Shared/Components/NativeCircularProgress';
-import { Camera } from 'react-native-vision-camera';
-import type { Face } from '../../Shared/VisionCameraPlugins/FaceDetector';
-import FaceCamera from '../../Shared/Components/FaceCamera';
+import type { TrustchexCameraHandle } from '../../Shared/Components/TrustchexCamera';
+import FaceCamera, { type Face } from '../../Shared/Components/FaceCamera';
 import NavigationManager, {
   type NavigationManagerRef,
 } from '../../Shared/Components/NavigationManager';
@@ -29,7 +24,7 @@ import { contains, type Rect } from '../../Shared/Libs/contains';
 import { useTranslation } from 'react-i18next';
 import StyledButton from '../../Shared/Components/StyledButton';
 import LottieView from 'lottie-react-native';
-import { speakWithDebounce } from '../../Shared/Libs/tts.utils';
+import { speak, resetLastMessage } from '../../Shared/Libs/tts.utils';
 import {
   trackFunnelStep,
   useScreenTracking,
@@ -70,6 +65,7 @@ interface Actions {
   FACE_TOO_BIG: boolean;
   VIDEO_RECORDED: string;
   NEXT_INSTRUCTION: string;
+  RESET: undefined;
 }
 
 interface Action<T extends keyof Actions> {
@@ -82,16 +78,18 @@ type PossibleActions = {
 }[keyof Actions];
 
 const LivenessDetectionScreen = () => {
-  const [camera, setCamera] = useState<Camera | null>(null);
+  const [camera, setCamera] = useState<TrustchexCameraHandle | null>(null);
   const navigation = useNavigation();
   const appContext = useContext(AppContext);
   const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
   const { t } = useTranslation();
   const [isRecording, setIsRecording] = useState(false);
   const insets = useSafeAreaInsets();
+  const referenceFaceTrackingId = useRef<number | null>(null);
 
   // Track screen view and exit
   useScreenTracking('liveness_detection');
+
   const [initialState, setInitialState] = useState<StateType>({
     brightnessLow: false,
     faceDetected: false,
@@ -104,7 +102,8 @@ const LivenessDetectionScreen = () => {
     processComplete: false,
     videoPath: '',
   });
-  const [instructions, _setInstructions] = useState<{
+  const hasNavigatedRef = useRef(false);
+  const [instructions] = useState<{
     [type: string]: Record<string, any> & {
       instruction: string;
       photo?: string;
@@ -114,6 +113,8 @@ const LivenessDetectionScreen = () => {
     SMILE: {
       instruction: t('livenessDetectionScreen.smile'),
       minProbability: 0.7,
+      maxAngle: LOOK_STRAIGHT_ANGLE_LIMIT,
+      minAngle: -LOOK_STRAIGHT_ANGLE_LIMIT,
     },
     LOOK_STRAIGHT_AND_BLINK: {
       instruction: t('livenessDetectionScreen.lookStraightAndBlink'),
@@ -140,6 +141,8 @@ const LivenessDetectionScreen = () => {
   });
   const [instructionList, setInstructionList] = useState<string[]>([]);
   const [hasGuideShown, setHasGuideShown] = useState(false);
+  const stoppingRecordingRef = useRef(false); // Track if we're already stopping to prevent multiple calls
+  const lastVoiceGuidanceMessage = useRef<string>('');
 
   useEffect(() => {
     const il = Object.keys(instructions)
@@ -172,71 +175,102 @@ 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) =>
-    face.leftEyeOpenProbability >= 0.8 && face.rightEyeOpenProbability >= 0.8;
+  const areEyesOpen = (face: 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: StateType,
     action: PossibleActions
   ): StateType => {
     switch (action.type) {
+      case 'RESET':
+        console.log('[LivenessDetection] Resetting to initial state');
+        referenceFaceTrackingId.current = null;
+        return initialState;
+
       case 'BRIGHTNESS_LOW':
         if (action.payload) {
           return {
@@ -259,7 +293,11 @@ const LivenessDetectionScreen = () => {
 
       case 'FACE_TOO_BIG':
         if (action.payload) {
-          return { ...state, faceTooBig: action.payload };
+          return {
+            ...state,
+            faceTooBig: action.payload,
+            progressFill: 0,
+          };
         }
         return initialState;
 
@@ -268,37 +306,67 @@ 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;
-
-      case 'VIDEO_RECORDED':
-        return { ...state, videoPath: action.payload };
-
-      case 'NEXT_INSTRUCTION':
-        if (action.payload === 'FINISH') {
+        // Face lost - reset to START if we haven't begun the flow yet
+        console.log('[LivenessDetection] Face lost');
+        if (state.currentInstruction === 'START') {
           return {
             ...state,
-            processComplete: true,
-            progressFill: 100,
+            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,
+          processComplete: true,
+          progressFill: 100,
+        };
 
-        const nextInstructionIndex =
-          instructionList.findIndex(
-            (instruction) => instruction === action.payload
-          ) + 1;
+      case 'NEXT_INSTRUCTION': {
+        const currentInstructionIndex = state.instructionList.indexOf(
+          action.payload
+        );
+        const nextInstructionIndex = currentInstructionIndex + 1;
         const nextInstruction = state.instructionList[nextInstructionIndex];
-        const progressMultiplier = nextInstructionIndex + 1;
+
+        // 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 =
-          (100 / (state.instructionList.length + 1)) * progressMultiplier;
+          nextInstruction === 'FINISH'
+            ? 100 // Last action completed - show 100%
+            : (completedActionSteps / totalActionSteps) * 100;
 
         return {
           ...state,
           currentInstruction: nextInstruction,
           progressFill: newProgressFill,
         };
+      }
       default:
         throw new Error('Unexpected action type.');
     }
@@ -306,9 +374,142 @@ const LivenessDetectionScreen = () => {
 
   const [state, dispatch] = useReducer(instructionReducer, initialState);
 
+  useEffect(() => {
+    if (
+      !appContext.currentWorkflowStep?.data?.voiceGuidanceActive ||
+      !hasGuideShown
+    )
+      return;
+
+    let text: string = '';
+
+    // 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: Face[], image: string, isImageBright: boolean) => {
+    async (
+      faces: Face[],
+      image: string,
+      isImageBright: boolean,
+      frameWidth: number,
+      frameHeight: number
+    ) => {
+      // 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: Rect = {
+        minX: (frameWidth - previewSizeInFrame) / 2,
+        minY: (frameHeight - previewSizeInFrame) / 2,
+        width: previewSizeInFrame,
+        height: previewSizeInFrame,
+      };
+
       const faceRectSmaller: Rect = {
         width: face.bounds.width - PREVIEW_EDGE_OFFSET,
         height: face.bounds.height - PREVIEW_EDGE_OFFSET,
@@ -316,18 +517,46 @@ 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;
       }
 
@@ -336,7 +565,21 @@ 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;
       }
 
@@ -344,21 +587,36 @@ const LivenessDetectionScreen = () => {
         dispatch({ type: 'MULTIPLE_FACES_DETECTED', 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: 'RESET', payload: undefined });
+        } else if (!state.faceTooBig) {
           dispatch({ type: 'FACE_TOO_BIG', payload: true });
-          return;
         }
+        return;
+      }
 
-        if (state.faceTooBig) {
-          dispatch({ type: 'FACE_TOO_BIG', payload: false });
-          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', payload: true });
       }
@@ -366,16 +624,12 @@ 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', payload: 'START' });
           }
@@ -389,6 +643,9 @@ const LivenessDetectionScreen = () => {
           ) {
             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({
@@ -401,12 +658,27 @@ const LivenessDetectionScreen = () => {
             }
           }
           return;
-        case 'SMILE':
-          if (face.smilingProbability >= instructions.SMILE.minProbability) {
+        case '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;
+        }
         case 'LOOK_UP':
           if (
             face.pitchAngle >= instructions.LOOK_UP.minAngle &&
@@ -416,53 +688,38 @@ const LivenessDetectionScreen = () => {
             dispatch({ type: 'NEXT_INSTRUCTION', payload: 'LOOK_UP' });
           }
           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)
-            ) {
-              instructions.TURN_HEAD_LEFT.photo = image;
-              dispatch({ type: 'NEXT_INSTRUCTION', payload: 'TURN_HEAD_LEFT' });
-            }
+        case 'TURN_HEAD_LEFT': {
+          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;
-        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)
-            ) {
-              instructions.TURN_HEAD_RIGHT.photo = image;
-              dispatch({
-                type: 'NEXT_INSTRUCTION',
-                payload: 'TURN_HEAD_RIGHT',
-              });
-            }
+        }
+        case 'TURN_HEAD_RIGHT': {
+          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;
+        }
         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;
       }
     },
@@ -480,27 +737,43 @@ const LivenessDetectionScreen = () => {
       instructions.TURN_HEAD_RIGHT,
       stopRecording,
       startRecording,
+      isRecording,
+      camera,
+      state.processComplete,
     ]
   );
 
   useEffect(() => {
+    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.videoPath &&
       !!state.instructionList &&
       !!appContext.identificationInfo &&
       !!navigation &&
-      !!instructions
+      !!instructions &&
+      !hasNavigatedRef.current
     ) {
+      console.log(
+        '[LivenessDetection] All conditions met, finalizing liveness data'
+      );
+      hasNavigatedRef.current = true;
       appContext.identificationInfo.livenessDetection = {
-        instructions: [
-          ...state.instructionList.map((instruction) => ({
-            instruction: instruction,
-            photo: instructions[instruction].photo ?? '',
-          })),
-        ],
+        instructions: state.instructionList.map((instruction) => ({
+          instruction: instruction,
+          photo: instructions[instruction].photo ?? '',
+        })),
         videoPath: state.videoPath,
       };
+      console.log('[LivenessDetection] Navigating to next step');
       navigationManagerRef.current?.navigateToNextStep();
     }
   }, [
@@ -512,48 +785,40 @@ const LivenessDetectionScreen = () => {
     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 (
     <>
-      {!hasGuideShown ? (
-        <SafeAreaView style={styles.guide}>
-          <LottieView
-            source={require('../../Shared/Animations/face-scan.json')}
-            style={styles.guideAnimation}
-            loop={true}
-            autoPlay
-          />
-          <Text style={styles.guideHeader}>
-            {t('livenessDetectionScreen.guideHeader')}
-          </Text>
-          <View style={styles.guidePoints}>
-            <Text style={styles.guideText}>
-              {t('livenessDetectionScreen.guideText')}
-            </Text>
-            <Text style={styles.guideText}>
-              • {t('livenessDetectionScreen.guidePoint1')}
-            </Text>
-            <Text style={styles.guideText}>
-              • {t('livenessDetectionScreen.guidePoint2')}
-            </Text>
-            <Text style={styles.guideText}>
-              • {t('livenessDetectionScreen.guidePoint3')}
-            </Text>
-            <Text style={styles.guideText}>
-              • {t('livenessDetectionScreen.guidePoint4')}
-            </Text>
-          </View>
-          <View style={{ paddingBottom: insets.bottom }}>
-            <StyledButton
-              mode="contained"
-              onPress={() => {
-                setHasGuideShown(true);
-              }}
-            >
-              {t('general.letsGo')}
-            </StyledButton>
-          </View>
-        </SafeAreaView>
-      ) : (
+      {hasGuideShown ? (
         <>
           <FaceCamera
             onFacesDetected={onFacesDetected}
@@ -595,8 +860,13 @@ const LivenessDetectionScreen = () => {
               mask="url(#hole-mask)"
             />
           </Svg>
-          <View style={[styles.instructionsContainerTop, { paddingTop: insets.top }]}>
-            <Text style={styles.instructions}>
+          <View
+            style={[
+              styles.instructionsContainerBottom,
+              { top: PREVIEW_RECT.minY + PREVIEW_SIZE + 20 },
+            ]}
+          >
+            <Text style={styles.action} numberOfLines={3} adjustsFontSizeToFit>
               {(() => {
                 if (state.brightnessLow) {
                   return t('livenessDetectionScreen.brightnessLow');
@@ -604,24 +874,56 @@ 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 ?? ''
+                  );
                 }
               })()}
             </Text>
           </View>
-          <View style={[styles.instructionsContainerBottom, { paddingBottom: insets.bottom }]}>
-            <Text style={styles.action}>
-              {state.faceDetected &&
-                !state.faceTooBig &&
-                !state.multipleFacesDetected &&
-                !state.brightnessLow &&
-                instructions[state.currentInstruction]?.instruction}
+        </>
+      ) : (
+        <SafeAreaView style={styles.guide}>
+          <LottieView
+            source={require('../../Shared/Animations/face-scan.json')}
+            style={styles.guideAnimation}
+            loop={true}
+            autoPlay
+          />
+          <Text style={styles.guideHeader}>
+            {t('livenessDetectionScreen.guideHeader')}
+          </Text>
+          <View style={styles.guidePoints}>
+            <Text style={styles.guideText}>
+              {t('livenessDetectionScreen.guideText')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('livenessDetectionScreen.guidePoint1')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('livenessDetectionScreen.guidePoint2')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('livenessDetectionScreen.guidePoint3')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('livenessDetectionScreen.guidePoint4')}
             </Text>
           </View>
-        </>
+          <View style={{ paddingBottom: insets.bottom }}>
+            <StyledButton
+              mode="contained"
+              onPress={() => {
+                setHasGuideShown(true);
+              }}
+            >
+              {t('general.letsGo')}
+            </StyledButton>
+          </View>
+        </SafeAreaView>
       )}
       <View style={[styles.footer, { bottom: insets.bottom }]}>
         <NavigationManager ref={navigationManagerRef} />
@@ -657,43 +959,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',
+    textAlign: 'center',
+    lineHeight: 30,
+    paddingHorizontal: 10,
   },
   footer: {
     position: 'absolute',