@trustchex/react-native-sdk 1.464.0 → 1.475.0

package/lib/module/Screens/Debug/MRZTestScreen.js

@@ -4,99 +4,80 @@ import React, { useState, useRef, useCallback } from 'react';
 import { View, StyleSheet, Text, ScrollView, StatusBar, TouchableOpacity } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { TrustchexCamera } from "../../Shared/Components/TrustchexCamera.js";
-import mrzUtils from "../../Shared/Libs/mrz.utils.js";
+import { MRZFrameAggregator } from "../../Shared/Libs/mrzFrameAggregator.js";
 import { useKeepAwake } from "../../Shared/Libs/native-keep-awake.utils.js";
+
+// All per-frame display data lives in ONE state object so a processed frame
+// triggers a SINGLE re-render instead of 7 separate setState calls.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EMPTY_VIEW = {
+  raw: '',
+  voted: 'Voting…',
+  valid: false,
+  frames: 0,
+  stable: false
+};
+
+// Process the live OCR stream at this cadence. The camera delivers frames faster
+// than the MRZ validation/voting can run; gating here keeps the JS thread free to
+// service touches (so the buttons stay responsive) while still converging fast.
+const MRZ_PROCESS_INTERVAL_MS = 400;
 const MRZTestScreen = () => {
   useKeepAwake();
   const cameraRef = useRef(null);
-  const [mrzText, setMrzText] = useState('Waiting for MRZ...');
-  const [mrzRawText, setMrzRawText] = useState('');
-  const [mrzValid, setMrzValid] = useState(false);
-  const [rawHistory, setRawHistory] = useState([]);
+
+  // Single consolidated view-state; one setState per processed frame.
+  const [view, setView] = useState(EMPTY_VIEW);
   const [isPaused, setIsPaused] = useState(false);
-  const [overlayBlocks, setOverlayBlocks] = useState([]);
-  const [cameraLayout, setCameraLayout] = useState({
-    width: 1,
-    height: 1
-  });
-  const [frameSize, setFrameSize] = useState({
-    width: 1080,
-    height: 1920
-  });
-  const handleCameraLayout = useCallback(e => {
-    const {
-      width,
-      height
-    } = e.nativeEvent.layout;
-    setCameraLayout({
-      width,
-      height
-    });
-  }, []);
+
+  // Refs for values the frame handler reads but that must NOT re-create it:
+  // keeping handleFrame identity-stable avoids re-subscribing the camera and
+  // keeps it cheap.
+  const pausedRef = useRef(false);
+  const lastProcessedAt = useRef(0);
+  const aggregator = useRef(new MRZFrameAggregator({
+    stabilityTarget: 2
+  }));
   const handleFrame = useCallback(event => {
-    if (isPaused) {
-      return;
-    }
+    if (pausedRef.current) return;
+
+    // Throttle the ENTIRE handler. Drop frames that arrive inside the window
+    // before doing ANY work (no parsing, no setState) so touch events land.
+    const now = Date.now();
+    if (now - lastProcessedAt.current < MRZ_PROCESS_INTERVAL_MS) return;
     const frame = event.nativeEvent.frame;
-    if (frame.width && frame.height) {
-      setFrameSize({
-        width: frame.width,
-        height: frame.height
-      });
-    }
-    if (frame.textBlocks && frame.textBlocks.length > 0) {
-      const frameHeight = frame.height;
-      const bottomThreshold = frameHeight * 0.5;
-      const blocks = frame.textBlocks.map(block => {
-        const blockText = block.text || '';
-        return {
-          ...block,
-          isMrz: blockText.includes('<') && blockText.length >= 12 && (block.blockFrame ? block.blockFrame.y > bottomThreshold : false)
-        };
-      });
-      setOverlayBlocks(blocks);
-    } else {
-      setOverlayBlocks([]);
-    }
-    if (frame.resultText) {
-      setRawHistory(prev => {
-        if (prev[0] === frame.resultText) {
-          return prev;
-        }
-        const next = [frame.resultText, ...prev];
-        return next.slice(0, 20);
-      });
-    }
-    if (frame.resultText && frame.resultText.includes('<')) {
-      // Extract MRZ-only text from detected blocks
-      let mrzOnlyText = '';
-      if (frame.textBlocks && frame.textBlocks.length > 0) {
-        // Filter blocks that look like MRZ (contain < and are in bottom half of frame)
-        const frameHeight = frame.height;
-        const bottomThreshold = frameHeight * 0.5;
-        const mrzBlocks = frame.textBlocks.filter(block => {
-          const blockText = block.text || '';
-          const hasFillers = blockText.includes('<');
-          const isInBottomArea = block.blockFrame ? block.blockFrame.y > bottomThreshold : false;
-          const isLongEnough = blockText.length >= 12;
-          return hasFillers && isInBottomArea && isLongEnough;
-        });
-        if (mrzBlocks.length > 0) {
-          mrzOnlyText = mrzBlocks.map(b => b.text).join('\n');
-        }
-      }
+    const resultText = frame.resultText;
+    if (!resultText || !resultText.includes('<')) return;
+    lastProcessedAt.current = now;
+
+    // Collect every MRZ-looking block (contains a filler) regardless of
+    // position/length — the band is often fragmented and may not sit in the
+    // bottom half. Reconstruction downstream isolates it from front-of-card text.
+    const mrzBlocks = (frame.textBlocks ?? []).filter(b => (b.text || '').includes('<'));
+    const mrzOnlyText = mrzBlocks.length ? mrzBlocks.map(b => b.text).join('\n') : resultText;
+    const bandHeight = mrzBlocks.length ? Math.max(0, ...mrzBlocks.map(b => b.blockFrame?.height ?? 0)) : 0;
+    const consensus = aggregator.current.addFrame({
+      text: `${mrzOnlyText}\n${resultText}`,
+      weight: bandHeight > 0 ? bandHeight : 1
+    });
 
-      // Fallback to full text if no MRZ blocks detected
-      if (!mrzOnlyText) {
-        mrzOnlyText = frame.resultText;
-      }
-      const fixedMrz = mrzUtils.fixMRZ(mrzOnlyText);
-      setMrzRawText(mrzOnlyText);
-      setMrzText(fixedMrz);
-      setMrzValid(mrzUtils.validateMRZWithCorrections(fixedMrz).valid);
-    }
-  }, [isPaused]);
+    // One setState → one re-render.
+    setView({
+      raw: mrzOnlyText,
+      voted: consensus.mrz ?? `Voting… (${consensus.frames} frames)`,
+      valid: !!consensus.validation?.valid,
+      frames: consensus.frames,
+      stable: consensus.stable
+    });
+  }, []);
+  const togglePause = useCallback(() => {
+    pausedRef.current = !pausedRef.current;
+    setIsPaused(pausedRef.current);
+  }, []);
+  const resetVoting = useCallback(() => {
+    aggregator.current.reset();
+    setView(EMPTY_VIEW);
+  }, []);
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     children: [/*#__PURE__*/_jsx(StatusBar, {
@@ -105,7 +86,6 @@ const MRZTestScreen = () => {
       translucent: true
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.cameraWrapper,
-      onLayout: handleCameraLayout,
       children: [/*#__PURE__*/_jsx(TrustchexCamera, {
         ref: cameraRef,
         style: StyleSheet.absoluteFill,
@@ -115,28 +95,15 @@ const MRZTestScreen = () => {
         enableTextRecognition: true,
         enableBarcodeScanning: false,
         includeBase64: false,
-        targetFps: 10,
+        targetFps: 5,
         onFrameAvailable: handleFrame
-      }), overlayBlocks.map((block, i) => {
-        const bf = block.blockFrame;
-        if (!bf) return null;
-        const scaleX = cameraLayout.width / frameSize.width;
-        const scaleY = cameraLayout.height / frameSize.height;
-        return /*#__PURE__*/_jsx(View, {
-          style: [styles.boundingBox, block.isMrz ? styles.boundingBoxMrz : styles.boundingBoxText, {
-            left: bf.x * scaleX,
-            top: bf.y * scaleY,
-            width: bf.width * scaleX,
-            height: bf.height * scaleY
-          }],
-          children: block.isMrz && /*#__PURE__*/_jsx(View, {
-            style: styles.blockLabel,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.blockLabelText,
-              children: "MRZ"
-            })
-          })
-        }, i);
+      }), /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: styles.scanGuide,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.scanGuideLabel,
+          children: "Align MRZ inside this frame"
+        })
       })]
     }), /*#__PURE__*/_jsx(SafeAreaView, {
       style: styles.mrzPanel,
@@ -145,40 +112,47 @@ const MRZTestScreen = () => {
         style: styles.scrollView,
         children: /*#__PURE__*/_jsxs(View, {
           style: styles.panelContent,
-          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.pauseButton,
-            onPress: () => setIsPaused(!isPaused),
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.pauseButtonText,
-              children: isPaused ? 'Resume Processing' : 'Pause Processing'
-            })
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.buttonRow,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.pauseButton,
+              onPress: togglePause,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.pauseButtonText,
+                children: isPaused ? 'Resume Processing' : 'Pause Processing'
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.pauseButton,
+              onPress: resetVoting,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.pauseButtonText,
+                children: "Reset Voting"
+              })
+            })]
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.title,
             children: "MRZ Text Read"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.sectionTitle,
-            children: "MRZ Raw Text"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.mrzText,
-            children: mrzRawText ? mrzRawText.split('\n').map((line, i) => `Line ${i + 1}: ${line} (${line.length} chars)`).join('\n') : 'No MRZ raw text'
-          }), /*#__PURE__*/_jsx(Text, {
+          }), /*#__PURE__*/_jsxs(Text, {
             style: styles.sectionTitle,
-            children: "MRZ Corrected Text"
+            children: ["\u2605 Multi-frame Voted MRZ \u2014 ", view.frames, " frames", view.valid ? ' · VALID' : '', view.stable ? ' · STABLE' : '']
           }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.mrzText, mrzValid ? styles.mrzValid : null],
-            children: mrzText.split('\n').map((line, i) => `Line ${i + 1}: ${line} (${line.length} chars)`).join('\n')
+            style: [styles.mrzText, view.valid ? styles.mrzValid : null],
+            children: formatLines(view.voted)
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.sectionTitle,
-            children: "Raw Text History"
+            children: "MRZ Raw Text (this frame)"
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.mrzText,
-            children: rawHistory.length > 0 ? rawHistory.map((text, i) => `#${i + 1}: ${text.replace(/\n/g, ' ')}`).join('\n') : 'No history'
+            children: view.raw ? formatLines(view.raw) : 'No MRZ raw text'
           })]
         })
       })
     })]
   });
 };
+
+/** Render MRZ text as "Line N: <chars> (N chars)" rows. */
+const formatLines = text => text.split('\n').map((line, i) => `Line ${i + 1}: ${line} (${line.length} chars)`).join('\n');
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -188,31 +162,26 @@ const styles = StyleSheet.create({
     flex: 2,
     position: 'relative'
   },
-  boundingBox: {
+  scanGuide: {
     position: 'absolute',
-    borderWidth: 1.5
-  },
-  boundingBoxText: {
-    borderColor: 'rgba(255, 255, 255, 0.25)'
-  },
-  boundingBoxMrz: {
-    borderColor: '#FFA500',
+    // Mirrors the native OCR crop: top 25% / bottom 12% / 4% side margins.
+    top: '25%',
+    bottom: '12%',
+    left: '4%',
+    right: '4%',
     borderWidth: 2,
-    backgroundColor: 'rgba(255, 165, 0, 0.07)'
-  },
-  blockLabel: {
-    position: 'absolute',
-    top: -14,
-    left: 0,
-    backgroundColor: '#FFA500',
-    paddingHorizontal: 4,
-    paddingVertical: 1,
-    borderRadius: 2
+    borderColor: '#00E5FF',
+    borderRadius: 6,
+    justifyContent: 'flex-start',
+    alignItems: 'center'
   },
-  blockLabelText: {
-    color: '#000000',
-    fontSize: 8,
-    fontWeight: 'bold'
+  scanGuideLabel: {
+    color: '#00E5FF',
+    fontSize: 10,
+    fontWeight: 'bold',
+    marginTop: -16,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    paddingHorizontal: 4
   },
   mrzPanel: {
     flex: 1,
@@ -226,6 +195,11 @@ const styles = StyleSheet.create({
   panelContent: {
     padding: 10
   },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 8
+  },
   pauseButton: {
     alignSelf: 'center',
     borderWidth: 1,

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

@@ -117,7 +117,6 @@ const LivenessDetectionScreen = () => {
       instruction: t('livenessDetectionScreen.finish')
     }
   });
-  const [instructionList, setInstructionList] = useState([]);
   const [hasGuideShown, setHasGuideShown] = useState(false);
   const stoppingRecordingRef = useRef(false); // Track if we're already stopping to prevent multiple calls
 
@@ -143,7 +142,6 @@ const LivenessDetectionScreen = () => {
     instruction === 'LOOK_STRAIGHT_AND_BLINK' || !appContext.currentWorkflowStep?.data?.allowedLivenessInstructionTypes || appContext.currentWorkflowStep?.data?.allowedLivenessInstructionTypes.length === 0 || appContext.currentWorkflowStep?.data?.allowedLivenessInstructionTypes.includes(instruction))).sort(() => Math.random() - 0.5);
     il.unshift('START');
     il.push('FINISH');
-    setInstructionList(il);
     setInitialState({
       brightnessLow: false,
       faceDetected: false,
@@ -440,7 +438,30 @@ const LivenessDetectionScreen = () => {
     const circleR = previewSizeInFrame / 2;
     const faceDx = faceCenterX - circleCX;
     const faceDy = faceCenterY - circleCY;
-    const previewContainsFace = faceDx * faceDx + faceDy * faceDy <= (circleR - faceCoreRadius) * (circleR - faceCoreRadius);
+    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);
+
+    // 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) {
       // Brightness too low - reset progress if we've started the flow

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

@@ -575,7 +575,7 @@ const VerbalConsentScreen = () => {
     if (!currentInstructionKey) {
       return;
     }
-    speak(t(currentInstructionKey));
+    speak(t(currentInstructionKey)).catch(() => {});
   }, [appContext.currentWorkflowStep?.data?.voiceGuidanceActive, currentInstructionKey, hasGuideShown, t]);
   useEffect(() => {
     return () => {

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

@@ -1,11 +1,12 @@
 "use strict";
 
 import React, { useEffect, useState, useRef, useContext } from 'react';
-import { Dimensions, Platform, StyleSheet, Text, TouchableOpacity, View, ActivityIndicator, PermissionsAndroid, StatusBar } from 'react-native';
+import { Dimensions, Platform, StyleSheet, Text, TouchableOpacity, View, ActivityIndicator, StatusBar } from 'react-native';
 import { RTCView } from 'react-native-webrtc';
 import InCallManager from 'react-native-incall-manager';
 import LottieView from 'lottie-react-native';
 import { useTranslation } from 'react-i18next';
+import PermissionManager from "../../Shared/Libs/permissions.utils.js";
 import { useStatusBarWhiteBackground } from "../../Shared/Libs/status-bar.utils.js";
 import { WebRTCService } from "../../Shared/Services/WebRTCService.js";
 import { VideoSessionService } from "../../Shared/Services/VideoSessionService.js";
@@ -316,18 +317,12 @@ const VideoCallScreen = ({
       });
       serviceRef.current = service;
 
-      // Request Permissions
-      if (Platform.OS === 'android') {
-        const granted = await PermissionsAndroid.requestMultiple([PermissionsAndroid.PERMISSIONS.CAMERA, PermissionsAndroid.PERMISSIONS.RECORD_AUDIO]);
-        if (granted['android.permission.CAMERA'] !== PermissionsAndroid.RESULTS.GRANTED || granted['android.permission.RECORD_AUDIO'] !== PermissionsAndroid.RESULTS.GRANTED) {
-          if (mounted) setConnectionState('permissions_denied');
-          return;
-        }
+      // Request Camera and Microphone Permissions
+      const hasBothPermissions = await PermissionManager.requestCameraAndMicrophone();
+      if (!hasBothPermissions) {
+        if (mounted) setConnectionState('permissions_denied');
+        return;
       }
-      // For iOS, react-native-webrtc or VisionCamera usually triggers it,
-      // but explicit request via library is better if we had one.
-      // Assuming automatic or previously granted for now.
-
       try {
         const stream = await service.initialize();
         if (mounted) {

package/lib/module/Screens/Static/ResultScreen.js

@@ -70,10 +70,15 @@ const ResultScreen = () => {
     }
   }, []);
   const formatGender = useCallback(code => {
+    // The eID/NFC path stores sex as "M"/"F" (ICAO getStrCode), while the
+    // camera MRZ path (the `mrz` npm package) stores "male"/"female". Accept
+    // both so the ID scan shows the gender instead of "unspecified".
     switch (code?.toUpperCase()) {
       case 'M':
+      case 'MALE':
         return t('eidScannerScreen.genderMale');
       case 'F':
+      case 'FEMALE':
         return t('eidScannerScreen.genderFemale');
       default:
         return t('eidScannerScreen.genderUnspecified');
@@ -695,7 +700,7 @@ const ResultScreen = () => {
                 }), /*#__PURE__*/_jsx(Text, {
                   style: styles.sectionText,
                   children: t('resultScreen.demoVideo')
-                }), /*#__PURE__*/_jsx(Video, {
+                }), consentVideo.videoPath ? /*#__PURE__*/_jsx(Video, {
                   source: {
                     uri: consentVideo.videoPath
                   },
@@ -703,6 +708,9 @@ const ResultScreen = () => {
                   style: styles.video,
                   controls: true,
                   muted: false
+                }) : /*#__PURE__*/_jsx(Text, {
+                  style: styles.sectionText,
+                  children: "N/A"
                 })]
               }, `${consentVideo.videoPath}-${index}`))]
             })]