@trustchex/react-native-sdk 1.267.0 → 1.354.0

package/src/Shared/Components/EIDScanner.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Alert, View, Text, Image, StyleSheet } from 'react-native';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+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 { MRZInfo } from '../EIDReader/lds/icao/mrzInfo';
@@ -40,6 +41,7 @@ const EIDScanner = ({
   isNFCSupported,
 }: eIDScannerProps) => {
   useKeepAwake();
+  const insets = useSafeAreaInsets();
   const [isScanning, setIsScanning] = React.useState(false);
   const [hasNfc, setHasNFC] = React.useState(false);
   const [isEnabled, setIsEnabled] = React.useState(false);
@@ -48,6 +50,41 @@ const EIDScanner = ({
   const [documentFaceImageMimeType, setDocumentFaceImageMimeType] =
     React.useState<string>();
   const [progress, setProgress] = React.useState(0);
+  const [progressStage, setProgressStage] = React.useState<string>('');
+
+  // Animation for pulse indicator
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+
+  // Format date from YYMMDD to DD/MM/YYYY (matching Flutter SDK)
+  const formatDate = useCallback((dateStr?: string | null) => {
+    if (!dateStr) return '';
+
+    try {
+      // Check if it's YYMMDD format (6 digits from NFC)
+      if (dateStr.length === 6 && /^\d{6}$/.test(dateStr)) {
+        const yy = dateStr.substring(0, 2);
+        const mm = dateStr.substring(2, 4);
+        const dd = dateStr.substring(4, 6);
+
+        // Assume 19xx if YY >= 50, else 20xx
+        const year = parseInt(yy) >= 50 ? `19${yy}` : `20${yy}`;
+        return `${dd}/${mm}/${year}`;
+      }
+
+      // Otherwise try to parse as ISO 8601
+      const date = new Date(dateStr);
+      if (!isNaN(date.getTime())) {
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+      }
+
+      return dateStr;
+    } catch {
+      return dateStr;
+    }
+  }, []);
   const [isScanned, setIsScanned] = React.useState(false);
   const [hasGuideShown, setHasGuideShown] = React.useState(false);
   const { t } = useTranslation();
@@ -63,6 +100,7 @@ const EIDScanner = ({
     setIsScanning(true);
     setIsScanned(false);
     setProgress(0);
+    setProgressStage('');
 
     // Track EID scan start using analytics helper
     const docType =
@@ -113,6 +151,16 @@ const EIDScanner = ({
           dateOfExpiry,
           (progressValue) => {
             setProgress(progressValue);
+            // Update stage message based on progress
+            if (progressValue <= 20) {
+              setProgressStage(t('eidScannerScreen.connecting'));
+            } else if (progressValue <= 30) {
+              setProgressStage(t('eidScannerScreen.readingMRZ'));
+            } else if (progressValue < 100) {
+              setProgressStage(t('eidScannerScreen.readingFaceImage'));
+            } else {
+              setProgressStage(t('eidScannerScreen.completing'));
+            }
           }
         );
         if (passportData) {
@@ -193,6 +241,7 @@ const EIDScanner = ({
     } finally {
       setIsScanning(false);
       setProgress(0);
+      setProgressStage('');
       setHasGuideShown(false);
     }
   }, [
@@ -282,6 +331,30 @@ const EIDScanner = ({
     appContext.currentWorkflowStep?.data?.voiceGuidanceActive,
   ]);
 
+  // Pulse animation effect when scanning
+  useEffect(() => {
+    if (isScanning && progress > 0) {
+      const animation = Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulseAnim, {
+            toValue: 1.3,
+            duration: 800,
+            useNativeDriver: true,
+          }),
+          Animated.timing(pulseAnim, {
+            toValue: 1,
+            duration: 800,
+            useNativeDriver: true,
+          }),
+        ])
+      );
+      animation.start();
+      return () => animation.stop();
+    } else {
+      pulseAnim.setValue(1);
+    }
+  }, [isScanning, progress, pulseAnim]);
+
   useEffect(() => {
     if (
       voiceGuidanceMessage &&
@@ -296,6 +369,28 @@ const EIDScanner = ({
 
   return (
     <View style={styles.container}>
+      {/* NFC scan progress indicator and text at the top */}
+      {hasNfc && !isScanned && progress > 0 && (
+        <View style={[styles.topProgressContainer, { paddingTop: insets.top + 16 }]}>
+          <View style={styles.progressTextContainer}>
+            <Text style={styles.topScanningText}>
+              {progressStage || t('eidScannerScreen.readingDocument')}
+            </Text>
+            <Text style={[styles.progressPercentage, { color: appContext.branding.primaryColor }]}>
+              {Math.round(progress)}%
+            </Text>
+          </View>
+          <NativeProgressBar
+            progress={progress / 100}
+            width={null}
+            height={30}
+            borderRadius={8}
+            color={appContext.branding.primaryColor}
+            backgroundColor="#E5E5EA"
+          />
+        </View>
+      )}
+
       {!hasGuideShown && !isScanned ? (
         <View style={styles.guide}>
           <LottieView
@@ -405,7 +500,7 @@ const EIDScanner = ({
                   {t('eidScannerScreen.birthDate')}:
                 </Text>
                 <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getDateOfBirth()}
+                  {formatDate(documentMRZInfo.getDateOfBirth())}
                 </Text>
               </View>
               <View style={styles.mrzInfoItem}>
@@ -421,7 +516,7 @@ const EIDScanner = ({
                   {t('eidScannerScreen.expirationDate')}:
                 </Text>
                 <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getDateOfExpiry()}
+                  {formatDate(documentMRZInfo.getDateOfExpiry())}
                 </Text>
               </View>
             </View>
@@ -479,21 +574,6 @@ const EIDScanner = ({
                 </Text>
               )))}
 
-          {hasNfc && isEnabled && isScanning && progress > 0 && (
-            <Text style={styles.mainText}>
-              {t('eidScannerScreen.readingDocument')}
-            </Text>
-          )}
-
-          {hasNfc && !isScanned && progress > 0 && (
-            <NativeProgressBar
-              progress={progress / 100}
-              width={null}
-              height={30}
-              borderRadius={8}
-              color={appContext.branding.primaryColor}
-            />
-          )}
 
           {hasNfc && isEnabled && isScanned && (
             <View style={styles.buttonsContainer}>
@@ -532,6 +612,51 @@ const styles = StyleSheet.create({
     gap: 10,
     padding: 20,
   },
+  topProgressContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1000,
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+    gap: 8,
+  },
+  progressTextContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+  },
+  topScanningText: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#000',
+    flex: 1,
+  },
+  progressPercentage: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginLeft: 12,
+  },
+  scanningIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  pulseCircle: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    opacity: 0.8,
+  },
+  scanningIndicatorText: {
+    fontSize: 14,
+    color: '#666',
+    fontWeight: '500',
+  },
   buttonsContainer: {
     flexDirection: 'column',
     gap: 10,

package/src/Shared/Components/FaceCamera.tsx

@@ -1,6 +1,6 @@
 import { useIsFocused } from '@react-navigation/native';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import {
   StyleSheet,
   Text,
@@ -28,10 +28,11 @@ import {
 } from '../VisionCameraPlugins/FaceDetector';
 import { Worklets, useSharedValue } from 'react-native-worklets-core';
 import { crop } from '../VisionCameraPlugins/Cropper';
-import { isCircularRegionBright } from '../Libs/camera.utils';
+import { isCircularRegionBright, isBlurry } from '../Libs/camera.utils';
 import { useTranslation } from 'react-i18next';
 import StyledButton from './StyledButton';
 import { useTheme } from '../Contexts/ThemeContext';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export type FaceCameraProps = {
   onFacesDetected: (
@@ -78,16 +79,22 @@ const FaceCamera = ({
     },
   ]);
   const isCameraInitialized = useSharedValue(false);
-  const { detectFaces } = useFaceDetector({
-    contourMode: 'none',
-    landmarkMode: 'none',
-    classificationMode: 'all',
-    performanceMode: 'accurate',
-    trackingEnabled: false,
-    autoScale: true,
-    windowWidth: windowWidth,
-    windowHeight: windowHeight,
-  });
+
+  const faceDetectorOptions = useMemo(
+    () => ({
+      contourMode: 'none' as const,
+      landmarkMode: 'none' as const,
+      classificationMode: 'all' as const,
+      performanceMode: 'accurate' as const,
+      trackingEnabled: false,
+      autoScale: true,
+      windowWidth: windowWidth,
+      windowHeight: windowHeight,
+    }),
+    [windowWidth, windowHeight]
+  );
+
+  const { detectFaces } = useFaceDetector(faceDetectorOptions);
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -106,6 +113,7 @@ const FaceCamera = ({
   const handleFaces = Worklets.createRunOnJS(
     (faces: Face[], image: string, isBright: boolean) => {
       if (faces.length > 0) {
+        console.log('[FaceCamera] handleFaces called - faces:', faces.length, 'bright:', isBright);
         onFacesDetected(faces, image, isBright);
       }
     }
@@ -192,6 +200,12 @@ const FaceCamera = ({
         isBright = (luminanceSum / pixelCount) > 60;
       }
 
+      // Skip blurry frames to ensure sharp face captures
+      // Lower threshold (10) for better frame acceptance
+      if (isBlurry(frame, 10)) {
+        return;
+      }
+
       const image = crop(frame, {
         cropRegion: {
           top: 0,
@@ -205,10 +219,13 @@ const FaceCamera = ({
 
       if (image && image.base64) {
         const faces = detectFaces(frame);
+        if (faces.length > 0) {
+          console.log('[FaceCamera] Faces detected:', faces.length);
+        }
         handleFaces(faces, image.base64, isBright);
       }
     } catch (error) {
-      console.error('Face detection error:', error);
+      console.error('[FaceCamera] Face detection error:', error);
     }
   };
 
@@ -237,16 +254,16 @@ const FaceCamera = ({
 
   if (!permissionsRequested) {
     return (
-      <View style={styles.permissionContainer}>
+      <SafeAreaView style={styles.permissionContainer}>
         <ActivityIndicator size="large" color={theme.colors.primary} />
-      </View>
+      </SafeAreaView>
     );
   }
 
   if (!cameraPermission.hasPermission) {
     // Camera permission denied by user - their choice, not actionable
     return (
-      <View style={styles.permissionContainer}>
+      <SafeAreaView style={styles.permissionContainer}>
         <Text style={styles.permissionText}>
           {t('general.noCameraPermissionGiven')}
         </Text>
@@ -258,14 +275,14 @@ const FaceCamera = ({
         >
           {t('general.openSettings')}
         </StyledButton>
-      </View>
+      </SafeAreaView>
     );
   }
 
   if (!microphonePermission.hasPermission) {
     // Microphone permission denied by user - their choice, not actionable
     return (
-      <View style={styles.permissionContainer}>
+      <SafeAreaView style={styles.permissionContainer}>
         <Text style={styles.permissionText}>
           {t('general.noMicrophonePermissionGiven')}
         </Text>
@@ -277,18 +294,18 @@ const FaceCamera = ({
         >
           {t('general.openSettings')}
         </StyledButton>
-      </View>
+      </SafeAreaView>
     );
   }
 
   if (device == null) {
     // No camera device - device limitation, not actionable
     return (
-      <View style={styles.permissionContainer}>
+      <SafeAreaView style={styles.permissionContainer}>
         <Text style={styles.permissionText}>
           {t('general.noCameraDetected')}
         </Text>
-      </View>
+      </SafeAreaView>
     );
   }