@test-web/react-native-sdk 2.2.0 → 2.4.0

package/src/styles/ScannerStyles.ts

@@ -8,21 +8,58 @@ export default (theme: Theme, orientation: Orientation) => {
   return StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: '#000',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background,
+      position: 'relative',
+    },
+    topLabel: {
+      position: 'absolute',
+      top: isPortrait ? 80 : 20,
+      fontSize: 18,
+      fontWeight: '700',
+      width: '100%',
+      textAlign: 'center',
+      zIndex: 5,
+      color: '#fff',
+    },
+    bottomLabel: {
+      position: 'absolute',
+      bottom: isPortrait ? 140 : 20,
+      fontSize: 16,
+      width: '100%',
+      textAlign: 'center',
+      zIndex: 5,
+      color: '#fff',
     },
     camera: {
       flex: 1,
     },
-    topLabel: {
+    overlay: {
       position: 'absolute',
-      top: isPortrait ? 60 : 30,
-      alignSelf: 'center',
-      color: '#fff',
-      fontSize: 18,
-      fontWeight: 'bold',
-      zIndex: 10,
+      width: '100%',
+      height: '50%',
+      top: '20%',
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    captureButton: {
+      position: 'absolute',
+      bottom: isPortrait ? 50 : 20,
+      left: '50%',
+      marginLeft: -35,
+      width: 70,
+      height: 70,
+      backgroundColor: 'white',
+      borderRadius: 35,
+      borderWidth: 4,
+      borderColor: '#ccc',
+    },
+    text: {
+      color: theme.colors.text,
+      fontSize: 16,
       textAlign: 'center',
-      paddingHorizontal: 20,
+      marginBottom: 20,
     },
   });
 };

package/src/styles/ThankYouStyles.ts

@@ -2,30 +2,27 @@ import { StyleSheet } from 'react-native';
 import { Theme } from '../types';
 import { Orientation } from '../hooks/useOrientation';
 
-export default (theme: Theme, orientation: Orientation) => {
-  const isPortrait = orientation === 'portrait';
-
-  return StyleSheet.create({
+export default (theme: Theme, orientation: Orientation) =>
+  StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: theme.colors.background,
       alignItems: 'center',
-      justifyContent: 'center',
       paddingHorizontal: 20,
+      paddingTop: 0,
+      justifyContent: 'center',
     },
     maintitle: {
       textAlign: 'center',
-      fontWeight: 'bold',
-      marginBottom: 20,
+      fontWeight: '700',
+      marginBottom: 0,
       color: theme.colors.text,
-      fontSize: 32,
     },
     subtitle: {
-      textAlign: 'center',
       fontWeight: '300',
-      color: theme.colors.subtitle,
       fontSize: 20,
+      color: theme.colors.subtitle,
+      textAlign: 'center',
       lineHeight: 30,
     },
   });
-};

package/src/types/index.ts

@@ -7,6 +7,14 @@ export interface Theme {
     buttonBackground: string;
     buttonText: string;
   };
+  fonts: {
+    regular: string;
+    bold: string;
+  };
+  button: {
+    borderRadius: number;
+    padding: number;
+  };
 }
 
 export * from './IDMConf';

package/src/utils/MRZ_README.md

@@ -0,0 +1,111 @@
+# MRZ Scanner
+
+## Overview
+
+MRZ (Machine Readable Zone) scanner implementation based on demo-testing-sdk.
+
+Extracts **all text** from identity documents including:
+- All visible text on the card (address, labels, personal info, etc.)
+- MRZ lines (machine-readable zone at the bottom)
+- Everything concatenated into a single normalized string
+
+## Implementation
+
+Based on `demo-testing-sdk/src/pages/MrzCapture.tsx` with the following approach:
+
+1. **Camera Setup**: Uses react-native-vision-camera
+2. **Text Recognition**: Uses @react-native-ml-kit/text-recognition
+3. **Normalization**: Cleans OCR errors (O→0, I→1, S→5, etc.)
+4. **Extraction**: Filters MRZ lines (28-46 characters)
+5. **Full Text**: Concatenates all text from the card
+6. **API Call**: Sends to `/ocr/mrz/text` endpoint
+
+## Supported Document Types
+
+### TD1 - ID Card Size
+- **Format:** 3 lines × 30 characters = 90 total
+- **Examples:** National ID cards, Residence permits
+- **Works with:** Any country
+
+### TD2 - Intermediate Size
+- **Format:** 2 lines × 36 characters = 72 total
+- **Examples:** Some travel documents
+- **Works with:** Any country
+
+### TD3 - Passport Size
+- **Format:** 2 lines × 44 characters = 88 total
+- **Examples:** Passports, Passport cards
+- **Works with:** Any country
+
+## Code Flow
+
+```typescript
+// 1. Take photo
+const photo = await cameraRef.current.takePhoto();
+
+// 2. Extract text using ML Kit
+const result = await TextRecognition.recognize(imagePath);
+
+// 3. Normalize all text lines
+const allLines = result.blocks
+  .flatMap(block => block.lines)
+  .map(line => normalizeMrz(line.text));
+
+// 4. Filter MRZ lines
+const mrzLines = allLines.filter(text => 
+  /^[A-Z0-9<]{28,46}$/.test(text)
+);
+
+// 5. Concatenate all text
+const fullCardText = allLines.join('');
+
+// 6. Send to API
+await captureMRZ(idmConf, {
+  code: fullCardText,
+  token: verificationToken,
+  engine: 'idmerit',
+});
+```
+
+## API Request
+
+```typescript
+// Endpoint: POST /ocr/mrz/text
+// Content-Type: multipart/form-data
+
+const formData = new FormData();
+formData.append('token', requestData.token);
+formData.append('code', requestData.code);  // Full card text
+formData.append('engine', requestData.engine);
+```
+
+## Normalization Rules
+
+| OCR Reads | Corrected To | Reason |
+|-----------|--------------|--------|
+| `O` | `0` | Letter O → Zero |
+| `I` | `1` | Letter I → One |
+| `S` | `5` | Letter S → Five |
+| `«` or `»` | `<` | Angle quotes → Less than |
+| Spaces | (removed) | Clean formatting |
+
+## Auto-Scanning
+
+The scanner automatically:
+- Takes photos every 1 second
+- Processes text recognition
+- Retries if MRZ not detected
+- Stops when valid MRZ is found
+
+## Files
+
+- `src/screens/MrzCapture.tsx` - Main scanner component
+- `src/utils/mrzUtils.ts` - MRZ utilities
+- `src/utils/mrzParser.ts` - Advanced MRZ parsing (optional)
+- `src/apis/captureMRZ.ts` - API integration
+
+## Reference
+
+Implementation based on:
+- `demo-testing-sdk/src/pages/MrzCapture.tsx`
+- `demo-testing-sdk/src/apis/captureMRZ.ts`

package/src/utils/imagesHelper.ts

@@ -0,0 +1,264 @@
+// utils/imagesHelper.ts
+
+// ✅ Static image imports (Metro-safe)
+const IMAGES = {
+  // Card type images
+  'driver-license.png': require('../../assets/images/driver-license.png'),
+  'national-id.png': require('../../assets/images/national-id.png'),
+  'permit-card.png': require('../../assets/images/permit-card.png'),
+  'passport.png': require('../../assets/images/passport.png'),
+  'passport-card.png': require('../../assets/images/passport-card.png'),
+  'greencard.png': require('../../assets/images/greencard.png'),
+  'health-card.png': require('../../assets/images/health-card.png'),
+
+  // Generic scan icons
+  'card-scan-icon.jpg': require('../../assets/images/card-scan-icon.jpg'),
+  'card-scan-icon-dl.png': require('../../assets/images/card-scan-icon-dl.png'),
+  'card-scan-icon-ni.png': require('../../assets/images/card-scan-icon-ni.png'),
+  'card-scan-icon-pr.png': require('../../assets/images/card-scan-icon-pr.png'),
+  'card-scan-icon-aadhaar.png': require('../../assets/images/card-scan-icon-aadhaar.png'),
+  'card-scan-icon-aadhaar-back.png': require('../../assets/images/card-scan-icon-aadhaar-back.png'),
+  'card-scan-icon-pan.png': require('../../assets/images/card-scan-icon-pan.png'),
+  'card-scan-icon-passport.png': require('../../assets/images/card-scan-icon-passport.png'),
+  'card-scan-icon-greencard.jpg': require('../../assets/images/card-scan-icon-greencard.jpg'),
+  'card-scan-icon-passport-card.jpg': require('../../assets/images/card-scan-icon-passport-card.jpg'),
+  'card-scan-icon-hc.png': require('../../assets/images/card-scan-icon-hc.png'),
+  'card-scan-icon-default-back.png': require('../../assets/images/card-scan-icon-default-back.png'),
+  'card-scan-icon-can-pr.png': require('../../assets/images/card-scan-icon-can-pr.png'),
+
+  // NI country-specific front
+  'card-scan-icon-ni-brazil.jpg': require('../../assets/images/card-scan-icon-ni-brazil.jpg'),
+  'card-scan-icon-ni-argentina.jpg': require('../../assets/images/card-scan-icon-ni-argentina.jpg'),
+  'card-scan-icon-ni-germany.jpg': require('../../assets/images/card-scan-icon-ni-germany.jpg'),
+  'card-scan-icon-ni-dominican-republic-front.png': require('../../assets/images/card-scan-icon-ni-dominican-republic-front.png'),
+  'card-scan-icon-ni-paraguay-front.png': require('../../assets/images/card-scan-icon-ni-paraguay-front.png'),
+  'card-scan-icon-ni-ukrain-front.png': require('../../assets/images/card-scan-icon-ni-ukrain-front.png'),
+  'card-scan-icon-ni-france-front.png': require('../../assets/images/card-scan-icon-ni-france-front.png'),
+  'card-scan-icon-ni-uae-front.png': require('../../assets/images/card-scan-icon-ni-uae-front.png'),
+  'card-scan-icon-ni-uganda-front.png': require('../../assets/images/card-scan-icon-ni-uganda-front.png'),
+
+  // NI country-specific back
+  'card-scan-icon-ni-brazil-back.jpg': require('../../assets/images/card-scan-icon-ni-brazil-back.jpg'),
+  'card-scan-icon-ni-argentina-back.jpg': require('../../assets/images/card-scan-icon-ni-argentina-back.jpg'),
+  'card-scan-icon-ni-dominican-republic-back.png': require('../../assets/images/card-scan-icon-ni-dominican-republic-back.png'),
+  'card-scan-icon-ni-paraguay-back.png': require('../../assets/images/card-scan-icon-ni-paraguay-back.png'),
+  'card-scan-icon-ni-ukrain-back.png': require('../../assets/images/card-scan-icon-ni-ukrain-back.png'),
+  'card-scan-icon-ni-france-back.png': require('../../assets/images/card-scan-icon-ni-france-back.png'),
+  'card-scan-icon-ni-uae-back.png': require('../../assets/images/card-scan-icon-ni-uae-back.png'),
+
+  // MRZ icons
+  'mrz.png': require('../../assets/images/mrz.png'),
+  'mrz-back.png': require('../../assets/images/mrz-back.png'),
+  'mrz-ni.png': require('../../assets/images/mrz-ni.png'),
+  'card-scan-icon-greencard-back.jpg': require('../../assets/images/card-scan-icon-greencard-back.jpg'),
+  'card-scan-icon-passport-card-back.jpg': require('../../assets/images/card-scan-icon-passport-card-back.jpg'),
+  'card-scan-icon-ni-germany-back.jpg': require('../../assets/images/card-scan-icon-ni-germany-back.jpg'),
+  'card-scan-icon-ni-dominican-republic-mrz.png': require('../../assets/images/card-scan-icon-ni-dominican-republic-mrz.png'),
+  'card-scan-icon-ni-paraguay-scan-mrz.png': require('../../assets/images/card-scan-icon-ni-paraguay-scan-mrz.png'),
+  'card-scan-icon-ni-ukrain-scan-mrz.png': require('../../assets/images/card-scan-icon-ni-ukrain-scan-mrz.png'),
+  'card-scan-icon-ni-france-scan-mrz.png': require('../../assets/images/card-scan-icon-ni-france-scan-mrz.png'),
+  'card-scan-icon-ni-uae-scan-mrz.png': require('../../assets/images/card-scan-icon-ni-uae-scan-mrz.png'),
+  'card-scan-icon-ni-uganda-scan-mrz.png': require('../../assets/images/card-scan-icon-ni-uganda-scan-mrz.png'),
+};
+
+/**
+ * Get card type illustration (static image)
+ */
+export function getCardTypeImage(type: string) {
+  if (!type) return null;
+
+  let file = null;
+  switch (type) {
+    case 'DL':
+      file = 'driver-license.png';
+      break;
+    case 'NI':
+      file = 'national-id.png';
+      break;
+    case 'PR':
+      file = 'permit-card.png';
+      break;
+    case 'AADHAAR':
+      file = 'national-id.png';
+      break;
+    case 'PAN':
+      file = 'permit-card.png';
+      break;
+    case 'PP':
+      file = 'passport.png';
+      break;
+    case 'PPC':
+    case 'PPI':
+    case 'VC':
+      file = 'passport-card.png';
+      break;
+    case 'GREEN_CARD':
+      file = 'greencard.png';
+      break;
+    case 'HC':
+      file = 'health-card.png';
+      break;
+  }
+  return file ? IMAGES[file] : null;
+}
+
+/**
+ * Get front scan image
+ */
+export function getCardScanImage(type: string, countryCode: string) {
+  if (!type) return null;
+
+  let file = null;
+
+  if (type === 'DL') file = 'card-scan-icon-dl.png';
+  else if (type === 'NI') {
+    switch (countryCode) {
+      case 'BRA':
+        file = 'card-scan-icon-ni-brazil.jpg';
+        break;
+      case 'ARG':
+        file = 'card-scan-icon-ni-argentina.jpg';
+        break;
+      case 'DEU':
+        file = 'card-scan-icon-ni-germany.jpg';
+        break;
+      case 'DOM':
+        file = 'card-scan-icon-ni-dominican-republic-front.png';
+        break;
+      case 'PRY':
+        file = 'card-scan-icon-ni-paraguay-front.png';
+        break;
+      case 'UKR':
+        file = 'card-scan-icon-ni-ukrain-front.png';
+        break;
+      case 'FRA':
+        file = 'card-scan-icon-ni-france-front.png';
+        break;
+      case 'ARE':
+        file = 'card-scan-icon-ni-uae-front.png';
+        break;
+      case 'UGA':
+        file = 'card-scan-icon-ni-uganda-front.png';
+        break;
+      default:
+        file = 'card-scan-icon-ni.png';
+    }
+  } else {
+    switch (type) {
+      case 'PR':
+        file = 'card-scan-icon-pr.png';
+        break;
+      case 'AADHAAR':
+        file = 'card-scan-icon-aadhaar.png';
+        break;
+      case 'PAN':
+        file = 'card-scan-icon-pan.png';
+        break;
+      case 'PP':
+        file = 'card-scan-icon-passport.png';
+        break;
+      case 'GREEN_CARD':
+        file = 'card-scan-icon-greencard.jpg';
+        break;
+      case 'PPC':
+        file = 'card-scan-icon-passport-card.jpg';
+        break;
+      case 'HC':
+        if (countryCode === 'CAN') file = 'card-scan-icon-hc.png';
+        break;
+    }
+  }
+
+  return file ? IMAGES[file] : IMAGES['card-scan-icon.jpg'];
+}
+
+/**
+ * Get back scan image
+ */
+export function getCardScanImageBack(type: string, countryCode: string) {
+  if (!type) return null;
+
+  let file = null;
+
+  if (type === 'NI') {
+    switch (countryCode) {
+      case 'BRA':
+        file = 'card-scan-icon-ni-brazil-back.jpg';
+        break;
+      case 'ARG':
+        file = 'card-scan-icon-ni-argentina-back.jpg';
+        break;
+      case 'DOM':
+        file = 'card-scan-icon-ni-dominican-republic-back.png';
+        break;
+      case 'PRY':
+        file = 'card-scan-icon-ni-paraguay-back.png';
+        break;
+      case 'UKR':
+        file = 'card-scan-icon-ni-ukrain-back.png';
+        break;
+      case 'FRA':
+        file = 'card-scan-icon-ni-france-back.png';
+        break;
+      case 'ARE':
+        file = 'card-scan-icon-ni-uae-back.png';
+        break;
+      default:
+        file = 'card-scan-icon-default-back.png';
+    }
+  } else if (type === 'AADHAAR') {
+    file = 'card-scan-icon-aadhaar-back.png';
+  } else if (type === 'RESIDENCE_PERMIT' && countryCode === 'CAN') {
+    file = 'card-scan-icon-can-pr.png';
+  }
+
+  return file ? IMAGES[file] : IMAGES['card-scan-icon-default-back.png'];
+}
+
+/**
+ * Get MRZ image based on documentType, countryCode, and barcodeType
+ */
+export function getMRZImage(documentType: string, countryCode: string, barcodeType: string) {
+  if (barcodeType === 'td3b') {
+    if (documentType === 'GREEN_CARD') {
+      return IMAGES['card-scan-icon-greencard-back.jpg'];
+    }
+    if (documentType === 'PPC') {
+      return IMAGES['card-scan-icon-passport-card-back.jpg'];
+    }
+    return IMAGES['mrz-back.png'];
+  }
+
+  // Other barcode types
+  if (documentType === 'GREEN_CARD') {
+    return IMAGES['card-scan-icon-greencard-back.jpg'];
+  }
+  if (documentType === 'PPC') {
+    return IMAGES['card-scan-icon-passport-card-back.jpg'];
+  }
+  if (documentType === 'NI') {
+    switch (countryCode) {
+      case 'DEU':
+        return IMAGES['card-scan-icon-ni-germany-back.jpg'];
+      case 'DOM':
+        return IMAGES['card-scan-icon-ni-dominican-republic-mrz.png'];
+      case 'PRY':
+        return IMAGES['card-scan-icon-ni-paraguay-scan-mrz.png'];
+      case 'UKR':
+        return IMAGES['card-scan-icon-ni-ukrain-scan-mrz.png'];
+      case 'FRA':
+        return IMAGES['card-scan-icon-ni-france-scan-mrz.png'];
+      case 'ARE':
+        return IMAGES['card-scan-icon-ni-uae-scan-mrz.png'];
+      case 'UGA':
+        return IMAGES['card-scan-icon-ni-uganda-scan-mrz.png'];
+      default:
+        return IMAGES['mrz-ni.png'];
+    }
+  }
+  if (documentType === 'RPC' && countryCode === 'CAN') {
+    return IMAGES['card-scan-icon-can-pr.png'];
+  }
+
+  return IMAGES['mrz.png'];
+}