@trustchex/react-native-sdk 1.464.0 → 1.475.0

package/src/Shared/Components/EIDScanner.tsx

@@ -3,6 +3,8 @@ import { Alert, View, Text, Image, StyleSheet, Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import NFCManager from 'react-native-nfc-manager';
 import DeviceInfo from 'react-native-device-info';
+import PermissionManager from '../Libs/permissions.utils';
+import { debugError } from '../Libs/debug.utils';
 import { MRZInfo } from '../EIDReader/lds/icao/mrzInfo';
 import { eidReader } from '../EIDReader/eidReader';
 import NativeProgressBar from './NativeProgressBar';
@@ -142,6 +144,21 @@ const EIDScanner = ({
     setProgressStage('');
     resetLastMessage();
 
+    // Check NFC permissions before attempting to scan
+    const hasNFCPermission = await PermissionManager.requestPermission('nfc');
+    if (!hasNFCPermission) {
+      debugError('EIDScanner', 'NFC permission denied');
+      setIsScanning(false);
+      Alert.alert(
+        t('eidScannerScreen.error'),
+        t(
+          'eidScannerScreen.nfcPermissionDenied',
+          'NFC permission is required to scan your document'
+        )
+      );
+      return;
+    }
+
     // Track EID scan start using analytics helper
     const docType =
       (documentType as 'ID' | 'PASSPORT' | 'UNKNOWN') || 'UNKNOWN';
@@ -473,116 +490,124 @@ const EIDScanner = ({
         </View>
       ) : (
         <>
-          {isScanned && (
-            <View style={styles.resultCard}>
-              <View style={styles.resultHeader}>
-                {documentFaceImage &&
-                (documentFaceImageMimeType === 'image/jpeg' ||
-                  documentFaceImageMimeType === 'image/png') ? (
-                  <Image
-                    source={{
-                      uri: `data:${documentFaceImageMimeType};base64,${documentFaceImage}`,
-                    }}
-                    style={styles.faceImage}
-                    resizeMode="cover"
-                  />
-                ) : (
-                  <View style={styles.faceImagePlaceholder}>
-                    <Text style={styles.faceImagePlaceholderText}>?</Text>
+          {isScanned && documentMRZInfo && (
+            <View style={styles.idCardWrapper}>
+              <View style={styles.idCard}>
+                {/* ── Card header strip: doc type + issuing state ── */}
+                <View
+                  style={[
+                    styles.idCardStrip,
+                    { backgroundColor: appContext.branding.primaryColor },
+                  ]}
+                >
+                  <Text style={styles.idCardStripDocType}>
+                    {formatDocumentType(documentMRZInfo.getDocumentCode())}
+                  </Text>
+                </View>
+
+                {/* ── Photo (left) + fields (right) ── */}
+                <View style={styles.idCardBody}>
+                  <View style={styles.idCardPhotoContainer}>
+                    <View style={styles.idCardPhotoFrame}>
+                      {documentFaceImage &&
+                      (documentFaceImageMimeType === 'image/jpeg' ||
+                        documentFaceImageMimeType === 'image/png') ? (
+                        <Image
+                          source={{
+                            uri: `data:${documentFaceImageMimeType};base64,${documentFaceImage}`,
+                          }}
+                          style={styles.idCardPhoto}
+                          resizeMode="cover"
+                        />
+                      ) : (
+                        <View style={styles.idCardPhotoPlaceholder}>
+                          <Text style={styles.idCardPhotoPlaceholderText}>
+                            ?
+                          </Text>
+                        </View>
+                      )}
+                    </View>
                   </View>
-                )}
-                {documentMRZInfo && (
-                  <View style={styles.resultHeaderInfo}>
-                    <Text style={styles.fullName} numberOfLines={2}>
-                      {documentMRZInfo.getSecondaryIdentifier()}{' '}
-                      {documentMRZInfo.getPrimaryIdentifier()}
-                    </Text>
-                    <Text style={styles.subInfo}>
-                      {formatNationality(documentMRZInfo.getNationality())} ·{' '}
-                      {formatDocumentType(documentMRZInfo.getDocumentCode())}
-                    </Text>
-                    <Text style={styles.subInfo}>
-                      {formatGender(documentMRZInfo.getGender().getStrCode())} ·{' '}
-                      {formatDate(documentMRZInfo.getDateOfBirth())}
-                    </Text>
+
+                  {/* Right column: all fields as grid */}
+                  <View style={styles.idCardFields}>
+                    <IDCardField
+                      label={t('eidScannerScreen.surname')}
+                      value={documentMRZInfo.getPrimaryIdentifier()}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.name')}
+                      value={documentMRZInfo.getSecondaryIdentifier()}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.documentNumber')}
+                      value={documentMRZInfo.getDocumentNumber()}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.birthDate')}
+                      value={formatDate(documentMRZInfo.getDateOfBirth())}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.expirationDate')}
+                      value={formatDate(documentMRZInfo.getDateOfExpiry())}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.gender')}
+                      value={formatGender(
+                        documentMRZInfo.getGender().getStrCode()
+                      )}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.nationality')}
+                      value={formatNationality(
+                        documentMRZInfo.getNationality()
+                      )}
+                    />
+                    <IDCardField
+                      label={t('eidScannerScreen.issuingState')}
+                      value={formatNationality(
+                        documentMRZInfo.getIssuingState()
+                      )}
+                    />
+                    {!!(
+                      documentMRZInfo.getPersonalNumber() ||
+                      documentMRZInfo.getOptionalData1()
+                    ) && (
+                      <IDCardField
+                        label={t('eidScannerScreen.personalNumber')}
+                        value={
+                          documentMRZInfo.getPersonalNumber() ||
+                          documentMRZInfo.getOptionalData1() ||
+                          ''
+                        }
+                      />
+                    )}
                   </View>
-                )}
+                </View>
               </View>
 
-              {documentMRZInfo && (
-                <View style={styles.mrzInfo}>
-                  <View style={styles.mrzInfoItem}>
-                    <Text style={styles.mrzInfoLabel}>
-                      {t('eidScannerScreen.name')}
-                    </Text>
-                    <Text style={styles.mrzInfoText}>
-                      {documentMRZInfo.getSecondaryIdentifier()}
-                    </Text>
-                  </View>
-                  <View style={styles.mrzInfoItem}>
-                    <Text style={styles.mrzInfoLabel}>
-                      {t('eidScannerScreen.surname')}
-                    </Text>
-                    <Text style={styles.mrzInfoText}>
-                      {documentMRZInfo.getPrimaryIdentifier()}
-                    </Text>
-                  </View>
-                  <View style={styles.mrzInfoItem}>
-                    <Text style={styles.mrzInfoLabel}>
-                      {t('eidScannerScreen.documentCode')}
-                    </Text>
-                    <Text style={styles.mrzInfoText}>
-                      {formatDocumentType(documentMRZInfo.getDocumentCode())}
-                    </Text>
-                  </View>
-                  <View style={styles.mrzInfoItem}>
-                    <Text style={styles.mrzInfoLabel}>
-                      {t('eidScannerScreen.documentNumber')}
-                    </Text>
-                    <Text style={styles.mrzInfoText}>
-                      {documentMRZInfo.getDocumentNumber()}
-                    </Text>
-                  </View>
-                  <View style={styles.mrzInfoItem}>
-                    <Text style={styles.mrzInfoLabel}>
-                      {t('eidScannerScreen.personalNumber')}
-                    </Text>
-                    <Text style={styles.mrzInfoText}>
-                      {documentMRZInfo.getOptionalData1()}
-                    </Text>
-                  </View>
-                  <View style={styles.mrzInfoItem}>
-                    <Text style={styles.mrzInfoLabel}>
-                      {t('eidScannerScreen.nationality')}
-                    </Text>
-                    <Text style={styles.mrzInfoText}>
-                      {formatNationality(documentMRZInfo.getNationality())}
-                    </Text>
-                  </View>
-                  <View style={styles.mrzInfoItem}>
-                    <Text style={styles.mrzInfoLabel}>
-                      {t('eidScannerScreen.gender')}
-                    </Text>
-                    <Text style={styles.mrzInfoText}>
-                      {formatGender(documentMRZInfo.getGender().getStrCode())}
-                    </Text>
-                  </View>
-                  <View style={styles.mrzInfoItem}>
-                    <Text style={styles.mrzInfoLabel}>
-                      {t('eidScannerScreen.birthDate')}
-                    </Text>
-                    <Text style={styles.mrzInfoText}>
-                      {formatDate(documentMRZInfo.getDateOfBirth())}
-                    </Text>
-                  </View>
-                  <View style={styles.mrzInfoItem}>
-                    <Text style={styles.mrzInfoLabel}>
-                      {t('eidScannerScreen.expirationDate')}
-                    </Text>
-                    <Text style={styles.mrzInfoText}>
-                      {formatDate(documentMRZInfo.getDateOfExpiry())}
-                    </Text>
-                  </View>
+              {hasNfc && isEnabled && isScanned && (
+                <View style={styles.buttonsContainer}>
+                  <StyledButton
+                    mode="contained"
+                    disabled={!documentFaceImage || !documentMRZInfo}
+                    onPress={() => {
+                      if (
+                        onScanSuccess &&
+                        documentMRZInfo &&
+                        documentFaceImage &&
+                        documentFaceImageMimeType
+                      ) {
+                        onScanSuccess(
+                          getFieldsFromMRZ(documentMRZInfo),
+                          documentFaceImage,
+                          documentFaceImageMimeType
+                        );
+                      }
+                    }}
+                  >
+                    {t('eidScannerScreen.approveAndContinue')}
+                  </StyledButton>
                 </View>
               )}
             </View>
@@ -648,7 +673,7 @@ const EIDScanner = ({
             </View>
           )}
 
-          {hasNfc && isEnabled && isScanned && (
+          {hasNfc && isEnabled && isScanned && !documentMRZInfo && (
             <View style={styles.buttonsContainer}>
               <StyledButton
                 mode="contained"
@@ -747,83 +772,99 @@ const styles = StyleSheet.create({
     color: 'black',
     textAlign: 'center',
   },
-  resultCard: {
+  // ── ID Card result layout ──────────────────────────────────────────────
+  idCardWrapper: {
+    gap: 10,
+  },
+  idCard: {
     backgroundColor: '#fff',
-    borderRadius: 16,
-    padding: 16,
-    gap: 16,
+    borderRadius: 14,
+    overflow: 'hidden',
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.08,
-    shadowRadius: 8,
-    elevation: 3,
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.12,
+    shadowRadius: 10,
+    elevation: 4,
     borderWidth: 1,
-    borderColor: '#f0f0f0',
+    borderColor: '#e8e8e8',
   },
-  resultHeader: {
+  idCardStrip: {
     flexDirection: 'row',
-    gap: 14,
-    alignItems: 'flex-start',
-  },
-  resultHeaderInfo: {
-    flex: 1,
-    gap: 4,
-    justifyContent: 'center',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
   },
-  fullName: {
-    fontSize: 17,
+  idCardStripDocType: {
+    color: '#fff',
+    fontSize: 12,
     fontWeight: '700',
-    color: '#111',
-    letterSpacing: 0.2,
+    letterSpacing: 0.5,
+    textTransform: 'uppercase',
   },
-  subInfo: {
-    fontSize: 13,
-    color: '#666',
-    fontWeight: '500',
+  idCardStripIssuer: {
+    color: 'rgba(255,255,255,0.85)',
+    fontSize: 12,
+    fontWeight: '600',
+    letterSpacing: 0.3,
+  },
+  idCardBody: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
   },
-  faceImage: {
-    width: 90,
-    height: 115,
+  idCardPhotoContainer: {
+    width: 110,
+    padding: 8,
+    alignSelf: 'stretch',
+  },
+  idCardPhotoFrame: {
+    flex: 1,
     borderRadius: 10,
     overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.12)',
   },
-  faceImagePlaceholder: {
-    width: 90,
-    height: 115,
+  idCardPhoto: {
+    flex: 1,
+  },
+  idCardPhotoPlaceholder: {
+    flex: 1,
     borderRadius: 10,
     backgroundColor: '#f5f5f5',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  faceImagePlaceholderText: {
-    fontSize: 32,
+  idCardPhotoPlaceholderText: {
+    fontSize: 30,
     color: '#ccc',
   },
-  mrzInfo: {
-    flexDirection: 'column',
-    width: '100%',
-    gap: 2,
-  },
-  mrzInfoItem: {
+  idCardFields: {
+    flex: 1,
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: 8,
-    borderBottomColor: '#f0f0f0',
-    borderBottomWidth: 1,
+    flexWrap: 'wrap',
+    gap: 6,
+    alignContent: 'flex-start',
+    padding: 10,
   },
-  mrzInfoLabel: {
-    color: '#888',
-    fontSize: 13,
-    fontWeight: '500',
+  idCardFieldItem: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '45%',
+    minWidth: 0,
   },
-  mrzInfoText: {
-    color: '#111',
-    fontSize: 13,
+  idCardFieldLabel: {
+    fontSize: 8,
+    fontWeight: '600',
+    color: '#999',
+    letterSpacing: 0.3,
+    marginBottom: 1,
+  },
+  idCardFieldValue: {
+    fontSize: 11,
     fontWeight: '600',
-    textAlign: 'right',
+    color: '#111',
     flexShrink: 1,
-    marginLeft: 8,
+    flexWrap: 'wrap',
   },
   guide: {
     flex: 1,
@@ -855,4 +896,13 @@ const styles = StyleSheet.create({
   },
 });
 
+const IDCardField = ({ label, value }: { label: string; value: string }) => (
+  <View style={styles.idCardFieldItem}>
+    <Text style={styles.idCardFieldLabel} numberOfLines={1}>
+      {label}
+    </Text>
+    <Text style={styles.idCardFieldValue}>{value || '—'}</Text>
+  </View>
+);
+
 export default EIDScanner;

package/src/Shared/Components/FaceCamera.tsx

@@ -1,16 +1,15 @@
 import { useIsFocused } from '@react-navigation/native';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
 import { debugLog, debugWarn, debugError, logError } from '../Libs/debug.utils';
+import PermissionManager from '../Libs/permissions.utils';
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import {
   StyleSheet,
   Text,
   View,
-  Platform,
   Linking,
   ActivityIndicator,
   NativeModules,
-  PermissionsAndroid,
   type NativeSyntheticEvent,
 } from 'react-native';
 import {
@@ -81,20 +80,24 @@ const FaceCamera = ({
 
   useEffect(() => {
     const requestPermissions = async () => {
-      if (Platform.OS === 'android') {
-        const cameraGranted = await PermissionsAndroid.request(
-          PermissionsAndroid.PERMISSIONS.CAMERA
-        );
-        const audioGranted = await PermissionsAndroid.request(
-          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO
-        );
-        setHasPermission(
-          cameraGranted === PermissionsAndroid.RESULTS.GRANTED &&
-            audioGranted === PermissionsAndroid.RESULTS.GRANTED
-        );
-      } else {
-        // iOS permissions handled by native camera
-        setHasPermission(true);
+      try {
+        const permissions = await PermissionManager.requestPermissions([
+          'camera',
+          'microphone',
+        ]);
+
+        const hasCamera = permissions.get('camera') ?? false;
+        const hasMicrophone = permissions.get('microphone') ?? false;
+
+        debugLog('FaceCamera', 'Permissions requested:', {
+          camera: hasCamera,
+          microphone: hasMicrophone,
+        });
+
+        setHasPermission(hasCamera && hasMicrophone);
+      } catch (error) {
+        debugError('FaceCamera', 'Permission request failed:', error);
+        setHasPermission(false);
       }
       setPermissionsRequested(true);
     };

package/src/Shared/Components/IdentityDocumentCamera.tsx

@@ -21,7 +21,9 @@ import {
   type Frame,
 } from './TrustchexCamera';
 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';
@@ -143,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<
@@ -246,13 +252,12 @@ const IdentityDocumentCamera = ({
 
   useEffect(() => {
     const requestPermissions = async () => {
-      if (Platform.OS === 'android') {
-        const granted = await PermissionsAndroid.request(
-          PermissionsAndroid.PERMISSIONS.CAMERA
-        );
-        setHasPermission(granted === PermissionsAndroid.RESULTS.GRANTED);
-      } else {
-        setHasPermission(true);
+      try {
+        const hasCameraPermission =
+          await PermissionManager.requestPermission('camera');
+        setHasPermission(hasCameraPermission);
+      } catch (error) {
+        setHasPermission(false);
       }
       setPermissionsRequested(true);
     };
@@ -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