@trustchex/react-native-sdk 1.464.0 → 1.475.0

package/src/Screens/Debug/MRZTestScreen.tsx

@@ -7,116 +7,108 @@ import {
   StatusBar,
   TouchableOpacity,
   type NativeSyntheticEvent,
-  type LayoutChangeEvent,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   TrustchexCamera,
   type TrustchexCameraHandle,
   type Frame,
-  type NativeTextBlock,
 } from '../../Shared/Components/TrustchexCamera';
-import mrzUtils from '../../Shared/Libs/mrz.utils';
+import { MRZFrameAggregator } from '../../Shared/Libs/mrzFrameAggregator';
 import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
 
-interface MrzOverlayBlock extends NativeTextBlock {
-  isMrz: boolean;
+// 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.
+interface MrzView {
+  raw: string;
+  voted: string;
+  valid: boolean;
+  frames: number;
+  stable: boolean;
 }
 
+const EMPTY_VIEW: MrzView = {
+  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<TrustchexCameraHandle>(null);
-  const [mrzText, setMrzText] = useState<string>('Waiting for MRZ...');
-  const [mrzRawText, setMrzRawText] = useState<string>('');
-  const [mrzValid, setMrzValid] = useState<boolean>(false);
-  const [rawHistory, setRawHistory] = useState<string[]>([]);
+
+  // Single consolidated view-state; one setState per processed frame.
+  const [view, setView] = useState<MrzView>(EMPTY_VIEW);
   const [isPaused, setIsPaused] = useState<boolean>(false);
-  const [overlayBlocks, setOverlayBlocks] = useState<MrzOverlayBlock[]>([]);
-  const [cameraLayout, setCameraLayout] = useState({ width: 1, height: 1 });
-  const [frameSize, setFrameSize] = useState({ width: 1080, height: 1920 });
 
-  const handleCameraLayout = useCallback((e: LayoutChangeEvent) => {
-    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: NativeSyntheticEvent<{ frame: Frame }>) => {
-      if (isPaused) {
-        return;
-      }
-
-      const frame = event.nativeEvent.frame;
-
-      if (frame.width && frame.height) {
-        setFrameSize({ width: frame.width, height: frame.height });
-      }
+      if (pausedRef.current) return;
 
-      if (frame.textBlocks && frame.textBlocks.length > 0) {
-        const frameHeight = frame.height;
-        const bottomThreshold = frameHeight * 0.5;
-        const blocks: MrzOverlayBlock[] = 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([]);
-      }
+      // 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;
 
-      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;
-          });
+      const frame = event.nativeEvent.frame;
+      const resultText = frame.resultText;
+      if (!resultText || !resultText.includes('<')) return;
+      lastProcessedAt.current = now;
 
-          if (mrzBlocks.length > 0) {
-            mrzOnlyText = mrzBlocks.map((b) => b.text).join('\n');
-          }
-        }
+      // 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;
 
-        // Fallback to full text if no MRZ blocks detected
-        if (!mrzOnlyText) {
-          mrzOnlyText = frame.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,
+      });
 
-        const fixedMrz = mrzUtils.fixMRZ(mrzOnlyText);
-        setMrzRawText(mrzOnlyText);
-        setMrzText(fixedMrz);
-        setMrzValid(mrzUtils.validateMRZWithCorrections(fixedMrz).valid);
-      }
+      // 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,
+      });
     },
-    [isPaused]
+    []
   );
 
+  const togglePause = useCallback(() => {
+    pausedRef.current = !pausedRef.current;
+    setIsPaused(pausedRef.current);
+  }, []);
+
+  const resetVoting = useCallback(() => {
+    aggregator.current.reset();
+    setView(EMPTY_VIEW);
+  }, []);
+
   return (
     <View style={styles.container}>
       <StatusBar
@@ -124,7 +116,7 @@ const MRZTestScreen = () => {
         backgroundColor="transparent"
         translucent
       />
-      <View style={styles.cameraWrapper} onLayout={handleCameraLayout}>
+      <View style={styles.cameraWrapper}>
         <TrustchexCamera
           ref={cameraRef}
           style={StyleSheet.absoluteFill}
@@ -134,78 +126,50 @@ 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 (
-            <View
-              key={i}
-              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,
-                },
-              ]}
-            >
-              {block.isMrz && (
-                <View style={styles.blockLabel}>
-                  <Text style={styles.blockLabelText}>MRZ</Text>
-                </View>
-              )}
-            </View>
-          );
-        })}
+
+        {/* Scan-frame guide: matches the native OCR crop region. Only the data
+            INSIDE this box is OCR'd — align the card's MRZ band here. */}
+        <View pointerEvents="none" style={styles.scanGuide}>
+          <Text style={styles.scanGuideLabel}>Align MRZ inside this frame</Text>
+        </View>
       </View>
 
       <SafeAreaView style={styles.mrzPanel} edges={['bottom']}>
         <ScrollView style={styles.scrollView}>
           <View style={styles.panelContent}>
-            <TouchableOpacity
-              style={styles.pauseButton}
-              onPress={() => setIsPaused(!isPaused)}
-            >
-              <Text style={styles.pauseButtonText}>
-                {isPaused ? 'Resume Processing' : 'Pause Processing'}
-              </Text>
-            </TouchableOpacity>
+            <View style={styles.buttonRow}>
+              <TouchableOpacity
+                style={styles.pauseButton}
+                onPress={togglePause}
+              >
+                <Text style={styles.pauseButtonText}>
+                  {isPaused ? 'Resume Processing' : 'Pause Processing'}
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={styles.pauseButton}
+                onPress={resetVoting}
+              >
+                <Text style={styles.pauseButtonText}>Reset Voting</Text>
+              </TouchableOpacity>
+            </View>
             <Text style={styles.title}>MRZ Text Read</Text>
-            <Text style={styles.sectionTitle}>MRZ Raw Text</Text>
-            <Text style={styles.mrzText}>
-              {mrzRawText
-                ? mrzRawText
-                    .split('\n')
-                    .map(
-                      (line, i) =>
-                        `Line ${i + 1}: ${line} (${line.length} chars)`
-                    )
-                    .join('\n')
-                : 'No MRZ raw text'}
+
+            <Text style={styles.sectionTitle}>
+              ★ Multi-frame Voted MRZ — {view.frames} frames
+              {view.valid ? ' · VALID' : ''}
+              {view.stable ? ' · STABLE' : ''}
             </Text>
-            <Text style={styles.sectionTitle}>MRZ Corrected Text</Text>
-            <Text style={[styles.mrzText, mrzValid ? styles.mrzValid : null]}>
-              {mrzText
-                .split('\n')
-                .map(
-                  (line, i) => `Line ${i + 1}: ${line} (${line.length} chars)`
-                )
-                .join('\n')}
+            <Text style={[styles.mrzText, view.valid ? styles.mrzValid : null]}>
+              {formatLines(view.voted)}
             </Text>
-            <Text style={styles.sectionTitle}>Raw Text History</Text>
+
+            <Text style={styles.sectionTitle}>MRZ Raw Text (this frame)</Text>
             <Text style={styles.mrzText}>
-              {rawHistory.length > 0
-                ? rawHistory
-                    .map((text, i) => `#${i + 1}: ${text.replace(/\n/g, ' ')}`)
-                    .join('\n')
-                : 'No history'}
+              {view.raw ? formatLines(view.raw) : 'No MRZ raw text'}
             </Text>
           </View>
         </ScrollView>
@@ -214,6 +178,13 @@ const MRZTestScreen = () => {
   );
 };
 
+/** Render MRZ text as "Line N: <chars> (N chars)" rows. */
+const formatLines = (text: string): string =>
+  text
+    .split('\n')
+    .map((line, i) => `Line ${i + 1}: ${line} (${line.length} chars)`)
+    .join('\n');
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -223,31 +194,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,
+  scanGuideLabel: {
+    color: '#00E5FF',
+    fontSize: 10,
     fontWeight: 'bold',
+    marginTop: -16,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    paddingHorizontal: 4,
   },
   mrzPanel: {
     flex: 1,
@@ -261,6 +227,11 @@ const styles = StyleSheet.create({
   panelContent: {
     padding: 10,
   },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 8,
+  },
   pauseButton: {
     alignSelf: 'center',
     borderWidth: 1,

package/src/Screens/Dynamic/LivenessDetectionScreen.tsx

@@ -181,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
 
@@ -220,7 +219,6 @@ const LivenessDetectionScreen = () => {
       .sort(() => Math.random() - 0.5);
     il.unshift('START');
     il.push('FINISH');
-    setInstructionList(il);
     setInitialState({
       brightnessLow: false,
       faceDetected: false,
@@ -598,9 +596,51 @@ 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) {

package/src/Screens/Dynamic/VerbalConsentScreen.tsx

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

package/src/Screens/Dynamic/VideoCallScreen.tsx

@@ -7,13 +7,13 @@ import {
   TouchableOpacity,
   View,
   ActivityIndicator,
-  PermissionsAndroid,
   StatusBar,
 } from 'react-native';
 import { RTCView, MediaStream } 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';
 import { useStatusBarWhiteBackground } from '../../Shared/Libs/status-bar.utils';
 import { WebRTCService } from '../../Shared/Services/WebRTCService';
 import { VideoSessionService } from '../../Shared/Services/VideoSessionService';
@@ -373,25 +373,14 @@ const VideoCallScreen = ({ navigation }: any) => {
       });
       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();

package/src/Screens/Static/ResultScreen.tsx

@@ -100,10 +100,15 @@ const ResultScreen = () => {
 
   const formatGender = useCallback(
     (code?: string | null) => {
+      // 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');
@@ -1055,15 +1060,19 @@ const ResultScreen = () => {
                           <Text style={styles.sectionText}>
                             {t('resultScreen.demoVideo')}
                           </Text>
-                          <Video
-                            source={{
-                              uri: consentVideo.videoPath,
-                            }}
-                            resizeMode="contain"
-                            style={styles.video}
-                            controls={true}
-                            muted={false}
-                          />
+                          {consentVideo.videoPath ? (
+                            <Video
+                              source={{
+                                uri: consentVideo.videoPath,
+                              }}
+                              resizeMode="contain"
+                              style={styles.video}
+                              controls={true}
+                              muted={false}
+                            />
+                          ) : (
+                            <Text style={styles.sectionText}>N/A</Text>
+                          )}
                         </View>
                       )
                     )}