@trustchex/react-native-sdk 1.361.0 → 1.362.0

package/src/Screens/Debug/MRZTestScreen.tsx

@@ -0,0 +1,209 @@
+import React, { useState, useRef, useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  ScrollView,
+  StatusBar,
+  TouchableOpacity,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  TrustchexCamera,
+  type TrustchexCameraHandle,
+  type Frame,
+} from '../../Shared/Components/TrustchexCamera';
+import mrzUtils from '../../Shared/Libs/mrz.utils';
+
+const MRZTestScreen = () => {
+  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[]>([]);
+  const [isPaused, setIsPaused] = useState<boolean>(false);
+
+  const handleFrame = useCallback(
+    (event: NativeSyntheticEvent<{ frame: Frame }>) => {
+      if (isPaused) {
+        return;
+      }
+
+      const frame = event.nativeEvent.frame;
+
+      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');
+          }
+        }
+
+        // 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]
+  );
+
+  return (
+    <View style={styles.container}>
+      <StatusBar
+        barStyle="light-content"
+        backgroundColor="transparent"
+        translucent
+      />
+      <TrustchexCamera
+        ref={cameraRef}
+        style={styles.camera}
+        cameraType="back"
+        enableFrameProcessing={true}
+        enableFaceDetection={false}
+        enableTextRecognition={true}
+        enableBarcodeScanning={false}
+        includeBase64={false}
+        targetFps={10}
+        onFrameAvailable={handleFrame}
+      />
+
+      <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>
+            <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>
+            <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>
+            <Text style={styles.sectionTitle}>Raw Text History</Text>
+            <Text style={styles.mrzText}>
+              {rawHistory.length > 0
+                ? rawHistory
+                    .map((text, i) => `#${i + 1}: ${text.replace(/\n/g, ' ')}`)
+                    .join('\n')
+                : 'No history'}
+            </Text>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000000',
+  },
+  camera: {
+    flex: 2,
+  },
+  mrzPanel: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.95)',
+    borderTopWidth: 2,
+    borderTopColor: '#FFA500',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  panelContent: {
+    padding: 10,
+  },
+  pauseButton: {
+    alignSelf: 'center',
+    borderWidth: 1,
+    borderColor: '#FFA500',
+    borderRadius: 4,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    marginBottom: 8,
+  },
+  pauseButtonText: {
+    color: '#FFA500',
+    fontSize: 10,
+    fontWeight: 'bold',
+  },
+  title: {
+    color: '#FFA500',
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  sectionTitle: {
+    color: '#FFA500',
+    fontSize: 10,
+    fontWeight: 'bold',
+    marginTop: 6,
+    marginBottom: 4,
+  },
+  mrzText: {
+    color: '#FFFFFF',
+    fontSize: 9,
+    fontFamily: 'monospace',
+    lineHeight: 16,
+  },
+  mrzValid: {
+    color: '#00C853',
+  },
+});
+
+export default MRZTestScreen;

package/src/Shared/Components/DebugNavigationPanel.tsx

@@ -190,6 +190,11 @@ const DebugNavigationPanel = () => {
         setupDemoSession();
       },
     },
+    {
+      screen: 'MRZTestScreen',
+      label: 'MRZ Test',
+      icon: ICONS.BUG_REPORT,
+    },
   ];
 
   const selectScreen = useCallback(

package/src/Shared/Components/EIDScanner.tsx

@@ -13,7 +13,6 @@ import StyledButton from './StyledButton';
 import LottieView from 'lottie-react-native';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
 import { speak, resetLastMessage } from '../Libs/tts.utils';
-import { isDebugEnabled } from '../Libs/debug.utils';
 import {
   trackEIDScanStart,
   trackEIDScanComplete,
@@ -618,58 +617,6 @@ const EIDScanner = ({
               </StyledButton>
             </View>
           )}
-
-          {isDebugEnabled() && (
-            <View
-              style={{
-                position: 'absolute',
-                top: insets.top + 10,
-                right: 10,
-                backgroundColor: 'rgba(0, 0, 0, 0.85)',
-                padding: 10,
-                borderRadius: 8,
-                borderWidth: 1,
-                borderColor: '#FF6B6B',
-                maxWidth: 200,
-                zIndex: 1001,
-              }}
-            >
-              <Text
-                style={{
-                  color: '#FF6B6B',
-                  fontSize: 11,
-                  fontWeight: 'bold',
-                  marginBottom: 6,
-                }}
-              >
-                🐛 DEBUG MODE
-              </Text>
-              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
-                {`NFC: ${hasNfc ? '✓' : '✗'}`}
-              </Text>
-              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
-                {`Enabled: ${isEnabled ? '✓' : '✗'}`}
-              </Text>
-              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
-                {`Scanning: ${isScanning ? '✓' : '○'}`}
-              </Text>
-              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
-                {`Scanned: ${isScanned ? '✓' : '○'}`}
-              </Text>
-              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
-                {`Progress: ${Math.round(progress)}%`}
-              </Text>
-              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
-                {`Face Image: ${documentFaceImage ? '✓' : '✗'}`}
-              </Text>
-              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
-                {`MRZ Info: ${documentMRZInfo ? '✓' : '✗'}`}
-              </Text>
-              <Text style={{ color: '#88D8B0', fontSize: 9 }}>
-                {`Doc Type: ${documentType}`}
-              </Text>
-            </View>
-          )}
         </>
       )}
     </View>