@trustchex/react-native-sdk 1.381.0 → 1.464.0

package/src/Screens/Debug/MRZTestScreen.tsx

@@ -7,22 +7,38 @@ 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 { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
+
+interface MrzOverlayBlock extends NativeTextBlock {
+  isMrz: boolean;
+}
 
 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[]>([]);
   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 });
+  }, []);
 
   const handleFrame = useCallback(
     (event: NativeSyntheticEvent<{ frame: Frame }>) => {
@@ -32,6 +48,28 @@ const MRZTestScreen = () => {
 
       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: 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([]);
+      }
+
       if (frame.resultText) {
         setRawHistory((prev) => {
           if (prev[0] === frame.resultText) {
@@ -86,18 +124,47 @@ const MRZTestScreen = () => {
         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}
-      />
+      <View style={styles.cameraWrapper} onLayout={handleCameraLayout}>
+        <TrustchexCamera
+          ref={cameraRef}
+          style={StyleSheet.absoluteFill}
+          cameraType="back"
+          enableFrameProcessing={true}
+          enableFaceDetection={false}
+          enableTextRecognition={true}
+          enableBarcodeScanning={false}
+          includeBase64={false}
+          targetFps={10}
+          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>
+          );
+        })}
+      </View>
 
       <SafeAreaView style={styles.mrzPanel} edges={['bottom']}>
         <ScrollView style={styles.scrollView}>
@@ -152,8 +219,35 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#000000',
   },
-  camera: {
+  cameraWrapper: {
     flex: 2,
+    position: 'relative',
+  },
+  boundingBox: {
+    position: 'absolute',
+    borderWidth: 1.5,
+  },
+  boundingBoxText: {
+    borderColor: 'rgba(255, 255, 255, 0.25)',
+  },
+  boundingBoxMrz: {
+    borderColor: '#FFA500',
+    borderWidth: 2,
+    backgroundColor: 'rgba(255, 165, 0, 0.07)',
+  },
+  blockLabel: {
+    position: 'absolute',
+    top: -14,
+    left: 0,
+    backgroundColor: '#FFA500',
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 2,
+  },
+  blockLabelText: {
+    color: '#000000',
+    fontSize: 8,
+    fontWeight: 'bold',
   },
   mrzPanel: {
     flex: 1,