@trustchex/react-native-sdk 1.472.0 → 1.475.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustchex/react-native-sdk",
-  "version": "1.472.0",
+  "version": "1.475.1",
   "description": "Trustchex mobile app react native SDK for android or ios devices",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -60,7 +60,17 @@
     "@react-navigation/core": "7.12.4",
     "@react-navigation/native": "7.1.18",
     "@react-navigation/native-stack": "7.3.27",
-    "@react-navigation/elements": "2.6.5"
+    "@react-navigation/elements": "2.6.5",
+    "lodash": "4.17.23",
+    "brace-expansion": "1.1.13",
+    "minimatch": "3.1.4",
+    "qs": "6.15.2",
+    "ip-address": "10.1.1",
+    "uuid": "11.1.1",
+    "yaml": "2.8.3",
+    "fast-uri": "3.1.2",
+    "flatted": "3.4.2",
+    "react-native-screens": "4.18.0"
   },
   "scripts": {
     "example": "yarn workspace @trustchex/react-native-sdk-example",
@@ -116,7 +126,6 @@
     "react-native-svg": "^15.12.0",
     "react-native-tts": "^4.1.1",
     "react-native-video": "^6.16.1",
-    "react-native-vision-camera": "^4.7.1",
     "react-native-webrtc": "^124.0.0",
     "react-native-webview": "^13.15.0",
     "release-it": "^17.10.0",
@@ -129,6 +138,7 @@
     "buffer": "^6.0.3",
     "crypto-js": "^4.2.0",
     "elliptic": "^6.6.1",
+    "hash.js": "^1.1.7",
     "i18next": "^25.3.2",
     "jpeg2000": "^1.1.1",
     "mrz": "^5.0.1",
@@ -153,10 +163,8 @@
     "react-native-svg": ">=15.12.0",
     "react-native-tts": ">=4.1.1",
     "react-native-video": ">=6.16.1",
-    "react-native-vision-camera": ">=4.7.1",
     "react-native-webrtc": ">=124.0.0",
-    "react-native-webview": ">=13.15.0",
-    "react-native-worklets-core": ">=1.6.2"
+    "react-native-webview": ">=13.15.0"
   },
   "peerDependenciesMeta": {
     "@react-navigation/native": {
@@ -210,9 +218,6 @@
     "react-native-video": {
       "optional": false
     },
-    "react-native-vision-camera": {
-      "optional": false
-    },
     "react-native-webrtc": {
       "optional": false
     },
@@ -231,7 +236,7 @@
       "<rootDir>/lib/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(uuid|react-native|@react-native|react-native-device-info|react-native-get-random-values|react-native-fs)/)"
+      "node_modules/(?!(uuid|mrz|react-native|@react-native|react-native-device-info|react-native-get-random-values|react-native-fs)/)"
     ]
   },
   "commitlint": {

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/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');

package/src/Shared/Components/IdentityDocumentCamera.tsx

@@ -23,6 +23,7 @@ import {
 import { NativeModules } from 'react-native';
 import PermissionManager from '../Libs/permissions.utils';
 import mrzUtils from '../Libs/mrz.utils';
+import { MRZFrameAggregator } from '../Libs/mrzFrameAggregator';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
 import { useIsFocused } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
@@ -144,6 +145,10 @@ const IdentityDocumentCamera = ({
   const lastValidMRZText = useRef<string | null>(null);
   const lastValidMRZFields = useRef<any>(null);
   const validMRZConsecutiveCount = useRef(0);
+  // Multi-frame per-character voting: fuses OCR across frames so a single-frame
+  // misread (B↔8, S↔5, <↔K, dropped/inserted digit) is outvoted instead of
+  // resetting progress. Drives the same `parsedMRZData`/stability the flow uses.
+  const mrzAggregator = useRef(new MRZFrameAggregator({ stabilityTarget: 2 }));
 
   // Document type stability tracking - require consistent detections from good quality frames
   const lastDetectedDocType = useRef<
@@ -277,6 +282,7 @@ const IdentityDocumentCamera = ({
       lastValidMRZText.current = null;
       lastValidMRZFields.current = null;
       validMRZConsecutiveCount.current = 0;
+      mrzAggregator.current.reset();
       cachedBarcode.current = null;
       isCompletionCallbackInvoked.current = false;
       isStepTransitionInProgress.current = false;
@@ -601,6 +607,8 @@ const IdentityDocumentCamera = ({
       if (nextStepType === 'SCAN_ID_BACK') {
         lastValidMRZText.current = null;
         lastValidMRZFields.current = null;
+        // New MRZ expected on the back — start voting fresh.
+        mrzAggregator.current.reset();
       }
       validMRZConsecutiveCount.current = 0;
       cachedBarcode.current = null; // Clear cached barcode on step change
@@ -848,14 +856,43 @@ const IdentityDocumentCamera = ({
       // Prefer MRZ-only text if available (from detected MRZ blocks),
       // otherwise fall back to all text (for backward compatibility)
       const textForValidation = scannedText?.mrzOnlyText || text;
+
+      // Multi-frame per-character voting: feed this frame's OCR into the
+      // aggregator (weighted by the MRZ band's pixel height as a sharpness/
+      // closeness proxy — a taller band means more pixels per character, which
+      // ML Kit reads more reliably) and prefer the fused consensus. This outvotes
+      // single-frame OCR errors (B↔8, S↔5, <↔K, dropped/inserted digit) instead
+      // of letting one noisy frame reset progress.
+      const mrzBandHeight = scannedText?.blocks?.length
+        ? Math.max(
+            0,
+            ...scannedText.blocks.map((b) => b.blockFrame?.height ?? 0)
+          )
+        : 0;
+      const frameWeight = mrzBandHeight > 0 ? mrzBandHeight : 1;
+      const consensus = mrzAggregator.current.addFrame({
+        text: textForValidation,
+        weight: frameWeight,
+      });
+
+      // Use the fused consensus when it is valid; otherwise fall back to a
+      // single-frame validation so document-type detection still works on the
+      // early frames. Only run the (expensive) single-frame pass when the
+      // consensus has NOT yet validated — once it has, the per-frame validation
+      // is redundant work that would needlessly load the JS thread.
       const mrzValidationResult =
-        mrzUtils.validateMRZWithCorrections(textForValidation);
+        consensus.validation?.valid && consensus.validation.fields
+          ? consensus.validation
+          : mrzUtils.validateMRZWithCorrections(textForValidation);
       const parsedMRZData = {
         valid: mrzValidationResult.valid,
         fields: mrzValidationResult.fields || null,
       };
-      // Extract raw MRZ lines from text if validation succeeded
-      const mrzText = parsedMRZData.valid ? mrzUtils.fixMRZ(text) : null;
+      // Raw MRZ lines: prefer the fused/corrected consensus when valid, else the
+      // lightweight per-frame clean. correctedMrz is the noise-free recovered MRZ.
+      const mrzText = parsedMRZData.valid
+        ? (mrzValidationResult.correctedMrz ?? mrzUtils.fixMRZ(text))
+        : null;
 
       // CRITICAL: Only detect document type during initial scan step
       // For SCAN_HOLOGRAM and beyond, use the locked detectedDocumentType to avoid
@@ -1006,9 +1043,12 @@ const IdentityDocumentCamera = ({
 
       // Check if we have enough consistent valid reads
       const mrzStableAndValid =
-        validMRZConsecutiveCount.current >= REQUIRED_CONSISTENT_MRZ_READS &&
-        parsedMRZData?.valid === true &&
-        areMRZFieldsEqual(lastValidMRZFields.current, parsedMRZData?.fields);
+        // Either: the multi-frame voted consensus has converged (valid + stable),
+        (consensus.stable && parsedMRZData?.valid === true) ||
+        // or the legacy N-identical-reads path is satisfied.
+        (validMRZConsecutiveCount.current >= REQUIRED_CONSISTENT_MRZ_READS &&
+          parsedMRZData?.valid === true &&
+          areMRZFieldsEqual(lastValidMRZFields.current, parsedMRZData?.fields));
 
       // ============================================================================
       // SCAN_ID_BACK STEP - Validate MRZ + barcode on back of ID card