@trustchex/react-native-sdk 1.381.0 → 1.464.0

package/src/Screens/Dynamic/ContractAcceptanceScreen.tsx

@@ -16,6 +16,7 @@ import { getI18n, useTranslation } from 'react-i18next';
 import StyledButton from '../../Shared/Components/StyledButton';
 import NativeDeviceInfo from '../../Shared/Libs/native-device-info.utils';
 import { speakWithDebounce } from '../../Shared/Libs/tts.utils';
+import { useStatusBarWhiteBackground } from '../../Shared/Libs/status-bar.utils';
 import {
   trackFunnelStep,
   useScreenTracking,
@@ -24,8 +25,10 @@ import {
   trackVerificationComplete,
   trackError,
 } from '../../Shared/Libs/analytics.utils';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
 
 const ContractAcceptanceScreen = () => {
+  useKeepAwake();
   const [isEnabled, setIsEnabled] = useState(false);
   const [isReady, setIsReady] = useState(false);
   const appContext = useContext(AppContext);
@@ -39,6 +42,9 @@ const ContractAcceptanceScreen = () => {
   // Track screen view and exit
   useScreenTracking('contract_acceptance');
 
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
+
   useEffect(() => {
     const contracts = appContext.currentWorkflowStep?.data?.contracts;
     if (!contracts) {
@@ -93,41 +99,58 @@ const ContractAcceptanceScreen = () => {
     return await NativeDeviceInfo.generateHumanReadableIdentifier();
   }, []);
 
+  // Early return if workflow step data is not available (after all hooks)
+  if (!appContext.currentWorkflowStep || !appContext.currentWorkflowStep.data) {
+    return null;
+  }
+
   return (
     <SafeAreaView style={styles.container}>
-      <WebView
-        source={{
-          uri: contractUrl || '',
-        }}
-        javaScriptEnabled={true}
-        domStorageEnabled={false}
-        scalesPageToFit={false}
-        scrollEnabled={true}
-        style={styles.webView}
-        onError={(syntheticEvent) => {
-          const { nativeEvent } = syntheticEvent;
-          trackError(
-            'CONTRACT_WEBVIEW_ERROR',
-            nativeEvent.description || 'Failed to load contract',
-            'contract_acceptance',
-            'medium',
-            { recoverable: true, userAction: 'load_contract' }
-          );
-        }}
-        onLoadEnd={(event) => {
-          if (event.nativeEvent.url === contractUrl) {
-            setIsReady(true);
-
-            // Track contract acceptance started
-            trackVerificationStart('CONTRACT_ACCEPTANCE');
-
-            if (appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
-              speakWithDebounce(t('termsOfUseAndDataPrivacyScreen.footerText'));
+      <View
+        style={[
+          styles.webViewContainer,
+          {
+            paddingHorizontal: Math.max(insets.left, insets.right),
+            paddingTop: insets.top,
+          },
+        ]}
+      >
+        <WebView
+          source={{
+            uri: contractUrl || '',
+          }}
+          javaScriptEnabled={true}
+          domStorageEnabled={false}
+          scalesPageToFit={false}
+          scrollEnabled={true}
+          style={styles.webView}
+          onError={(syntheticEvent) => {
+            const { nativeEvent } = syntheticEvent;
+            trackError(
+              'CONTRACT_WEBVIEW_ERROR',
+              nativeEvent.description || 'Failed to load contract',
+              'contract_acceptance',
+              'medium',
+              { recoverable: true, userAction: 'load_contract' }
+            );
+          }}
+          onLoadEnd={(event) => {
+            if (event.nativeEvent.url === contractUrl) {
+              setIsReady(true);
+
+              // Track contract acceptance started
+              trackVerificationStart('CONTRACT_ACCEPTANCE');
+
+              if (appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
+                speakWithDebounce(
+                  t('termsOfUseAndDataPrivacyScreen.footerText')
+                );
+              }
             }
-          }
-        }}
-        onScroll={hasReachedEnd}
-      />
+          }}
+          onScroll={hasReachedEnd}
+        />
+      </View>
       <View style={[styles.footer, { paddingBottom: insets.bottom }]}>
         <Text style={styles.footerText}>
           {t('termsOfUseAndDataPrivacyScreen.footerText')}
@@ -176,17 +199,17 @@ const ContractAcceptanceScreen = () => {
 };
 
 const styles = StyleSheet.create({
-  safeAreaContainer: {
+  container: {
     flex: 1,
     backgroundColor: 'white',
   },
-  container: {
+  webViewContainer: {
     flex: 1,
+    width: '100%',
   },
   webView: {
     flex: 1,
     width: '100%',
-    height: '100%',
     resizeMode: 'contain',
   },
   footer: {

package/src/Screens/Dynamic/IdentityDocumentEIDScanningScreen.tsx

@@ -17,8 +17,10 @@ import {
   trackVerificationStart,
   trackVerificationComplete,
 } from '../../Shared/Libs/analytics.utils';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
 
 const IdentityDocumentEIDScanningScreen = () => {
+  useKeepAwake();
   const appContext = useContext(AppContext);
   const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
   const insets = useSafeAreaInsets();
@@ -28,10 +30,27 @@ const IdentityDocumentEIDScanningScreen = () => {
     useState<DocumentScannedData | null>(null);
   const [passportData, setPassportData] =
     useState<DocumentScannedData | null>();
-  const [documentNumber, setDocumentNumber] = useState<string>();
-  const [dateOfBirth, setDateOfBirth] = useState<string>();
-  const [dateOfExpiry, setDateOfExpiry] = useState<string>();
-  const [documentType, setDocumentType] = useState<string>();
+  const [documentNumber, setDocumentNumber] = useState<string | undefined>(
+    () => {
+      const mrzFields =
+        appContext.identificationInfo.scannedDocument?.mrzFields;
+      return mrzFields?.documentNumber ?? undefined;
+    }
+  );
+  const [dateOfBirth, setDateOfBirth] = useState<string | undefined>(() => {
+    const mrzFields = appContext.identificationInfo.scannedDocument?.mrzFields;
+    return mrzFields?.birthDate ?? undefined;
+  });
+  const [dateOfExpiry, setDateOfExpiry] = useState<string | undefined>(() => {
+    const mrzFields = appContext.identificationInfo.scannedDocument?.mrzFields;
+    return mrzFields?.expirationDate ?? undefined;
+  });
+  const [documentType, setDocumentType] = useState<string | undefined>(() => {
+    const dc =
+      appContext.identificationInfo.scannedDocument?.mrzFields?.documentCode;
+    if (!dc) return undefined;
+    return dc === 'I' ? 'ID' : dc === 'P' ? 'PASSPORT' : 'UNKNOWN';
+  });
   const [isNFCSupported, setIsNFCSupported] = useState<boolean>(false);
   const { t } = useTranslation();
   const [allowedDocumentTypes, setAllowedDocumentTypes] = useState<
@@ -77,6 +96,10 @@ const IdentityDocumentEIDScanningScreen = () => {
     );
   }, [appContext.currentWorkflowStep]);
 
+  if (!appContext.currentWorkflowStep) {
+    return null;
+  }
+
   return (
     <SafeAreaView style={styles.safeAreaContainer}>
       {documentNumber && dateOfBirth && dateOfExpiry ? (

package/src/Screens/Dynamic/IdentityDocumentScanningScreen.tsx

@@ -17,8 +17,10 @@ import {
   trackVerificationStart,
   trackVerificationComplete,
 } from '../../Shared/Libs/analytics.utils';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
 
 const IdentityDocumentScanningScreen = () => {
+  useKeepAwake();
   const [idFrontSideData, setIDFrontSideData] =
     useState<DocumentScannedData | null>(null);
   const [idBackSideData, setIDBackSideData] =
@@ -145,6 +147,10 @@ const IdentityDocumentScanningScreen = () => {
     );
   }, [appContext.currentWorkflowStep]);
 
+  if (!appContext.currentWorkflowStep) {
+    return null;
+  }
+
   return (
     <SafeAreaView style={styles.container}>
       <IdentityDocumentCamera

package/src/Screens/Dynamic/LivenessDetectionScreen.tsx

@@ -8,7 +8,17 @@ import React, {
   useCallback,
   useRef,
 } from 'react';
-import { StyleSheet, Text, View, Dimensions, Vibration } from 'react-native';
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  Text,
+  View,
+  Dimensions,
+  Platform,
+  Vibration,
+  StatusBar,
+} from 'react-native';
 import {
   useSafeAreaInsets,
   SafeAreaView,
@@ -20,21 +30,23 @@ import NavigationManager, {
   type NavigationManagerRef,
 } from '../../Shared/Components/NavigationManager';
 import AppContext from '../../Shared/Contexts/AppContext';
-import { contains, type Rect } from '../../Shared/Libs/contains';
+import { type Rect } from '../../Shared/Libs/contains';
 import { useTranslation } from 'react-i18next';
 import StyledButton from '../../Shared/Components/StyledButton';
 import LottieView from 'lottie-react-native';
 import { speak, resetLastMessage } from '../../Shared/Libs/tts.utils';
+import { useStatusBarWhiteBackground } from '../../Shared/Libs/status-bar.utils';
 import {
   trackFunnelStep,
   useScreenTracking,
   trackVerificationStart,
   trackVerificationComplete,
 } from '../../Shared/Libs/analytics.utils';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
 
 const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
 
-const PREVIEW_SIZE = windowWidth * 0.8;
+const PREVIEW_SIZE = windowWidth * 0.95;
 const PREVIEW_RECT: Rect = {
   minX: (windowWidth - PREVIEW_SIZE) / 2,
   minY: (windowHeight - PREVIEW_SIZE) / 2,
@@ -78,6 +90,7 @@ type PossibleActions = {
 }[keyof Actions];
 
 const LivenessDetectionScreen = () => {
+  useKeepAwake();
   const [camera, setCamera] = useState<TrustchexCameraHandle | null>(null);
   const navigation = useNavigation();
   const appContext = useContext(AppContext);
@@ -86,10 +99,39 @@ const LivenessDetectionScreen = () => {
   const [isRecording, setIsRecording] = useState(false);
   const insets = useSafeAreaInsets();
   const referenceFaceTrackingId = useRef<number | null>(null);
+  const recordingDotOpacity = useRef(new Animated.Value(1)).current;
 
   // Track screen view and exit
   useScreenTracking('liveness_detection');
 
+  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]);
+
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
+
   const [initialState, setInitialState] = useState<StateType>({
     brightnessLow: false,
     faceDetected: false,
@@ -142,7 +184,23 @@ 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>('');
+
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
+
+  // Update status bar when guide visibility changes
+  useEffect(() => {
+    if (hasGuideShown) {
+      // Camera view - use light icons
+      StatusBar.setBarStyle('light-content', true);
+    } else {
+      // Guide screen with white background - use dark icons
+      StatusBar.setBarStyle('dark-content', true);
+      if (Platform.OS === 'android') {
+        StatusBar.setBackgroundColor('#ffffff', true);
+      }
+    }
+  }, [hasGuideShown]);
 
   useEffect(() => {
     const il = Object.keys(instructions)
@@ -175,7 +233,6 @@ const LivenessDetectionScreen = () => {
       processComplete: false,
       videoPath: '',
     });
-    lastVoiceGuidanceMessage.current = '';
     resetLastMessage();
   }, [
     instructions,
@@ -263,6 +320,14 @@ const LivenessDetectionScreen = () => {
     return leftOpen >= 0.8 && rightOpen >= 0.8;
   };
 
+  const areEyesVisible = (face: Face) => {
+    // Relaxed check: eyes just need to be detected (not fully closed).
+    // Smiling naturally causes squinting, so a lower threshold is used.
+    const leftOpen = face.leftEyeOpenProbability ?? 0;
+    const rightOpen = face.rightEyeOpenProbability ?? 0;
+    return leftOpen >= 0.3 && rightOpen >= 0.3;
+  };
+
   const instructionReducer = (
     state: StateType,
     action: PossibleActions
@@ -350,7 +415,6 @@ const LivenessDetectionScreen = () => {
         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)
@@ -404,8 +468,7 @@ const LivenessDetectionScreen = () => {
     // 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;
+    if (text) {
       // Bypass interval for liveness instructions to ensure all instructions are spoken
       speak(text, true);
     }
@@ -502,26 +565,42 @@ const LivenessDetectionScreen = () => {
         );
       }
 
-      // Calculate preview rect in frame coordinates (not screen coordinates)
-      // Preview circle is 80% of frame width, centered
-      const previewSizeInFrame = frameWidth * 0.8;
+      // Map the on-screen circle into frame coordinates.
+      // Camera uses FILL_CENTER / resizeAspectFill (cover): uniform scale filling
+      // the view, cropping overflow symmetrically.
+      const coverScale = Math.max(
+        windowWidth / frameWidth,
+        windowHeight / frameHeight
+      );
+      const offsetX = (frameWidth - windowWidth / coverScale) / 2;
+      const offsetY = (frameHeight - windowHeight / coverScale) / 2;
       const previewRectInFrame: Rect = {
-        minX: (frameWidth - previewSizeInFrame) / 2,
-        minY: (frameHeight - previewSizeInFrame) / 2,
-        width: previewSizeInFrame,
-        height: previewSizeInFrame,
+        minX: PREVIEW_RECT.minX / coverScale + offsetX,
+        minY: PREVIEW_RECT.minY / coverScale + offsetY,
+        width: PREVIEW_RECT.width / coverScale,
+        height: PREVIEW_RECT.height / coverScale,
       };
+      const previewSizeInFrame = PREVIEW_RECT.width / coverScale;
 
-      const faceRectSmaller: Rect = {
-        width: face.bounds.width - PREVIEW_EDGE_OFFSET,
-        height: face.bounds.height - PREVIEW_EDGE_OFFSET,
-        minY: face.bounds.y + PREVIEW_EDGE_OFFSET / 2,
-        minX: face.bounds.x + PREVIEW_EDGE_OFFSET / 2,
-      };
-      const previewContainsFace = contains({
-        outside: previewRectInFrame,
-        inside: faceRectSmaller,
-      });
+      // Check containment using face center + yaw-stable core radius.
+      // When the head turns (yaw), the bounding box grows wider but height stays
+      // constant — so min(width, height)/2 gives a stable size that doesn't
+      // falsely trigger an outside-circle reset during TURN_HEAD_LEFT/RIGHT.
+      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 = previewSizeInFrame / 2;
+      const faceDx = faceCenterX - circleCX;
+      const faceDy = faceCenterY - circleCY;
+      const previewContainsFace =
+        faceDx * faceDx + faceDy * faceDy <=
+        (circleR - faceCoreRadius) * (circleR - faceCoreRadius);
       const multipleFacesDetected = faces.length > 1;
 
       if (!isImageBright) {
@@ -670,11 +749,12 @@ const LivenessDetectionScreen = () => {
             instructions.SMILE.minAngle < face.pitchAngle &&
             face.pitchAngle < instructions.SMILE.maxAngle;
 
-          // Check if smiling with sufficient probability AND looking at camera AND eyes open
+          // Check if smiling with sufficient probability AND looking at camera AND eyes visible
+          // Use relaxed eye check — smiling naturally causes squinting
           if (
             smilingProb >= instructions.SMILE.minProbability &&
             isFacingCamera &&
-            areEyesOpen(face)
+            areEyesVisible(face)
           ) {
             instructions.SMILE.photo = image;
             dispatch({ type: 'NEXT_INSTRUCTION', payload: 'SMILE' });
@@ -818,6 +898,10 @@ const LivenessDetectionScreen = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Empty array = only run on mount/unmount
 
+  if (!appContext.currentWorkflowStep || !appContext.currentWorkflowStep.data) {
+    return null;
+  }
+
   return (
     <>
       {hasGuideShown ? (
@@ -862,6 +946,24 @@ const LivenessDetectionScreen = () => {
               mask="url(#hole-mask)"
             />
           </Svg>
+          {isRecording && (
+            <View
+              style={[
+                styles.recordingIndicatorContainer,
+                { top: PREVIEW_RECT.minY - 40 },
+              ]}
+            >
+              <View style={styles.recordingIndicator}>
+                <Animated.View
+                  style={[
+                    styles.recordingDot,
+                    { opacity: recordingDotOpacity },
+                  ]}
+                />
+                <Text style={styles.recordingText}>REC</Text>
+              </View>
+            </View>
+          )}
           <View
             style={[
               styles.instructionsContainerBottom,
@@ -986,6 +1088,33 @@ const styles = StyleSheet.create({
     width: '100%',
     zIndex: 1,
   },
+  recordingIndicatorContainer: {
+    position: 'absolute',
+    width: '100%',
+    alignItems: 'center',
+    zIndex: 2,
+  },
+  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,
+  },
   guide: {
     flex: 1,
     display: 'flex',