@trustchex/react-native-sdk 1.464.0 → 1.472.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustchex/react-native-sdk",
-  "version": "1.464.0",
+  "version": "1.472.0",
   "description": "Trustchex mobile app react native SDK for android or ios devices",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/Screens/Dynamic/LivenessDetectionScreen.tsx

@@ -181,7 +181,6 @@ const LivenessDetectionScreen = () => {
     },
     FINISH: { instruction: t('livenessDetectionScreen.finish') },
   });
-  const [instructionList, setInstructionList] = useState<string[]>([]);
   const [hasGuideShown, setHasGuideShown] = useState(false);
   const stoppingRecordingRef = useRef(false); // Track if we're already stopping to prevent multiple calls
 
@@ -220,7 +219,6 @@ const LivenessDetectionScreen = () => {
       .sort(() => Math.random() - 0.5);
     il.unshift('START');
     il.push('FINISH');
-    setInstructionList(il);
     setInitialState({
       brightnessLow: false,
       faceDetected: false,
@@ -598,9 +596,51 @@ const LivenessDetectionScreen = () => {
       const circleR = previewSizeInFrame / 2;
       const faceDx = faceCenterX - circleCX;
       const faceDy = faceCenterY - circleCY;
-      const previewContainsFace =
-        faceDx * faceDx + faceDy * faceDy <=
-        (circleR - faceCoreRadius) * (circleR - faceCoreRadius);
+
+      const yawAbs = Math.abs(face.yawAngle || 0);
+      const yawFactor = Math.min(1, yawAbs / TURN_ANGLE_LIMIT);
+
+      // General bound tolerance (instruction-agnostic): adapt to head pose and
+      // face box deformation so containment remains stable across all actions.
+      const faceWidthGrowth = Math.max(
+        0,
+        face.bounds.width - face.bounds.height
+      );
+
+      // On iOS, close faces tend to appear larger in-frame and lateral head
+      // turns shift center more aggressively. Apply an iOS-only proximity boost
+      // to horizontal tolerance to avoid false outside-circle resets.
+      const faceRadiusRatio = Math.min(
+        1,
+        faceCoreRadius / Math.max(1, circleR)
+      );
+      const iosProximityBoost =
+        Platform.OS === 'ios' ? Math.max(0, faceRadiusRatio - 0.5) : 0;
+
+      const baseToleranceX = previewSizeInFrame * 0.05;
+      const yawToleranceX = face.bounds.width * 0.12 * yawFactor;
+      const shapeToleranceX = faceWidthGrowth * 0.1;
+      const iosToleranceX = face.bounds.width * 0.2 * iosProximityBoost;
+      const toleranceX = Math.max(
+        0,
+        baseToleranceX + yawToleranceX + shapeToleranceX + iosToleranceX,
+        face.bounds.width * 0.05
+      );
+
+      const pitchAbs = Math.abs(face.pitchAngle || 0);
+      const pitchFactor = Math.min(1, pitchAbs / TURN_ANGLE_LIMIT);
+      const toleranceY = Math.max(
+        0,
+        previewSizeInFrame * 0.03 + face.bounds.height * 0.03 * pitchFactor,
+        face.bounds.height * 0.04
+      );
+
+      const allowedRadiusX = Math.max(1, circleR - faceCoreRadius + toleranceX);
+      const allowedRadiusY = Math.max(1, circleR - faceCoreRadius + toleranceY);
+      const normalizedDistance =
+        (faceDx * faceDx) / (allowedRadiusX * allowedRadiusX) +
+        (faceDy * faceDy) / (allowedRadiusY * allowedRadiusY);
+      const previewContainsFace = normalizedDistance <= 1;
       const multipleFacesDetected = faces.length > 1;
 
       if (!isImageBright) {

package/src/Screens/Dynamic/VerbalConsentScreen.tsx

@@ -801,7 +801,7 @@ const VerbalConsentScreen = () => {
     if (!currentInstructionKey) {
       return;
     }
-    speak(t(currentInstructionKey));
+    speak(t(currentInstructionKey)).catch(() => {});
   }, [
     appContext.currentWorkflowStep?.data?.voiceGuidanceActive,
     currentInstructionKey,

package/src/Screens/Dynamic/VideoCallScreen.tsx

@@ -7,13 +7,13 @@ import {
   TouchableOpacity,
   View,
   ActivityIndicator,
-  PermissionsAndroid,
   StatusBar,
 } from 'react-native';
 import { RTCView, MediaStream } from 'react-native-webrtc';
 import InCallManager from 'react-native-incall-manager';
 import LottieView from 'lottie-react-native';
 import { useTranslation } from 'react-i18next';
+import PermissionManager from '../../Shared/Libs/permissions.utils';
 import { useStatusBarWhiteBackground } from '../../Shared/Libs/status-bar.utils';
 import { WebRTCService } from '../../Shared/Services/WebRTCService';
 import { VideoSessionService } from '../../Shared/Services/VideoSessionService';
@@ -373,25 +373,14 @@ const VideoCallScreen = ({ navigation }: any) => {
       });
       serviceRef.current = service;
 
-      // Request Permissions
-      if (Platform.OS === 'android') {
-        const granted = await PermissionsAndroid.requestMultiple([
-          PermissionsAndroid.PERMISSIONS.CAMERA,
-          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
-        ]);
-        if (
-          granted['android.permission.CAMERA'] !==
-            PermissionsAndroid.RESULTS.GRANTED ||
-          granted['android.permission.RECORD_AUDIO'] !==
-            PermissionsAndroid.RESULTS.GRANTED
-        ) {
-          if (mounted) setConnectionState('permissions_denied');
-          return;
-        }
+      // Request Camera and Microphone Permissions
+      const hasBothPermissions =
+        await PermissionManager.requestCameraAndMicrophone();
+
+      if (!hasBothPermissions) {
+        if (mounted) setConnectionState('permissions_denied');
+        return;
       }
-      // For iOS, react-native-webrtc or VisionCamera usually triggers it,
-      // but explicit request via library is better if we had one.
-      // Assuming automatic or previously granted for now.
 
       try {
         const stream = await service.initialize();

package/src/Screens/Static/ResultScreen.tsx

@@ -1055,15 +1055,19 @@ const ResultScreen = () => {
                           <Text style={styles.sectionText}>
                             {t('resultScreen.demoVideo')}
                           </Text>
-                          <Video
-                            source={{
-                              uri: consentVideo.videoPath,
-                            }}
-                            resizeMode="contain"
-                            style={styles.video}
-                            controls={true}
-                            muted={false}
-                          />
+                          {consentVideo.videoPath ? (
+                            <Video
+                              source={{
+                                uri: consentVideo.videoPath,
+                              }}
+                              resizeMode="contain"
+                              style={styles.video}
+                              controls={true}
+                              muted={false}
+                            />
+                          ) : (
+                            <Text style={styles.sectionText}>N/A</Text>
+                          )}
                         </View>
                       )
                     )}

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);
     };