@trustchex/react-native-sdk 1.409.0 → 1.472.0

package/src/Screens/Dynamic/IdentityDocumentEIDScanningScreen.tsx

@@ -30,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<

package/src/Screens/Dynamic/LivenessDetectionScreen.tsx

@@ -9,10 +9,13 @@ import React, {
   useRef,
 } from 'react';
 import {
+  Animated,
+  Easing,
   StyleSheet,
   Text,
   View,
   Dimensions,
+  Platform,
   Vibration,
   StatusBar,
 } from 'react-native';
@@ -27,7 +30,7 @@ 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';
@@ -43,7 +46,7 @@ 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,
@@ -96,10 +99,36 @@ 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();
 
@@ -152,7 +181,6 @@ const LivenessDetectionScreen = () => {
     },
     FINISH: { instruction: t('livenessDetectionScreen.finish') },
   });
-  const [instructionList, setInstructionList] = useState<string[]>([]);
   const [hasGuideShown, setHasGuideShown] = useState(false);
   const stoppingRecordingRef = useRef(false); // Track if we're already stopping to prevent multiple calls
 
@@ -167,7 +195,9 @@ const LivenessDetectionScreen = () => {
     } else {
       // Guide screen with white background - use dark icons
       StatusBar.setBarStyle('dark-content', true);
-      StatusBar.setBackgroundColor('#ffffff', true);
+      if (Platform.OS === 'android') {
+        StatusBar.setBackgroundColor('#ffffff', true);
+      }
     }
   }, [hasGuideShown]);
 
@@ -189,7 +219,6 @@ const LivenessDetectionScreen = () => {
       .sort(() => Math.random() - 0.5);
     il.unshift('START');
     il.push('FINISH');
-    setInstructionList(il);
     setInitialState({
       brightnessLow: false,
       faceDetected: false,
@@ -289,6 +318,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
@@ -526,26 +563,84 @@ 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;
+
+      // 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 yawAbs = Math.abs(face.yawAngle || 0);
+      const yawFactor = Math.min(1, yawAbs / TURN_ANGLE_LIMIT);
+
+      // General bound tolerance (instruction-agnostic): adapt to head pose and
+      // face box deformation so containment remains stable across all actions.
+      const faceWidthGrowth = Math.max(
+        0,
+        face.bounds.width - face.bounds.height
+      );
 
-      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,
-      });
+      // On iOS, close faces tend to appear larger in-frame and lateral head
+      // turns shift center more aggressively. Apply an iOS-only proximity boost
+      // to horizontal tolerance to avoid false outside-circle resets.
+      const faceRadiusRatio = Math.min(
+        1,
+        faceCoreRadius / Math.max(1, circleR)
+      );
+      const iosProximityBoost =
+        Platform.OS === 'ios' ? Math.max(0, faceRadiusRatio - 0.5) : 0;
+
+      const baseToleranceX = previewSizeInFrame * 0.05;
+      const yawToleranceX = face.bounds.width * 0.12 * yawFactor;
+      const shapeToleranceX = faceWidthGrowth * 0.1;
+      const iosToleranceX = face.bounds.width * 0.2 * iosProximityBoost;
+      const toleranceX = Math.max(
+        0,
+        baseToleranceX + yawToleranceX + shapeToleranceX + iosToleranceX,
+        face.bounds.width * 0.05
+      );
+
+      const pitchAbs = Math.abs(face.pitchAngle || 0);
+      const pitchFactor = Math.min(1, pitchAbs / TURN_ANGLE_LIMIT);
+      const toleranceY = Math.max(
+        0,
+        previewSizeInFrame * 0.03 + face.bounds.height * 0.03 * pitchFactor,
+        face.bounds.height * 0.04
+      );
+
+      const allowedRadiusX = Math.max(1, circleR - faceCoreRadius + toleranceX);
+      const allowedRadiusY = Math.max(1, circleR - faceCoreRadius + toleranceY);
+      const normalizedDistance =
+        (faceDx * faceDx) / (allowedRadiusX * allowedRadiusX) +
+        (faceDy * faceDy) / (allowedRadiusY * allowedRadiusY);
+      const previewContainsFace = normalizedDistance <= 1;
       const multipleFacesDetected = faces.length > 1;
 
       if (!isImageBright) {
@@ -694,11 +789,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' });
@@ -890,6 +986,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,
@@ -1014,6 +1128,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',