@trustchex/react-native-sdk 1.381.0 → 1.464.0

package/src/Screens/Dynamic/VerbalConsentScreen.tsx

@@ -0,0 +1,1401 @@
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  Easing,
+  Platform,
+  SafeAreaView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+import LottieView from 'lottie-react-native';
+import RNFS from 'react-native-fs';
+import Video from 'react-native-video';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTranslation } from 'react-i18next';
+import FaceCamera, { type Face } from '../../Shared/Components/FaceCamera';
+import type { TrustchexCameraHandle } from '../../Shared/Components/TrustchexCamera';
+import NativeCircularProgress from '../../Shared/Components/NativeCircularProgress';
+import StyledButton from '../../Shared/Components/StyledButton';
+import NavigationManager, {
+  type NavigationManagerRef,
+} from '../../Shared/Components/NavigationManager';
+import AppContext from '../../Shared/Contexts/AppContext';
+import { useStatusBarWhiteBackground } from '../../Shared/Libs/status-bar.utils';
+import {
+  trackError,
+  trackVerificationComplete,
+  trackVerificationStart,
+  useScreenTracking,
+} from '../../Shared/Libs/analytics.utils';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
+import { type Rect } from '../../Shared/Libs/contains';
+import { speak, stopSpeaking } from '../../Shared/Libs/tts.utils';
+
+const PREVIEW_EDGE_OFFSET = 10;
+const PREVIEW_SIZE_RATIO = 0.95;
+const TITLE_ROW_MIN_HEIGHT = 52;
+const INSTRUCTION_ROW_MIN_HEIGHT = 80;
+const ACTIONS_RESERVED_HEIGHT_IDLE = 72;
+const ALIGNMENT_CONFIRM_FRAMES = 3;
+const ALIGNMENT_LOST_FRAMES = 4;
+const CONSENT_LINE_HEIGHT = 44;
+const CONSENT_CIRCLE_INSET = 2;
+const AUTO_SCROLL_MIN_INTERVAL_MS = 2200;
+const HORIZONTAL_SCROLL_START_DELAY_MS = 5000;
+const AUTO_STOP_SPEECH_BUFFER_MS = 1000;
+const TARGET_WORDS_PER_SECOND = 1;
+// Constant scroll speed (pixels per second) so rate is identical regardless of text length.
+const SCROLL_PIXELS_PER_SECOND = 80;
+
+const VerbalConsentScreen = () => {
+  useKeepAwake();
+  useScreenTracking('verbal_consent_video');
+  useStatusBarWhiteBackground();
+
+  const appContext = useContext(AppContext);
+  const insets = useSafeAreaInsets();
+  const { width: screenWidth } = useWindowDimensions();
+  const { t } = useTranslation();
+
+  const cameraRef = useRef<TrustchexCameraHandle | null>(null);
+  const navigationManagerRef = useRef<NavigationManagerRef>(null);
+  const [hasGuideShown, setHasGuideShown] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingPath, setRecordingPath] = useState<string>('');
+  const [recordedSeconds, setRecordedSeconds] = useState(0);
+  const [isFaceInsideCircle, setIsFaceInsideCircle] = useState(false);
+  const [multipleFacesDetected, setMultipleFacesDetected] = useState(false);
+  const [cameraLayout, setCameraLayout] = useState({ width: 0, height: 0 });
+  const [currentLineIndex, setCurrentLineIndex] = useState(0);
+  const [isStoppingRecording, setIsStoppingRecording] = useState(false);
+  const [activeLineViewportWidth, setActiveLineViewportWidth] = useState(0);
+  const [measuredTextWidth, setMeasuredTextWidth] = useState(0);
+  const [hasTextScrollStarted, setHasTextScrollStarted] = useState(false);
+  const [isAutoScrollPausedByTouch, setIsAutoScrollPausedByTouch] =
+    useState(false);
+  const autoStartTriggeredRef = useRef(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const activeLineTranslateX = useRef(new Animated.Value(0)).current;
+  const recordingDotOpacity = useRef(new Animated.Value(1)).current;
+  const activeLineTranslateXRef = useRef(0);
+  const [scrollProgressPercent, setScrollProgressPercent] = useState(0);
+  const autoStoppingRef = useRef(false);
+  const stopReasonRef = useRef<'manual' | 'discard' | null>(null);
+  const stopInProgressRef = useRef(false);
+  const autoStopTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isFaceInsideCircleRef = useRef(false);
+  const insideFrameStreakRef = useRef(0);
+  const outsideFrameStreakRef = useRef(0);
+  const scrollNeedsInitRef = useRef(true);
+  const initialDelayAppliedRef = useRef(false);
+
+  const workflowConsentText =
+    appContext.currentWorkflowStep?.data?.verbalConsentText?.trim() || '';
+  const workflowConsentTitle =
+    appContext.currentWorkflowStep?.data?.verbalConsentTitle?.trim() || '';
+
+  const consentText =
+    workflowConsentText || t('verbalConsentVideoScreen.defaultConsentText');
+  const consentTitle =
+    workflowConsentTitle || t('verbalConsentVideoScreen.title');
+
+  const normalizedConsentText = consentText.replace(/\s+/g, ' ').trim();
+
+  // Keep the full consent text as a single horizontally scrolling line.
+  const consentLines = useMemo(() => {
+    return normalizedConsentText ? [normalizedConsentText] : [];
+  }, [normalizedConsentText]);
+
+  const consentWords = useMemo(
+    () => normalizedConsentText.split(' ').filter(Boolean),
+    [normalizedConsentText]
+  );
+  const consentWordCount = Math.max(1, consentWords.length);
+  // Conservative read pace to avoid suggesting stop too early.
+  const estimatedReadSeconds = Math.max(
+    6,
+    Math.ceil(consentWordCount / TARGET_WORDS_PER_SECOND)
+  );
+  const autoScrollIntervalMs = Math.max(
+    AUTO_SCROLL_MIN_INTERVAL_MS,
+    Math.round((estimatedReadSeconds * 1000) / Math.max(1, consentLines.length))
+  );
+  const currentLineText = consentLines[currentLineIndex] || '';
+  // Use measured width as soon as available to keep visual text end and
+  // progress completion tightly aligned.
+  const estimatedLineContentWidth =
+    measuredTextWidth > 0 ? measuredTextWidth : currentLineText.length * 24;
+  const isConsentComplete = scrollProgressPercent >= 99;
+  const currentInstructionKey = (() => {
+    if (multipleFacesDetected) {
+      return 'livenessDetectionScreen.multipleFacesDetected';
+    }
+
+    if (!isFaceInsideCircle) {
+      return 'livenessDetectionScreen.placeFaceInsideCircle';
+    }
+
+    return 'verbalConsentVideoScreen.readNowPrompt';
+  })();
+
+  // Circle stage uses relative layout: title -> circle -> instruction.
+  const containerWidth = cameraLayout.width || screenWidth;
+  const previewSize = containerWidth * PREVIEW_SIZE_RATIO;
+  const titleTopPadding = Math.max(insets.top, 8);
+  const previewRect = {
+    minX: (containerWidth - previewSize) / 2,
+    minY: 0,
+    width: previewSize,
+    height: previewSize,
+  };
+  const circleStrokeColor = 'rgba(255, 255, 255, 0.5)';
+  const circleDiameter = previewRect.width - CONSENT_CIRCLE_INSET * 2;
+  const circleLeft = previewRect.minX + CONSENT_CIRCLE_INSET;
+
+  useEffect(() => {
+    if (hasGuideShown) {
+      // Camera view uses dark background, keep status text readable.
+      StatusBar.setBarStyle('light-content', true);
+    } else {
+      // Guide screen uses white background.
+      StatusBar.setBarStyle('dark-content', true);
+      if (Platform.OS === 'android') {
+        StatusBar.setBackgroundColor('#ffffff', true);
+      }
+    }
+  }, [hasGuideShown]);
+
+  useEffect(() => {
+    if (isRecording) {
+      const pulse = Animated.loop(
+        Animated.sequence([
+          Animated.timing(recordingDotOpacity, {
+            toValue: 0.2,
+            duration: 600,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+          }),
+          Animated.timing(recordingDotOpacity, {
+            toValue: 1,
+            duration: 600,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+          }),
+        ])
+      );
+      pulse.start();
+      return () => pulse.stop();
+    } else {
+      recordingDotOpacity.setValue(1);
+    }
+  }, [isRecording, recordingDotOpacity]);
+
+  const clearTimer = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  const clearAutoStopTimer = useCallback(() => {
+    if (autoStopTimeoutRef.current) {
+      clearTimeout(autoStopTimeoutRef.current);
+      autoStopTimeoutRef.current = null;
+    }
+  }, []);
+
+  const handleStartRecording = useCallback(() => {
+    if (
+      !cameraRef.current ||
+      isRecording ||
+      !isFaceInsideCircle ||
+      multipleFacesDetected
+    ) {
+      return;
+    }
+
+    setRecordingPath('');
+    setRecordedSeconds(0);
+    setCurrentLineIndex(0);
+    setIsAutoScrollPausedByTouch(false);
+    setHasTextScrollStarted(false);
+    setScrollProgressPercent(0);
+    clearAutoStopTimer();
+    stopReasonRef.current = null;
+    stopInProgressRef.current = false;
+    scrollNeedsInitRef.current = true;
+    initialDelayAppliedRef.current = false;
+    activeLineTranslateX.stopAnimation();
+    activeLineTranslateX.setValue(0);
+    activeLineTranslateXRef.current = 0;
+    trackVerificationStart('VERBAL_CONSENT');
+
+    cameraRef.current.startRecording({
+      onRecordingFinished: (video) => {
+        stopInProgressRef.current = false;
+        setIsStoppingRecording(false);
+        const stopReason = stopReasonRef.current;
+        stopReasonRef.current = null;
+
+        if (stopReason === 'manual') {
+          setRecordingPath(video.path);
+        } else {
+          // Recording was discarded - reset state for retry
+          setRecordingPath('');
+          setRecordedSeconds(0);
+          setCurrentLineIndex(0);
+          setHasTextScrollStarted(false);
+          setScrollProgressPercent(0);
+          scrollNeedsInitRef.current = true;
+          initialDelayAppliedRef.current = false;
+          autoStartTriggeredRef.current = false;
+
+          if (video.path) {
+            RNFS.unlink(video.path).catch(() => {
+              // Best-effort cleanup for canceled recordings.
+            });
+          }
+        }
+        setIsRecording(false);
+        clearTimer();
+      },
+      onRecordingError: (error) => {
+        stopInProgressRef.current = false;
+        stopReasonRef.current = null;
+        setIsRecording(false);
+        setIsStoppingRecording(false);
+        setCurrentLineIndex(0);
+        setHasTextScrollStarted(false);
+        autoStartTriggeredRef.current = false;
+        clearTimer();
+        trackError(
+          'VERBAL_CONSENT_RECORDING_ERROR',
+          error.error ||
+            t('verbalConsentVideoScreen.analytics.recordingFailed'),
+          'verbal_consent_video',
+          'medium',
+          { recoverable: true }
+        );
+      },
+    });
+
+    setIsRecording(true);
+    clearTimer();
+    intervalRef.current = setInterval(() => {
+      setRecordedSeconds((prev) => prev + 1);
+    }, 1000);
+  }, [
+    isRecording,
+    isFaceInsideCircle,
+    multipleFacesDetected,
+    clearAutoStopTimer,
+    activeLineTranslateX,
+    clearTimer,
+    t,
+  ]);
+
+  const updateStableAlignment = useCallback((isInsideCurrentFrame: boolean) => {
+    if (isInsideCurrentFrame) {
+      insideFrameStreakRef.current += 1;
+      outsideFrameStreakRef.current = 0;
+
+      if (
+        !isFaceInsideCircleRef.current &&
+        insideFrameStreakRef.current >= ALIGNMENT_CONFIRM_FRAMES
+      ) {
+        isFaceInsideCircleRef.current = true;
+        setIsFaceInsideCircle(true);
+      }
+      return;
+    }
+
+    outsideFrameStreakRef.current += 1;
+    insideFrameStreakRef.current = 0;
+
+    if (
+      isFaceInsideCircleRef.current &&
+      outsideFrameStreakRef.current >= ALIGNMENT_LOST_FRAMES
+    ) {
+      isFaceInsideCircleRef.current = false;
+      setIsFaceInsideCircle(false);
+    }
+  }, []);
+
+  const onFacesDetected = useCallback(
+    (
+      faces: Face[],
+      _image: string,
+      _isImageBright: boolean,
+      frameWidth: number,
+      frameHeight: number
+    ) => {
+      if (!faces.length) {
+        if (isRecording) {
+          if (stopReasonRef.current === 'manual') {
+            return;
+          }
+
+          // Requirement: stop recording as soon as no face is detected.
+          isFaceInsideCircleRef.current = false;
+          setIsFaceInsideCircle(false);
+          insideFrameStreakRef.current = 0;
+          outsideFrameStreakRef.current = ALIGNMENT_LOST_FRAMES;
+        } else {
+          updateStableAlignment(false);
+        }
+        setMultipleFacesDetected(false);
+        return;
+      }
+
+      const multipleFaces = faces.length > 1;
+      setMultipleFacesDetected(multipleFaces);
+
+      const face = faces[0];
+      // Camera uses FILL_CENTER / resizeAspectFill (cover): uniform scale filling
+      // the container, cropping overflow symmetrically. Map the on-screen circle
+      // into frame coordinates accounting for that crop.
+      const containerHeight = Math.max(1, cameraLayout.height || previewSize);
+      const coverScale = Math.max(
+        containerWidth / frameWidth,
+        containerHeight / frameHeight
+      );
+      const offsetX = (frameWidth - containerWidth / coverScale) / 2;
+      const offsetY = (frameHeight - containerHeight / coverScale) / 2;
+      const previewRectInFrame: Rect = {
+        minX: previewRect.minX / coverScale + offsetX,
+        minY: previewRect.minY / coverScale + offsetY,
+        width: previewRect.width / coverScale,
+        height: previewRect.height / coverScale,
+      };
+
+      // Check containment using face center + yaw-stable core radius.
+      // When the head turns, the bounding box grows wider but height stays constant,
+      // so min(width, height)/2 is a stable representative size.
+      const faceCenterX = face.bounds.x + face.bounds.width / 2;
+      const faceCenterY = face.bounds.y + face.bounds.height / 2;
+      const faceCoreRadius = Math.max(
+        0,
+        Math.min(face.bounds.width, face.bounds.height) / 2 -
+          PREVIEW_EDGE_OFFSET / 2
+      );
+      const circleCX = previewRectInFrame.minX + previewRectInFrame.width / 2;
+      const circleCY = previewRectInFrame.minY + previewRectInFrame.height / 2;
+      const circleR =
+        previewRectInFrame.width / 2 - CONSENT_CIRCLE_INSET / coverScale;
+      const faceDx = faceCenterX - circleCX;
+      const faceDy = faceCenterY - circleCY;
+      const previewContainsFace =
+        faceDx * faceDx + faceDy * faceDy <=
+        (circleR - faceCoreRadius) * (circleR - faceCoreRadius);
+
+      if (isRecording) {
+        if (stopReasonRef.current === 'manual') {
+          return;
+        }
+
+        if (!previewContainsFace || multipleFaces) {
+          // During recording, cancel immediately when alignment is lost.
+          isFaceInsideCircleRef.current = false;
+          setIsFaceInsideCircle(false);
+          insideFrameStreakRef.current = 0;
+          outsideFrameStreakRef.current = ALIGNMENT_LOST_FRAMES;
+          return;
+        }
+
+        isFaceInsideCircleRef.current = true;
+        setIsFaceInsideCircle(true);
+        insideFrameStreakRef.current = ALIGNMENT_CONFIRM_FRAMES;
+        outsideFrameStreakRef.current = 0;
+        return;
+      }
+
+      updateStableAlignment(previewContainsFace && !multipleFaces);
+    },
+    [
+      cameraLayout.height,
+      containerWidth,
+      previewRect.minX,
+      previewRect.minY,
+      previewRect.width,
+      previewRect.height,
+      previewSize,
+      isRecording,
+      updateStableAlignment,
+    ]
+  );
+
+  const onCameraContainerLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setCameraLayout({ width, height });
+  }, []);
+
+  const handleStopRecording = useCallback(
+    async (discard: boolean = false) => {
+      if (!cameraRef.current || !isRecording) {
+        return;
+      }
+
+      if (stopInProgressRef.current) {
+        // If stop is already in progress, allow manual button press to take precedence.
+        if (!discard) {
+          stopReasonRef.current = 'manual';
+        }
+        return;
+      }
+
+      // Set immediate visual feedback
+      if (!discard) {
+        setIsStoppingRecording(true);
+      }
+
+      stopReasonRef.current = discard ? 'discard' : 'manual';
+      stopInProgressRef.current = true;
+
+      await cameraRef.current.stopRecording();
+      // Do NOT setIsRecording(false) here — let onRecordingFinished handle it
+      // atomically together with setRecordingPath to avoid a flash of the
+      // start-recording UI between stop and preview.
+    },
+    [isRecording]
+  );
+
+  const handleTryAgain = useCallback(() => {
+    clearTimer();
+    clearAutoStopTimer();
+    setIsRecording(false);
+    setRecordingPath('');
+    setRecordedSeconds(0);
+    setCurrentLineIndex(0);
+    setIsStoppingRecording(false);
+    setMultipleFacesDetected(false);
+    setIsFaceInsideCircle(false);
+    setScrollProgressPercent(0);
+    autoStartTriggeredRef.current = false;
+    stopReasonRef.current = null;
+    stopInProgressRef.current = false;
+    isFaceInsideCircleRef.current = false;
+    insideFrameStreakRef.current = 0;
+    outsideFrameStreakRef.current = 0;
+    scrollNeedsInitRef.current = true;
+    initialDelayAppliedRef.current = false;
+  }, [clearAutoStopTimer, clearTimer]);
+
+  const persistVerbalConsentData = useCallback(() => {
+    if (!recordingPath) {
+      return;
+    }
+
+    const existingVideos =
+      appContext.identificationInfo.verbalConsentVideos || [];
+    appContext.identificationInfo.verbalConsentVideos = [
+      ...existingVideos,
+      {
+        title: consentTitle,
+        text: consentText,
+        videoPath: recordingPath,
+        recordedSeconds,
+      },
+    ];
+  }, [
+    appContext.identificationInfo,
+    consentText,
+    consentTitle,
+    recordedSeconds,
+    recordingPath,
+  ]);
+
+  const submitVerbalConsent = useCallback(() => {
+    if (!recordingPath) {
+      return;
+    }
+
+    persistVerbalConsentData();
+    trackVerificationComplete('VERBAL_CONSENT', true, 1);
+    navigationManagerRef.current?.navigateToNextStep();
+  }, [persistVerbalConsentData, recordingPath]);
+
+  const canSubmit = !!recordingPath && !isRecording;
+  const isPreviewAvailable = !!recordingPath && !isRecording;
+  // Show text as soon as face is inside circle so user can read what to say.
+  const shouldShowTextOverlay = isFaceInsideCircle && hasGuideShown;
+
+  // Auto-start recording when face is aligned
+  useEffect(() => {
+    if (!hasGuideShown) {
+      return;
+    }
+
+    if (isRecording || isPreviewAvailable || autoStartTriggeredRef.current) {
+      return;
+    }
+
+    if (isFaceInsideCircle && !multipleFacesDetected) {
+      autoStartTriggeredRef.current = true;
+      handleStartRecording();
+    }
+  }, [
+    isFaceInsideCircle,
+    isRecording,
+    isPreviewAvailable,
+    multipleFacesDetected,
+    handleStartRecording,
+    hasGuideShown,
+  ]);
+
+  useEffect(() => {
+    if (!isRecording) {
+      autoStoppingRef.current = false;
+      return;
+    }
+
+    if (stopReasonRef.current === 'manual') {
+      return;
+    }
+
+    if (isFaceInsideCircle && !multipleFacesDetected) {
+      return;
+    }
+
+    if (autoStoppingRef.current) {
+      return;
+    }
+
+    // Immediately reset scroll and progress so the UI is clean before the
+    // async stopRecording resolves.
+    activeLineTranslateX.stopAnimation();
+    activeLineTranslateX.setValue(0);
+    activeLineTranslateXRef.current = 0;
+    scrollNeedsInitRef.current = true;
+    initialDelayAppliedRef.current = false;
+    setScrollProgressPercent(0);
+    clearAutoStopTimer();
+
+    stopReasonRef.current = 'discard';
+    autoStoppingRef.current = true;
+    handleStopRecording(true).finally(() => {
+      autoStoppingRef.current = false;
+    });
+  }, [
+    activeLineTranslateX,
+    clearAutoStopTimer,
+    handleStopRecording,
+    isFaceInsideCircle,
+    isRecording,
+    multipleFacesDetected,
+  ]);
+
+  useEffect(() => {
+    const startX = Math.max(0, activeLineViewportWidth);
+    // Complete when the full text has moved out of view to the left.
+    const endX = -Math.max(1, estimatedLineContentWidth);
+    const totalDistance = Math.max(1, startX - endX);
+    const listenerId = activeLineTranslateX.addListener(({ value }) => {
+      activeLineTranslateXRef.current = value;
+      // value goes from startX (offscreen right) to endX (offscreen left)
+      // traveled = startX - value, so 0 at start and totalDistance at end
+      const traveled = Math.max(0, startX - value);
+      const pct = Math.min(100, (traveled / totalDistance) * 100);
+      setScrollProgressPercent(pct);
+    });
+
+    return () => {
+      activeLineTranslateX.removeListener(listenerId);
+    };
+  }, [
+    activeLineTranslateX,
+    estimatedLineContentWidth,
+    activeLineViewportWidth,
+    isRecording,
+  ]);
+
+  useEffect(() => {
+    if (!isRecording) {
+      setHasTextScrollStarted(false);
+    }
+  }, [isRecording]);
+
+  useEffect(() => {
+    if (!isRecording || activeLineViewportWidth <= 0) {
+      activeLineTranslateX.stopAnimation();
+      activeLineTranslateX.setValue(0);
+      activeLineTranslateXRef.current = 0;
+      scrollNeedsInitRef.current = true;
+      setHasTextScrollStarted(false);
+      return;
+    }
+
+    const contentWidth = Math.max(1, estimatedLineContentWidth);
+
+    if (isAutoScrollPausedByTouch) {
+      activeLineTranslateX.stopAnimation((value) => {
+        activeLineTranslateXRef.current = value;
+      });
+      return;
+    }
+
+    const maxX = activeLineViewportWidth;
+    const minX = -contentWidth;
+
+    // First start after reset: position text at the right edge of the circle
+    if (scrollNeedsInitRef.current) {
+      scrollNeedsInitRef.current = false;
+      activeLineTranslateX.setValue(maxX);
+      activeLineTranslateXRef.current = maxX;
+    }
+
+    const clampedCurrentX = Math.max(
+      minX,
+      Math.min(maxX, activeLineTranslateXRef.current)
+    );
+    const remainingDistance = Math.abs(minX - clampedCurrentX);
+
+    if (remainingDistance <= 0.5) {
+      activeLineTranslateX.setValue(minX);
+      activeLineTranslateXRef.current = minX;
+      return;
+    }
+
+    const totalRange = maxX - minX;
+    const lineDurationMs = Math.max(
+      3000,
+      Math.round((totalRange / SCROLL_PIXELS_PER_SECOND) * 1000)
+    );
+    const progressRatio =
+      totalRange > 0 ? Math.min(1, (maxX - clampedCurrentX) / totalRange) : 0;
+    const remainingDurationMs = Math.max(
+      500,
+      Math.round(lineDurationMs * (1 - progressRatio))
+    );
+
+    activeLineTranslateX.stopAnimation();
+    activeLineTranslateX.setValue(clampedCurrentX);
+
+    const shouldApplyDelay =
+      !initialDelayAppliedRef.current && clampedCurrentX >= maxX - 1;
+    if (shouldApplyDelay) {
+      initialDelayAppliedRef.current = true;
+      // Show text only when animation is about to actually start moving
+      setTimeout(() => {
+        setHasTextScrollStarted(true);
+      }, HORIZONTAL_SCROLL_START_DELAY_MS);
+    } else {
+      // No delay, show immediately
+      setHasTextScrollStarted(true);
+    }
+
+    Animated.timing(activeLineTranslateX, {
+      toValue: minX,
+      duration: remainingDurationMs,
+      delay: shouldApplyDelay ? HORIZONTAL_SCROLL_START_DELAY_MS : 0,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    }).start((result) => {
+      if (result.finished) {
+        setScrollProgressPercent(100);
+      }
+    });
+  }, [
+    activeLineTranslateX,
+    activeLineViewportWidth,
+    currentLineIndex,
+    currentLineText,
+    estimatedLineContentWidth,
+    isAutoScrollPausedByTouch,
+    isRecording,
+    shouldShowTextOverlay,
+    consentLines,
+  ]);
+
+  useEffect(() => {
+    if (!isRecording || !shouldShowTextOverlay || isAutoScrollPausedByTouch) {
+      return;
+    }
+
+    if (
+      currentLineIndex >= consentLines.length - 1 ||
+      consentLines.length <= 1
+    ) {
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      setCurrentLineIndex((prev) => {
+        if (prev >= consentLines.length - 1) {
+          return prev;
+        }
+
+        return prev + 1;
+      });
+    }, autoScrollIntervalMs);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [
+    autoScrollIntervalMs,
+    consentLines.length,
+    currentLineIndex,
+    isAutoScrollPausedByTouch,
+    isRecording,
+    shouldShowTextOverlay,
+  ]);
+
+  useEffect(() => {
+    if (!isRecording || consentLines.length === 0 || isStoppingRecording) {
+      clearAutoStopTimer();
+      return;
+    }
+
+    if (!isConsentComplete) {
+      clearAutoStopTimer();
+      return;
+    }
+
+    if (autoStopTimeoutRef.current || stopInProgressRef.current) {
+      return;
+    }
+
+    // Give a brief tail buffer so users can finish the final spoken word.
+    autoStopTimeoutRef.current = setTimeout(() => {
+      autoStopTimeoutRef.current = null;
+      handleStopRecording(false);
+    }, AUTO_STOP_SPEECH_BUFFER_MS);
+
+    return () => {
+      clearAutoStopTimer();
+    };
+  }, [
+    clearAutoStopTimer,
+    handleStopRecording,
+    isConsentComplete,
+    isRecording,
+    isStoppingRecording,
+    consentLines.length,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      clearAutoStopTimer();
+    };
+  }, [clearAutoStopTimer]);
+
+  useEffect(() => {
+    if (!hasGuideShown) {
+      return;
+    }
+
+    if (!appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
+      return;
+    }
+    if (!currentInstructionKey) {
+      return;
+    }
+    speak(t(currentInstructionKey));
+  }, [
+    appContext.currentWorkflowStep?.data?.voiceGuidanceActive,
+    currentInstructionKey,
+    hasGuideShown,
+    t,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      stopSpeaking().catch(() => {});
+    };
+  }, []);
+
+  return (
+    <>
+      {!hasGuideShown ? (
+        <View
+          style={[
+            styles.guide,
+            { paddingTop: insets.top, paddingBottom: insets.bottom },
+          ]}
+        >
+          <LottieView
+            source={require('../../Shared/Animations/recording.json')}
+            style={styles.guideAnimation}
+            loop={true}
+            autoPlay
+          />
+          <Text style={styles.guideHeader}>
+            {t('verbalConsentVideoScreen.guideHeader')}
+          </Text>
+          <View style={styles.guidePoints}>
+            <Text style={styles.guideText}>
+              {t('verbalConsentVideoScreen.guideText')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('verbalConsentVideoScreen.guidePoint1')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('verbalConsentVideoScreen.guidePoint2')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('verbalConsentVideoScreen.guidePoint3')}
+            </Text>
+            <Text style={styles.guideText}>
+              • {t('verbalConsentVideoScreen.guidePoint4')}
+            </Text>
+          </View>
+          <StyledButton
+            mode="contained"
+            onPress={() => {
+              setHasGuideShown(true);
+            }}
+          >
+            {t('general.letsGo')}
+          </StyledButton>
+        </View>
+      ) : (
+        <SafeAreaView style={styles.container}>
+          <View
+            style={[
+              styles.cameraContainer,
+              isPreviewAvailable
+                ? styles.cameraContainerPreview
+                : styles.cameraContainerPreview,
+            ]}
+          >
+            {isPreviewAvailable ? (
+              <View
+                style={[
+                  styles.previewContainer,
+                  {
+                    paddingTop: Math.max(insets.top, 12),
+                    paddingLeft: 16 + insets.left,
+                    paddingRight: 16 + insets.right,
+                    paddingBottom: Math.max(insets.bottom, 12),
+                  },
+                ]}
+              >
+                <Video
+                  source={{ uri: recordingPath }}
+                  resizeMode="contain"
+                  style={styles.previewVideo}
+                  controls={true}
+                  muted={false}
+                />
+                <View style={styles.previewActionsContainer}>
+                  <Text style={styles.previewActionHint}>
+                    {t('verbalConsentVideoScreen.previewTitle')}
+                  </Text>
+                  <StyledButton mode="contained" onPress={handleTryAgain}>
+                    {t('verbalConsentVideoScreen.tryAgain')}
+                  </StyledButton>
+                  <StyledButton
+                    mode="outlined"
+                    onPress={submitVerbalConsent}
+                    disabled={!canSubmit}
+                  >
+                    {t('verbalConsentVideoScreen.submit')}
+                  </StyledButton>
+                </View>
+              </View>
+            ) : (
+              <View
+                style={[
+                  styles.captureSection,
+                  {
+                    paddingLeft: insets.left,
+                    paddingRight: insets.right,
+                  },
+                ]}
+                onTouchStart={() => {
+                  if (
+                    isRecording &&
+                    shouldShowTextOverlay &&
+                    !isAutoScrollPausedByTouch
+                  ) {
+                    setIsAutoScrollPausedByTouch(true);
+                  }
+                }}
+                onTouchEnd={() => {
+                  if (
+                    isRecording &&
+                    shouldShowTextOverlay &&
+                    isAutoScrollPausedByTouch
+                  ) {
+                    setIsAutoScrollPausedByTouch(false);
+                  }
+                }}
+                onTouchCancel={() => {
+                  if (
+                    isRecording &&
+                    shouldShowTextOverlay &&
+                    isAutoScrollPausedByTouch
+                  ) {
+                    setIsAutoScrollPausedByTouch(false);
+                  }
+                }}
+              >
+                {/* Grouped content: title, circle, instruction, stop button */}
+                <View style={styles.groupedContentContainer}>
+                  {/* Title */}
+                  <View
+                    style={[styles.titleRow, { paddingTop: titleTopPadding }]}
+                  >
+                    {isRecording ? (
+                      <View style={styles.recordingIndicator}>
+                        <Animated.View
+                          style={[
+                            styles.recordingDot,
+                            { opacity: recordingDotOpacity },
+                          ]}
+                        />
+                        <Text style={styles.recordingText}>REC</Text>
+                      </View>
+                    ) : (
+                      <Text
+                        style={styles.topTitleText}
+                        numberOfLines={2}
+                        ellipsizeMode="tail"
+                      >
+                        {consentTitle}
+                      </Text>
+                    )}
+                  </View>
+
+                  {/* Circle */}
+                  <View
+                    style={[styles.circleStage, { height: previewSize }]}
+                    onLayout={onCameraContainerLayout}
+                  >
+                    <View
+                      style={[
+                        styles.cameraCircle,
+                        {
+                          width: circleDiameter,
+                          height: circleDiameter,
+                          left: circleLeft,
+                          top: CONSENT_CIRCLE_INSET,
+                          borderRadius: circleDiameter / 2,
+                        },
+                      ]}
+                    >
+                      <FaceCamera
+                        onCameraInitialized={(camera) => {
+                          cameraRef.current = camera;
+                        }}
+                        onFacesDetected={onFacesDetected}
+                      />
+                    </View>
+
+                    {/* Progress arc with rail — matches liveness screen */}
+                    <NativeCircularProgress
+                      style={[
+                        styles.circleProgress,
+                        { left: previewRect.minX },
+                      ]}
+                      size={previewRect.width}
+                      width={8}
+                      backgroundWidth={8}
+                      fill={isRecording ? scrollProgressPercent : 0}
+                      tintColor={
+                        isRecording
+                          ? appContext.branding.primaryColor
+                          : 'transparent'
+                      }
+                      backgroundColor={
+                        shouldShowTextOverlay
+                          ? 'rgba(255, 255, 255, 0.3)'
+                          : circleStrokeColor
+                      }
+                    />
+
+                    {/* Scrollable text area – fills the full circle, clipped */}
+                    <View
+                      style={[
+                        styles.textSingleLineContainer,
+                        {
+                          width: circleDiameter,
+                          height: circleDiameter,
+                          left: circleLeft,
+                          top: CONSENT_CIRCLE_INSET,
+                          borderRadius: circleDiameter / 2,
+                        },
+                        (!shouldShowTextOverlay || !hasTextScrollStarted) &&
+                          styles.hiddenOffscreen,
+                      ]}
+                    >
+                      <View
+                        style={styles.textSingleLineInner}
+                        onLayout={(event) => {
+                          setActiveLineViewportWidth(
+                            event.nativeEvent.layout.width
+                          );
+                        }}
+                      >
+                        <View
+                          style={[
+                            styles.textLineContainer,
+                            styles.textLineHighlighted,
+                          ]}
+                        >
+                          <View style={styles.activeLineViewport}>
+                            <Animated.View
+                              style={[
+                                styles.activeLineTrack,
+                                {
+                                  transform: [
+                                    { translateX: activeLineTranslateX },
+                                  ],
+                                },
+                              ]}
+                            >
+                              <Text
+                                style={[
+                                  styles.consentTextLine,
+                                  styles.consentTextLineActive,
+                                ]}
+                                numberOfLines={1}
+                              >
+                                {consentLines[currentLineIndex] || ''}
+                              </Text>
+                            </Animated.View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+
+                  {/* Instruction - always rendered to prevent layout shift */}
+                  <View style={styles.instructionRow}>
+                    <Text
+                      style={[
+                        styles.circleInstructionText,
+                        !currentInstructionKey && styles.hidden,
+                      ]}
+                      numberOfLines={2}
+                      ellipsizeMode="tail"
+                    >
+                      {currentInstructionKey ? t(currentInstructionKey) : ' '}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            )}
+          </View>
+
+          {/* Off-screen text for reliable width measurement (Android wraps
+          absolutely-positioned text at the parent width, so onTextLayout
+          inside the circle reports only the first wrapped line). */}
+          <Text
+            style={[
+              styles.consentTextLine,
+              styles.consentTextLineActive,
+              styles.offscreenMeasure,
+            ]}
+            numberOfLines={1}
+            onTextLayout={(e) => {
+              const lineWidth = e.nativeEvent.lines[0]?.width ?? 0;
+              if (lineWidth > 0) {
+                setMeasuredTextWidth(Math.ceil(lineWidth));
+              }
+            }}
+          >
+            {consentLines[currentLineIndex] || ''}
+          </Text>
+        </SafeAreaView>
+      )}
+      <View style={[styles.footer, { bottom: insets.bottom }]}>
+        <NavigationManager ref={navigationManagerRef} />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  footer: {
+    position: 'absolute',
+    flex: 0,
+    bottom: 0,
+    width: '100%',
+    zIndex: 1,
+  },
+  guide: {
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    gap: 10,
+    backgroundColor: 'white',
+  },
+  guideAnimation: {
+    width: 250,
+    height: 250,
+    alignSelf: 'center',
+  },
+  guideHeader: {
+    color: 'black',
+    fontSize: 18,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  guidePoints: {
+    display: 'flex',
+    gap: 10,
+    padding: 10,
+  },
+  guideText: {
+    color: 'black',
+    fontSize: 14,
+  },
+  cameraContainer: {
+    width: '100%',
+  },
+  cameraContainerPreview: {
+    flex: 1,
+  },
+  captureSection: {
+    flex: 1,
+    overflow: 'hidden' as const,
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  groupedContentContainer: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  titleRow: {
+    minHeight: TITLE_ROW_MIN_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    marginBottom: 16,
+  },
+  recordingIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 20,
+  },
+  recordingDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: '#ef4444',
+  },
+  recordingText: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+  circleStage: {
+    position: 'relative',
+    width: '100%',
+    backgroundColor: '#ffffff',
+  },
+  cameraCircle: {
+    position: 'absolute',
+    overflow: 'hidden',
+  },
+  instructionRow: {
+    height: INSTRUCTION_ROW_MIN_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    marginTop: 16,
+    overflow: 'hidden' as const,
+  },
+  instructionRowHidden: {
+    opacity: 0,
+  },
+
+  topTitleText: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827',
+    textAlign: 'center',
+    backgroundColor: 'rgba(255,255,255,0.95)',
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    borderRadius: 10,
+  },
+  circleInstructionText: {
+    color: '#111827',
+    fontSize: 18,
+    fontWeight: '700',
+    textAlign: 'center',
+    backgroundColor: 'rgba(255,255,255,0.92)',
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+    lineHeight: 24,
+  },
+  previewContainer: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 12,
+    justifyContent: 'flex-start',
+  },
+  previewActionsContainer: {
+    paddingTop: 10,
+    gap: 8,
+  },
+  previewVideo: {
+    width: '100%',
+    height: '64%',
+    borderRadius: 8,
+    backgroundColor: '#000000',
+    alignSelf: 'center',
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+  },
+  actionsContainerNearCircle: {
+    gap: 8,
+    paddingTop: 8,
+    paddingHorizontal: 20,
+    minHeight: ACTIONS_RESERVED_HEIGHT_IDLE,
+  },
+  actionsContainerHidden: {
+    opacity: 0,
+    pointerEvents: 'none' as const,
+  },
+  actionsContainerNearCircleRecording: {
+    minHeight: ACTIONS_RESERVED_HEIGHT_IDLE,
+    paddingTop: 8,
+  },
+  arrowButtonCircle: {
+    position: 'absolute',
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+    elevation: 4,
+    borderWidth: 2,
+    borderColor: '#e5e7eb',
+  },
+  arrowTextCircle: {
+    fontSize: 26,
+    color: '#1f2937',
+    fontWeight: '700',
+  },
+  textSingleLineContainer: {
+    position: 'absolute',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    overflow: 'hidden',
+    justifyContent: 'center',
+  },
+  textSingleLineInner: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 0,
+  },
+  textLineContainer: {
+    height: CONSENT_LINE_HEIGHT,
+    paddingHorizontal: 0,
+    marginVertical: 0,
+    borderRadius: 0,
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+  },
+  textLineHighlighted: {
+    backgroundColor: 'transparent',
+  },
+  activeLineViewport: {
+    width: '100%',
+    height: CONSENT_LINE_HEIGHT,
+    overflow: 'hidden',
+  },
+  activeLineTrack: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: 9999,
+    justifyContent: 'center',
+  },
+  consentTextLine: {
+    fontSize: 14,
+    color: 'rgba(156, 163, 175, 0.6)',
+    lineHeight: 22,
+    fontWeight: '400',
+    textAlign: 'left',
+  },
+  consentTextLineActive: {
+    fontSize: 32,
+    color: '#111827',
+    fontWeight: '900',
+    lineHeight: 44,
+  },
+  circleProgress: {
+    position: 'absolute',
+    top: 0,
+    zIndex: 2,
+    pointerEvents: 'none' as const,
+  },
+  offscreenMeasure: {
+    position: 'absolute',
+    top: -9999,
+    left: 0,
+    opacity: 0,
+    width: 9999,
+  },
+  hidden: {
+    opacity: 0,
+  },
+  hiddenOffscreen: {
+    opacity: 0,
+    transform: [{ translateY: -10000 }],
+  },
+  arrowButtonDisabled: {
+    backgroundColor: '#e5e7eb',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  arrowTextDisabled: {
+    color: '#9ca3af',
+  },
+  previewActionHint: {
+    fontSize: 13,
+    color: '#4b5563',
+    textAlign: 'center',
+  },
+  recordingBlockedContainer: {
+    borderRadius: 10,
+    backgroundColor: '#ffffff',
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    paddingVertical: 16,
+    paddingHorizontal: 14,
+  },
+  recordingBlockedText: {
+    fontSize: 16,
+    color: '#111827',
+    fontWeight: '600',
+    textAlign: 'center',
+    lineHeight: 22,
+  },
+});
+
+export default VerbalConsentScreen;