@trustchex/react-native-sdk 1.361.0 → 1.362.1

package/src/Shared/Components/IdentityDocumentCamera.tsx

@@ -12,6 +12,7 @@ import {
   ActivityIndicator,
   PermissionsAndroid,
   Dimensions,
+  ScrollView,
   type NativeSyntheticEvent,
   type ViewStyle,
 } from 'react-native';
@@ -23,6 +24,7 @@ import {
 } from './TrustchexCamera';
 import { NativeModules } from 'react-native';
 import type { MRZFields } from '../Types/mrzFields';
+import mrzUtils from '../Libs/mrz.utils';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
 import { useIsFocused } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
@@ -50,6 +52,7 @@ export type DocumentScannedData = {
 export type BlockText = {
   blocks: BlocksData[];
   resultText: string;
+  mrzOnlyText?: string; // MRZ-specific text from detected MRZ blocks only
 };
 
 type BlocksData = {
@@ -97,6 +100,7 @@ export type PhotoOptions = {
 export interface IdentityDocumentCameraProps {
   onlyMRZScan: boolean;
   onIdentityDocumentScanned: (scannedData: DocumentScannedData) => void;
+  testMode?: boolean;
 }
 
 interface Face {
@@ -128,6 +132,7 @@ const MAX_CONSECUTIVE_QUALITY_FAILURES = 30;
 const IdentityDocumentCamera = ({
   onlyMRZScan,
   onIdentityDocumentScanned,
+  testMode = false,
 }: IdentityDocumentCameraProps) => {
   useKeepAwake();
   const theme = useTheme();
@@ -201,6 +206,12 @@ const IdentityDocumentCamera = ({
   // Barcode caching - persist detected barcode across frames for reliability
   const cachedBarcode = useRef<Barcode | null>(null);
 
+  // Test mode tracking
+  const [testModeData, setTestModeData] = useState<{
+    mrzText: string;
+    timestamp: number;
+  } | null>(null);
+
   // Helper to compare MRZ field values (ignore raw text variations)
   const areMRZFieldsEqual = useCallback(
     (fields1: any, fields2: any): boolean => {
@@ -699,7 +710,7 @@ const IdentityDocumentCamera = ({
       barcode?: Barcode,
       image?: string,
       elementsOutside?: boolean,
-      nativeMrzResult?: Frame['mrzResult']
+      scannedText?: BlockText
     ) => {
       const detectDocumentType = (
         facesParam: Face[],
@@ -970,13 +981,49 @@ const IdentityDocumentCamera = ({
         return;
       }
 
-      const parsedMRZData =
-        nativeMrzResult?.valid && nativeMrzResult.documentCode
-          ? { valid: true, fields: nativeMrzResult as MRZFields }
-          : nativeMrzResult?.documentCode
-            ? { valid: false, fields: nativeMrzResult as MRZFields }
-            : { valid: false, fields: null };
-      const mrzText = parsedMRZData.valid ? nativeMrzResult?.rawLines : null;
+      // Use JavaScript MRZ validation with corrections
+      // Prefer MRZ-only text if available (from detected MRZ blocks),
+      // otherwise fall back to all text (for backward compatibility)
+      const textForValidation = scannedText?.mrzOnlyText || text;
+      const mrzValidationResult =
+        mrzUtils.validateMRZWithCorrections(textForValidation);
+      const parsedMRZData = {
+        valid: mrzValidationResult.valid,
+        fields: mrzValidationResult.fields || null,
+      };
+
+      // Capture test mode data
+      if (testMode && text && text.includes('<')) {
+        const mrzOnlyText = scannedText?.mrzOnlyText || text;
+        setTestModeData({
+          mrzText: mrzOnlyText,
+          timestamp: Date.now(),
+        });
+      }
+
+      // Log MRZ validation details for debugging
+      if (isDebugEnabled() && text && text.includes('<')) {
+        const mrzLines = text
+          .split('\n')
+          .filter((line) => line.includes('<') && line.length > 20);
+        if (mrzLines.length >= 2) {
+          console.log(
+            '[MRZ Debug] Raw OCR text lines:',
+            mrzLines.map((l) => `"${l}"`)
+          );
+          console.log('[MRZ Debug] Validation result:', {
+            valid: mrzValidationResult.valid,
+            format: mrzValidationResult.format,
+            documentCode: mrzValidationResult.fields?.documentCode,
+            documentNumber: mrzValidationResult.fields?.documentNumber,
+            optional1: mrzValidationResult.fields?.optional1,
+            error: mrzValidationResult.error,
+          });
+        }
+      }
+
+      // Extract raw MRZ lines from text if validation succeeded
+      const mrzText = parsedMRZData.valid ? mrzUtils.fixMRZ(text) : null;
 
       // MRZ stability check - require consistent valid reads to avoid OCR noise
       // Compare parsed field values instead of raw text to handle OCR variations in filler characters
@@ -1071,11 +1118,28 @@ const IdentityDocumentCamera = ({
           parsedMRZData?.valid === true &&
           hasRequiredFields &&
           mrzStableAndValid;
+
+        // For Turkish ID cards, barcode should match MRZ optional1 (serial number)
+        // But some cards have encoding differences, so be lenient
         const barcodeMatchesMRZ =
           barcodeToUse?.rawValue?.trim() ===
           parsedMRZData?.fields?.optional1?.trim();
+
+        // If barcode doesn't match exactly, check if it contains the optional1 value
+        const barcodeContainsMRZ =
+          barcodeToUse?.rawValue?.includes(
+            parsedMRZData?.fields?.optional1?.trim() || ''
+          ) ||
+          parsedMRZData?.fields?.optional1?.includes(
+            barcodeToUse?.rawValue?.trim() || ''
+          );
+
         // Require barcode for all documents (no special card fallback)
-        const barcodeAccepted = onlyMRZScan || barcodeMatchesMRZ;
+        // Accept if exact match OR if one contains the other (handles encoding differences)
+        const barcodeAccepted =
+          onlyMRZScan ||
+          barcodeMatchesMRZ ||
+          (!!barcodeToUse?.rawValue && barcodeContainsMRZ);
 
         // CRITICAL: Require all document elements to be in frame before accepting
         // For ID_BACK: MRZ + barcode (check directly, not via state to avoid timing issues)
@@ -1140,8 +1204,11 @@ const IdentityDocumentCamera = ({
                   onlyMRZScan,
                   hasBarcodeValue: !!barcodeToUse?.rawValue,
                   barcodeMatchesMRZ,
+                  barcodeContainsMRZ,
                   mrzOptional1: parsedMRZData?.fields?.optional1,
                   barcodeValue: barcodeToUse?.rawValue,
+                  barcodeValueTrimmed: barcodeToUse?.rawValue?.trim(),
+                  optional1Trimmed: parsedMRZData?.fields?.optional1?.trim(),
                   barcodeSource:
                     barcodeToUse === cachedBarcode.current
                       ? 'cached'
@@ -1864,6 +1931,7 @@ const IdentityDocumentCamera = ({
       logMRZValidationFailure,
       currentSecondaryFaceImage,
       detectHologramNative,
+      mrzUtils,
     ]
   );
 
@@ -1982,6 +2050,7 @@ const IdentityDocumentCamera = ({
         const resultText = textBlocks.map((b) => b.text).join('\n');
         const scannedText: BlockText = {
           resultText,
+          mrzOnlyText: undefined, // Will be set below if MRZ blocks detected
           blocks: textBlocks.map((block) => ({
             blockText: block.text || '',
             blockFrame: block.blockFrame ?? {
@@ -2186,6 +2255,20 @@ const IdentityDocumentCamera = ({
 
             console.log('[Debug] MRZ blocks found:', mrzBlocks.length);
             if (mrzBlocks.length > 0) {
+              // Extract MRZ-only text from detected blocks (sorted by Y position for correct line order)
+              const sortedMrzBlocks = [...mrzBlocks].sort(
+                (a, b) => (a.blockFrame?.y || 0) - (b.blockFrame?.y || 0)
+              );
+              scannedText.mrzOnlyText = sortedMrzBlocks
+                .map((b) => b.text)
+                .join('\n');
+              if (isDebugEnabled()) {
+                console.log(
+                  '[MRZ Extraction] Using only MRZ blocks:',
+                  scannedText.mrzOnlyText.substring(0, 100)
+                );
+              }
+
               const minX = Math.min(...mrzBlocks.map((b) => b.blockFrame!.x));
               const minY = Math.min(...mrzBlocks.map((b) => b.blockFrame!.y));
               const maxX = Math.max(
@@ -2520,7 +2603,7 @@ const IdentityDocumentCamera = ({
           barcodes.length ? barcodes[0] : undefined,
           base64Image,
           outsideElements.length > 0,
-          frame.mrzResult
+          scannedText
         );
       } catch (error: any) {
         console.warn('Frame processing error:', error?.message);
@@ -2626,7 +2709,6 @@ const IdentityDocumentCamera = ({
             enableFrameProcessing={isActive}
             enableFaceDetection={isActive && faceDetectionEnabled}
             enableTextRecognition={isActive}
-            enableMrzValidation={isActive}
             enableBarcodeScanning={isActive && nextStep === 'SCAN_ID_BACK'}
             includeBase64={isActive}
             targetFps={10}
@@ -3272,43 +3354,6 @@ const IdentityDocumentCamera = ({
                   </TextView>
                 </View>
               )}
-              {isDebugEnabled() && (
-                <View style={styles.imageContainer}>
-                  {_currentHologramMaskImage ? (
-                    <Image
-                      source={{
-                        uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`,
-                      }}
-                      style={styles.faceImage}
-                    />
-                  ) : (
-                    <View
-                      style={[
-                        styles.faceImage,
-                        { backgroundColor: '#333', justifyContent: 'center' },
-                      ]}
-                    >
-                      <TextView
-                        style={{
-                          color: '#666',
-                          fontSize: 10,
-                          textAlign: 'center',
-                        }}
-                      >
-                        Waiting...
-                      </TextView>
-                    </View>
-                  )}
-                  <TextView
-                    style={[
-                      styles.imageContainerText,
-                      _currentHologramMaskImage && { color: '#4CAF50' },
-                    ]}
-                  >
-                    {`${_currentHologramMaskImage ? '✓ ' : ''}Mask`}
-                  </TextView>
-                </View>
-              )}
               {isDebugEnabled() && (
                 <View style={styles.imageContainer}>
                   {currentHologramImage ? (
@@ -3379,30 +3424,39 @@ const IdentityDocumentCamera = ({
                 </View>
               )}
               {isDebugEnabled() && (
-                <View style={styles.debugInfoContainer}>
-                  <TextView style={styles.debugInfoText}>
-                    {`Step: ${nextStep}`}
-                  </TextView>
-                  <TextView style={styles.debugInfoText}>
-                    {`Status: ${status}`}
-                  </TextView>
-                  <TextView style={styles.debugInfoText}>
-                    {`Face: ${currentFaceImage ? '✓ CAPTURED' : '✗ WAITING'} ${!faceDetectionEnabled ? '(DISABLED)' : ''}`}
-                  </TextView>
-                  <TextView style={styles.debugInfoText}>
-                    {`Hologram: ${currentHologramImage ? '✓ CAPTURED' : `${hologramImageCount}/${HOLOGRAM_IMAGE_COUNT} imgs`} (retry ${hologramDetectionCurrentRetryCount.current}/${HOLOGRAM_DETECTION_RETRY_COUNT})`}
-                  </TextView>
-                  <TextView style={styles.debugInfoText}>
-                    {`2nd Face: ${currentSecondaryFaceImage ? '✓ CAPTURED' : '✗ WAITING'} (retry ${secondaryFaceDetectionCurrentRetryCount.current}/${SECOND_FACE_DETECTION_RETRY_COUNT})`}
-                  </TextView>
-                  <TextView style={styles.debugInfoText}>
-                    {`Flash: ${isTorchOn ? '🔦 ON' : '🔦 OFF'}`}
-                  </TextView>
-                  <TextView style={styles.debugInfoText}>
-                    {`Brightness: ${isBrightnessLow ? '⚠️ LOW' : '✓ OK'}`}
-                  </TextView>
-                  <TextView style={styles.debugInfoText}>
-                    {`Blur: ${isFrameBlurry ? '⚠️ BLURRY' : '✓ OK'}`}
+                <View style={styles.imageContainer}>
+                  {_currentHologramMaskImage ? (
+                    <Image
+                      source={{
+                        uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`,
+                      }}
+                      style={styles.faceImage}
+                    />
+                  ) : (
+                    <View
+                      style={[
+                        styles.faceImage,
+                        { backgroundColor: '#333', justifyContent: 'center' },
+                      ]}
+                    >
+                      <TextView
+                        style={{
+                          color: '#666',
+                          fontSize: 10,
+                          textAlign: 'center',
+                        }}
+                      >
+                        Waiting...
+                      </TextView>
+                    </View>
+                  )}
+                  <TextView
+                    style={[
+                      styles.imageContainerText,
+                      _currentHologramMaskImage && { color: '#4CAF50' },
+                    ]}
+                  >
+                    {`${_currentHologramMaskImage ? '✓ ' : ''}Mask`}
                   </TextView>
                 </View>
               )}
@@ -3457,82 +3511,120 @@ const IdentityDocumentCamera = ({
             ) : null}
           </View>
           {isDebugEnabled() && (
-            <View
+            <SafeAreaView
               style={{
                 position: 'absolute',
-                top: 10,
-                right: 10,
-                backgroundColor: 'rgba(0, 0, 0, 0.85)',
-                padding: 10,
-                borderRadius: 8,
-                borderWidth: 1,
-                borderColor: '#FF6B6B',
-                maxWidth: 200,
+                top: 0,
+                left: 0,
+                right: 0,
+                alignItems: 'center',
+                pointerEvents: 'none',
               }}
             >
-              <TextView
+              <View
                 style={{
-                  color: '#FF6B6B',
-                  fontSize: 11,
-                  fontWeight: 'bold',
-                  marginBottom: 6,
+                  marginTop: 10,
+                  backgroundColor: 'rgba(0, 0, 0, 0.85)',
+                  padding: 10,
+                  borderRadius: 8,
+                  borderWidth: 1,
+                  borderColor: '#FF6B6B',
+                  minWidth: 200,
                 }}
               >
-                🐛 DEBUG MODE
-              </TextView>
-              <TextView
-                style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-              >
-                {`Step: ${nextStep}`}
-              </TextView>
-              <TextView
-                style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-              >
-                {`Status: ${status}`}
-              </TextView>
-              <TextView
-                style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-              >
-                {`Doc Type: ${detectedDocumentType}`}
-              </TextView>
-              <TextView
-                style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-              >
-                {`Face: ${currentFaceImage ? '✓' : '✗'}`}
-              </TextView>
-              {!onlyMRZScan && (
-                <>
+                <TextView
+                  style={{
+                    color: '#FF6B6B',
+                    fontSize: 11,
+                    fontWeight: 'bold',
+                    marginBottom: 6,
+                    textAlign: 'center',
+                  }}
+                >
+                  DEBUG MODE
+                </TextView>
+                <TextView
+                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                >
+                  {`Step: ${nextStep}`}
+                </TextView>
+                <TextView
+                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                >
+                  {`Status: ${status}`}
+                </TextView>
+                <TextView
+                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                >
+                  {`Doc Type: ${detectedDocumentType}`}
+                </TextView>
+                <TextView
+                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                >
+                  {`Brightness: ${isBrightnessLow ? '⚠️ LOW' : '✓'}`}
+                </TextView>
+                <TextView
+                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                >
+                  {`Blur: ${isFrameBlurry ? '⚠️' : '✓'}`}
+                </TextView>
+                <TextView
+                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                >
+                  {`Flash: ${isTorchOn ? '🔦' : '○'}`}
+                </TextView>
+                <TextView style={{ color: '#88D8B0', fontSize: 9 }}>
+                  {`Face Detection: ${faceDetectionEnabled ? '✓' : '✗'}`}
+                </TextView>
+              </View>
+            </SafeAreaView>
+          )}
+          {testMode && testModeData && (
+            <SafeAreaView
+              style={{
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                maxHeight: '40%',
+                backgroundColor: 'rgba(0, 0, 0, 0.95)',
+                borderTopWidth: 2,
+                borderTopColor: '#FFA500',
+              }}
+            >
+              <ScrollView style={{ flex: 1 }}>
+                <View style={{ padding: 10 }}>
                   <TextView
-                    style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                    style={{
+                      color: '#FFA500',
+                      fontSize: 12,
+                      fontWeight: 'bold',
+                      marginBottom: 8,
+                      textAlign: 'center',
+                    }}
                   >
-                    {`2nd Face: ${currentSecondaryFaceImage ? '✓' : '✗'}`}
+                    MRZ Text Read
                   </TextView>
+
                   <TextView
-                    style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                    style={{
+                      color: '#FFFFFF',
+                      fontSize: 9,
+                      fontFamily: 'monospace',
+                      lineHeight: 16,
+                    }}
                   >
-                    {`Hologram: ${hologramImageCount}/${HOLOGRAM_IMAGE_COUNT}`}
+                    {testModeData.mrzText
+                      .split('\n')
+                      .map(
+                        (line, i) =>
+                          `Line ${i + 1}: ${line} (${line.length} chars)`
+                      )
+                      .join('\n')}
                   </TextView>
-                </>
-              )}
-              <TextView
-                style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-              >
-                {`Brightness: ${isBrightnessLow ? '⚠️ LOW' : '✓'}`}
-              </TextView>
-              <TextView
-                style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-              >
-                {`Blur: ${isFrameBlurry ? '⚠️' : '✓'}`}
-              </TextView>
-              <TextView
-                style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-              >
-                {`Flash: ${isTorchOn ? '🔦' : '○'}`}
-              </TextView>
-              <TextView style={{ color: '#88D8B0', fontSize: 9 }}>
-                {`Face Detection: ${faceDetectionEnabled ? '✓' : '✗'}`}
-              </TextView>
-            </View>
+                </View>
+              </ScrollView>
+            </SafeAreaView>
           )}
         </>
       )}
@@ -3644,7 +3736,7 @@ const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     gap: 10,
-    justifyContent: 'flex-start',
+    justifyContent: 'center',
     flexWrap: 'wrap',
   },
   cardDetectionRow: {
@@ -3684,16 +3776,6 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     alignItems: 'center',
   },
-  debugInfoContainer: {
-    flex: 1,
-    paddingLeft: 10,
-  },
-  debugInfoText: {
-    color: 'white',
-    fontSize: 8,
-    fontWeight: 'bold',
-    marginBottom: 2,
-  },
   guide: {
     flex: 1,
     display: 'flex',

package/src/Shared/Components/QrCodeScannerCamera.tsx

@@ -61,13 +61,6 @@ const QrCodeScannerCamera = ({
       bottom: height * (0.65 - marginBuffer),
     };
 
-    console.log(
-      `[QR Frame Check] Frame: ${width}x${height}, Scanning: left=${scanningFrame.left}, top=${scanningFrame.top}, right=${scanningFrame.right}, bottom=${scanningFrame.bottom}`
-    );
-    console.log(
-      `[QR Frame Check] Code bbox: left=${boundingBox.left}, top=${boundingBox.top}, right=${boundingBox.right}, bottom=${boundingBox.bottom}`
-    );
-
     // Check if entire bounding box is within scanning frame (with margin buffer)
     const isInFrame =
       boundingBox.left >= scanningFrame.left &&
@@ -75,8 +68,6 @@ const QrCodeScannerCamera = ({
       boundingBox.right <= scanningFrame.right &&
       boundingBox.bottom <= scanningFrame.bottom;
 
-    console.log(`[QR Frame Check] Is in frame: ${isInFrame}`);
-
     return isInFrame;
   };
 

package/src/Shared/Components/TrustchexCamera.tsx

@@ -63,7 +63,6 @@ export interface Frame {
   textBlocks?: NativeTextBlock[];
   resultText?: string;
   barcodes?: NativeBarcode[];
-  mrzResult?: NativeMRZResult;
 }
 
 export interface NativeFace {
@@ -97,24 +96,6 @@ export interface NativeBarcode {
   cornerPoints?: Array<{ x: number; y: number }>;
 }
 
-export interface NativeMRZResult {
-  valid: boolean;
-  format: string;
-  error?: string;
-  documentCode?: string;
-  issuingState?: string;
-  documentNumber?: string;
-  lastName?: string;
-  firstName?: string;
-  birthDate?: string;
-  sex?: string;
-  expirationDate?: string;
-  nationality?: string;
-  optional1?: string;
-  optional2?: string;
-  rawLines?: string;
-}
-
 interface TrustchexCameraProps {
   style?: StyleProp<ViewStyle>;
   cameraType?: 'front' | 'back';
@@ -125,7 +106,6 @@ interface TrustchexCameraProps {
   enableFaceDetection?: boolean;
   enableTextRecognition?: boolean;
   enableBarcodeScanning?: boolean;
-  enableMrzValidation?: boolean;
   includeBase64?: boolean;
   onFrameAvailable?: (event: NativeSyntheticEvent<{ frame: Frame }>) => void;
   onCameraReady?: (