@trustchex/react-native-sdk 1.362.4 → 1.374.0

package/src/Shared/Components/IdentityDocumentCamera.tsx

@@ -13,6 +13,7 @@ import {
   PermissionsAndroid,
   Dimensions,
   ScrollView,
+  Animated,
   type NativeSyntheticEvent,
   type ViewStyle,
 } from 'react-native';
@@ -38,6 +39,8 @@ import { useTheme } from '../Contexts/ThemeContext';
 
 const { OpenCVModule } = NativeModules;
 
+const AnimatedText = Animated.createAnimatedComponent(TextView);
+
 export type DocumentScannedData = {
   documentType: 'ID_FRONT' | 'ID_BACK' | 'PASSPORT' | 'UNKNOWN';
   image: string;
@@ -125,7 +128,6 @@ interface Barcode {
 const HOLOGRAM_IMAGE_COUNT = 12;
 const HOLOGRAM_DETECTION_THRESHOLD = 1000; // Lowered for better sensitivity while still filtering noise
 const HOLOGRAM_DETECTION_RETRY_COUNT = 3; // More attempts but faster each (~1s per attempt)
-const SECOND_FACE_DETECTION_RETRY_COUNT = 10;
 const MIN_BRIGHTNESS_THRESHOLD = 45;
 const MAX_CONSECUTIVE_QUALITY_FAILURES = 30;
 
@@ -206,6 +208,9 @@ const IdentityDocumentCamera = ({
   // Barcode caching - persist detected barcode across frames for reliability
   const cachedBarcode = useRef<Barcode | null>(null);
 
+  // Error message flash animation
+  const errorFlashAnim = useRef(new Animated.Value(1)).current;
+
   // Test mode tracking
   const [testModeData, setTestModeData] = useState<{
     mrzText: string;
@@ -451,25 +456,16 @@ const IdentityDocumentCamera = ({
       // Generate message - match UI display logic exactly for consistency
       let message = '';
 
-      if (status === 'SCANNED') {
-        message =
-          completedStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-            ? detectedDocumentType === 'PASSPORT'
-              ? t('identityDocumentCamera.passportScanned')
-              : t('identityDocumentCamera.frontSideScanned')
-            : completedStep === 'SCAN_ID_BACK'
-              ? t('identityDocumentCamera.backSideScanned')
-              : completedStep === 'SCAN_HOLOGRAM'
-                ? t('identityDocumentCamera.hologramVerified')
-                : t('identityDocumentCamera.scanCompleted');
+      if (nextStep === 'COMPLETED') {
+        message = t('identityDocumentCamera.scanCompleted');
       } else if (status === 'INCORRECT') {
         message =
           nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-            ? t('identityDocumentCamera.wrongSideFront')
+            ? t('identityDocumentCamera.alignIDFront')
             : nextStep === 'SCAN_ID_BACK'
-              ? t('identityDocumentCamera.wrongSideBack')
+              ? t('identityDocumentCamera.alignIDBack')
               : nextStep === 'SCAN_HOLOGRAM'
-                ? t('identityDocumentCamera.wrongSideFront')
+                ? t('identityDocumentCamera.alignIDFront')
                 : t('identityDocumentCamera.alignPhotoSide');
       } else if (isBrightnessLow) {
         message = t('identityDocumentCamera.lowBrightness');
@@ -567,6 +563,27 @@ const IdentityDocumentCamera = ({
     }
   }, [nextStep]);
 
+  // Error flash animation - flash red text when wrong side detected
+  useEffect(() => {
+    if (status === 'INCORRECT') {
+      errorFlashAnim.setValue(1);
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(errorFlashAnim, {
+            toValue: 0.3,
+            duration: 300,
+            useNativeDriver: false,
+          }),
+          Animated.timing(errorFlashAnim, {
+            toValue: 1,
+            duration: 300,
+            useNativeDriver: false,
+          }),
+        ])
+      ).start();
+    }
+  }, [status, errorFlashAnim]);
+
   // Native OpenCV: detect hologram from sequence of face images
   const detectHologramNative = useCallback(
     async (images: string[]): Promise<[string, string] | []> => {
@@ -1918,10 +1935,11 @@ const IdentityDocumentCamera = ({
       nextStep,
       frameDimensions,
       currentHologramImage,
+      detectedDocumentType,
       currentFaceImage,
+      testMode,
       hasRequiredMRZFields,
       areMRZFieldsEqual,
-      detectedDocumentType,
       onlyMRZScan,
       isTorchOn,
       setIsTorchOn,
@@ -1931,7 +1949,6 @@ const IdentityDocumentCamera = ({
       logMRZValidationFailure,
       currentSecondaryFaceImage,
       detectHologramNative,
-      mrzUtils,
     ]
   );
 
@@ -3188,14 +3205,17 @@ const IdentityDocumentCamera = ({
                 </TextView>
               )}
 
-            <TextView
+            <AnimatedText
               style={[
                 styles.topZoneText,
                 // Priority order for coloring (later styles override earlier ones)
                 // 1. Success (green) - scan completed
-                status === 'SCANNED' && styles.topZoneTextSuccess,
-                // 2. Error (red) - wrong side
+                nextStep === 'COMPLETED' && styles.topZoneTextSuccess,
+                // 2. Error (red) - wrong side - with flash opacity
                 status === 'INCORRECT' && styles.topZoneTextError,
+                status === 'INCORRECT' && {
+                  opacity: errorFlashAnim,
+                },
                 // 3. Warning (yellow) - quality issues
                 (isBrightnessLow || isFrameBlurry) && styles.topZoneTextWarning,
                 // 4. Scanning (green) - all elements detected AND inside scan area
@@ -3208,23 +3228,15 @@ const IdentityDocumentCamera = ({
                 // 5. Default (white) - aligning (not all detected OR elements outside scan area)
               ]}
             >
-              {status === 'SCANNED'
-                ? completedStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-                  ? detectedDocumentType === 'PASSPORT'
-                    ? t('identityDocumentCamera.passportScanned')
-                    : t('identityDocumentCamera.frontSideScanned')
-                  : completedStep === 'SCAN_ID_BACK'
-                    ? t('identityDocumentCamera.backSideScanned')
-                    : completedStep === 'SCAN_HOLOGRAM'
-                      ? t('identityDocumentCamera.hologramVerified')
-                      : t('identityDocumentCamera.scanCompleted')
+              {nextStep === 'COMPLETED'
+                ? t('identityDocumentCamera.scanCompleted')
                 : status === 'INCORRECT'
                   ? nextStep === 'SCAN_ID_FRONT_OR_PASSPORT'
-                    ? t('identityDocumentCamera.wrongSideFront')
+                    ? t('identityDocumentCamera.alignIDFront')
                     : nextStep === 'SCAN_ID_BACK'
-                      ? t('identityDocumentCamera.wrongSideBack')
+                      ? t('identityDocumentCamera.alignIDBack')
                       : nextStep === 'SCAN_HOLOGRAM'
-                        ? t('identityDocumentCamera.wrongSideFront') // Hologram is on front, show same message as front scan
+                        ? t('identityDocumentCamera.alignIDFront')
                         : t('identityDocumentCamera.alignPhotoSide')
                   : isBrightnessLow
                     ? t('identityDocumentCamera.lowBrightness')
@@ -3274,200 +3286,17 @@ const IdentityDocumentCamera = ({
                                   : nextStep === 'COMPLETED'
                                     ? t('identityDocumentCamera.scanCompleted')
                                     : ''}
-            </TextView>
+            </AnimatedText>
           </View>
           <View style={styles.leftZone} />
           <View style={styles.rightZone} />
-          <View style={styles.bottomZone}>
-            <View style={styles.debugImagesRow}>
-              {isDebugEnabled() && (
-                <View style={styles.imageContainer}>
-                  {currentFaceImage ? (
-                    <Image
-                      source={{
-                        uri: `data:image/jpeg;base64,${currentFaceImage}`,
-                      }}
-                      style={styles.faceImage}
-                    />
-                  ) : (
-                    <View
-                      style={[
-                        styles.faceImage,
-                        { backgroundColor: '#333', justifyContent: 'center' },
-                      ]}
-                    >
-                      <TextView
-                        style={{
-                          color: '#666',
-                          fontSize: 10,
-                          textAlign: 'center',
-                        }}
-                      >
-                        Waiting...
-                      </TextView>
-                    </View>
-                  )}
-                  <TextView
-                    style={[
-                      styles.imageContainerText,
-                      currentFaceImage && { color: '#4CAF50' },
-                    ]}
-                  >
-                    {`${currentFaceImage ? '✓ ' : ''}Face`}
-                  </TextView>
-                </View>
-              )}
-              {isDebugEnabled() && (
-                <View style={styles.imageContainer}>
-                  {currentSecondaryFaceImage ? (
-                    <Image
-                      source={{
-                        uri: `data:image/jpeg;base64,${currentSecondaryFaceImage}`,
-                      }}
-                      style={styles.faceImage}
-                    />
-                  ) : (
-                    <View
-                      style={[
-                        styles.faceImage,
-                        { backgroundColor: '#333', justifyContent: 'center' },
-                      ]}
-                    >
-                      <TextView
-                        style={{
-                          color: '#666',
-                          fontSize: 10,
-                          textAlign: 'center',
-                        }}
-                      >
-                        Waiting...
-                      </TextView>
-                    </View>
-                  )}
-                  <TextView
-                    style={[
-                      styles.imageContainerText,
-                      currentSecondaryFaceImage && { color: '#4CAF50' },
-                    ]}
-                  >
-                    {`${currentSecondaryFaceImage ? '✓ ' : ''}2nd Face`}
-                  </TextView>
-                </View>
-              )}
-              {isDebugEnabled() && (
-                <View style={styles.imageContainer}>
-                  {currentHologramImage ? (
-                    <Image
-                      source={{
-                        uri: `data:image/jpeg;base64,${currentHologramImage}`,
-                      }}
-                      style={styles.faceImage}
-                    />
-                  ) : latestHologramFaceImage && hologramImageCount > 0 ? (
-                    <View style={{ position: 'relative' }}>
-                      <Image
-                        source={{
-                          uri: `data:image/jpeg;base64,${latestHologramFaceImage}`,
-                        }}
-                        style={[styles.faceImage, { opacity: 0.7 }]}
-                      />
-                      <View
-                        style={{
-                          position: 'absolute',
-                          bottom: 0,
-                          left: 0,
-                          right: 0,
-                          backgroundColor: 'rgba(0,0,0,0.7)',
-                          padding: 2,
-                        }}
-                      >
-                        <TextView
-                          style={{
-                            color: '#FFA500',
-                            fontSize: 8,
-                            textAlign: 'center',
-                            fontWeight: 'bold',
-                          }}
-                        >
-                          {hologramImageCount}/{HOLOGRAM_IMAGE_COUNT}
-                        </TextView>
-                      </View>
-                    </View>
-                  ) : (
-                    <View
-                      style={[
-                        styles.faceImage,
-                        { backgroundColor: '#333', justifyContent: 'center' },
-                      ]}
-                    >
-                      <TextView
-                        style={{
-                          color: '#666',
-                          fontSize: 10,
-                          textAlign: 'center',
-                        }}
-                      >
-                        Waiting...
-                      </TextView>
-                    </View>
-                  )}
-                  <TextView
-                    style={[
-                      styles.imageContainerText,
-                      currentHologramImage && { color: '#4CAF50' },
-                      latestHologramFaceImage &&
-                        !currentHologramImage && { color: '#FFA500' },
-                    ]}
-                  >
-                    {`${currentHologramImage ? '✓ ' : latestHologramFaceImage ? '⏳ ' : ''}Hologram`}
-                  </TextView>
-                </View>
-              )}
-              {isDebugEnabled() && (
-                <View style={styles.imageContainer}>
-                  {_currentHologramMaskImage ? (
-                    <Image
-                      source={{
-                        uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`,
-                      }}
-                      style={styles.faceImage}
-                    />
-                  ) : (
-                    <View
-                      style={[
-                        styles.faceImage,
-                        { backgroundColor: '#333', justifyContent: 'center' },
-                      ]}
-                    >
-                      <TextView
-                        style={{
-                          color: '#666',
-                          fontSize: 10,
-                          textAlign: 'center',
-                        }}
-                      >
-                        Waiting...
-                      </TextView>
-                    </View>
-                  )}
-                  <TextView
-                    style={[
-                      styles.imageContainerText,
-                      _currentHologramMaskImage && { color: '#4CAF50' },
-                    ]}
-                  >
-                    {`${_currentHologramMaskImage ? '✓ ' : ''}Mask`}
-                  </TextView>
-                </View>
-              )}
-            </View>
-          </View>
+          <View style={styles.bottomZone} />
           <View
             style={[
               styles.scanArea,
               {
                 borderColor:
-                  status === 'SCANNED' || nextStep === 'COMPLETED'
+                  nextStep === 'COMPLETED'
                     ? '#4CAF50'
                     : status === 'INCORRECT'
                       ? '#f44336'
@@ -3480,7 +3309,7 @@ const IdentityDocumentCamera = ({
               },
             ]}
           >
-            {nextStep === 'COMPLETED' || status === 'SCANNED' ? (
+            {nextStep === 'COMPLETED' ? (
               <LottieView
                 source={require('../../Shared/Animations/success.json')}
                 style={styles.animation}
@@ -3501,13 +3330,6 @@ const IdentityDocumentCamera = ({
                 loop={true}
                 autoPlay
               />
-            ) : status === 'SCANNING' ? (
-              <LottieView
-                source={require('../../Shared/Animations/scanning.json')}
-                style={styles.animation}
-                loop={true}
-                autoPlay
-              />
             ) : null}
           </View>
           {isDebugEnabled() && (
@@ -3523,59 +3345,415 @@ const IdentityDocumentCamera = ({
             >
               <View
                 style={{
-                  marginTop: 10,
-                  backgroundColor: 'rgba(0, 0, 0, 0.85)',
-                  padding: 10,
-                  borderRadius: 8,
+                  marginTop: 8,
+                  marginHorizontal: 8,
+                  backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                  padding: 8,
+                  borderRadius: 6,
                   borderWidth: 1,
-                  borderColor: '#FF6B6B',
-                  minWidth: 200,
+                  borderColor: 'rgba(255, 82, 82, 0.5)',
+                  minWidth: 220,
+                  maxWidth: '92%',
                 }}
               >
-                <TextView
+                {/* Status & State Row */}
+                <View
                   style={{
-                    color: '#FF6B6B',
-                    fontSize: 11,
-                    fontWeight: 'bold',
-                    marginBottom: 6,
-                    textAlign: 'center',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    marginBottom: 4,
                   }}
                 >
-                  DEBUG MODE
-                </TextView>
-                <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
-                >
-                  {`Step: ${nextStep}`}
-                </TextView>
-                <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                  <TextView
+                    style={{
+                      color: '#88D8B0',
+                      fontSize: 10,
+                      fontWeight: 'bold',
+                    }}
+                  >
+                    {`Status: ${status}`}
+                  </TextView>
+                  <TextView
+                    style={{
+                      color: '#FFEB3B',
+                      fontSize: 10,
+                      fontWeight: 'bold',
+                    }}
+                  >
+                    {`Step: ${nextStep}`}
+                  </TextView>
+                </View>
+
+                {/* Quality Info - Badges */}
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    marginBottom: 4,
+                    gap: 3,
+                  }}
                 >
-                  {`Status: ${status}`}
-                </TextView>
+                  <View
+                    style={{
+                      backgroundColor: isBrightnessLow ? '#f44336' : '#4CAF50',
+                      paddingHorizontal: 6,
+                      paddingVertical: 1,
+                      borderRadius: 3,
+                    }}
+                  >
+                    <TextView
+                      style={{
+                        color: '#FFFFFF',
+                        fontSize: 8,
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {isBrightnessLow ? 'Low Light' : 'Good Light'}
+                    </TextView>
+                  </View>
+                  <View
+                    style={{
+                      backgroundColor: isFrameBlurry ? '#f44336' : '#4CAF50',
+                      paddingHorizontal: 6,
+                      paddingVertical: 1,
+                      borderRadius: 3,
+                    }}
+                  >
+                    <TextView
+                      style={{
+                        color: '#FFFFFF',
+                        fontSize: 8,
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {isFrameBlurry ? 'Blurry' : 'Sharp'}
+                    </TextView>
+                  </View>
+                </View>
+
+                {/* Elements Status */}
                 <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                  style={{
+                    color:
+                      elementsOutsideScanArea.length === 0
+                        ? '#4CAF50'
+                        : '#FFA500',
+                    fontSize: 8,
+                    marginBottom: 3,
+                  }}
                 >
-                  {`Doc Type: ${detectedDocumentType}`}
+                  {elementsOutsideScanArea.length === 0
+                    ? 'All elements in frame'
+                    : `Outside: ${elementsOutsideScanArea.join(', ')}`}
                 </TextView>
+
+                {/* Detection Info */}
                 <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                  style={{
+                    color: 'rgba(255, 255, 255, 0.7)',
+                    fontSize: 8,
+                    marginBottom: 3,
+                  }}
                 >
-                  {`Brightness: ${isBrightnessLow ? '⚠️ LOW' : '✓'}`}
+                  {`Face: ${documentPlaneBounds ? '✓' : '✗'}, MRZ: ${mrzBounds ? '✓' : '✗'}, Sig: ${signatureBounds ? '✓' : '✗'}`}
                 </TextView>
-                <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+
+                {/* Hologram Count */}
+                {nextStep === 'SCAN_HOLOGRAM' && hologramImageCount > 0 && (
+                  <TextView
+                    style={{
+                      color: '#9C27B0',
+                      fontSize: 8,
+                      fontWeight: 'bold',
+                      marginBottom: 3,
+                    }}
+                  >
+                    {`Hologram: ${hologramImageCount}/${HOLOGRAM_IMAGE_COUNT}`}
+                  </TextView>
+                )}
+
+                {/* Additional Info Row */}
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    gap: 8,
+                    paddingTop: 3,
+                    borderTopWidth: 1,
+                    borderTopColor: 'rgba(255, 255, 255, 0.2)',
+                    marginBottom: 4,
+                  }}
                 >
-                  {`Blur: ${isFrameBlurry ? '⚠️' : '✓'}`}
-                </TextView>
-                <TextView
-                  style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}
+                  <TextView
+                    style={{
+                      color: 'rgba(255, 255, 255, 0.7)',
+                      fontSize: 8,
+                      marginTop: 3,
+                    }}
+                  >
+                    {`Doc: ${detectedDocumentType}`}
+                  </TextView>
+                  <TextView
+                    style={{
+                      color: 'rgba(255, 255, 255, 0.7)',
+                      fontSize: 8,
+                      marginTop: 3,
+                    }}
+                  >
+                    {`Flash: ${isTorchOn ? '🔦' : '○'}`}
+                  </TextView>
+                </View>
+
+                {/* Debug Images Grid - Compact */}
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    gap: 4,
+                    justifyContent: 'center',
+                  }}
                 >
-                  {`Flash: ${isTorchOn ? '🔦' : '○'}`}
-                </TextView>
-                <TextView style={{ color: '#88D8B0', fontSize: 9 }}>
-                  {`Face Detection: ${faceDetectionEnabled ? '✓' : '✗'}`}
-                </TextView>
+                  {/* Face Image */}
+                  <View style={{ alignItems: 'center' }}>
+                    {currentFaceImage ? (
+                      <Image
+                        source={{
+                          uri: `data:image/jpeg;base64,${currentFaceImage}`,
+                        }}
+                        style={{
+                          width: 40,
+                          height: 48,
+                          borderRadius: 2,
+                          borderWidth: 1,
+                          borderColor: '#4CAF50',
+                        }}
+                      />
+                    ) : (
+                      <View
+                        style={{
+                          width: 40,
+                          height: 48,
+                          borderRadius: 2,
+                          borderWidth: 1,
+                          borderColor: '#666',
+                          backgroundColor: '#222',
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                        }}
+                      >
+                        <TextView
+                          style={{
+                            color: '#666',
+                            fontSize: 7,
+                          }}
+                        >
+                          —
+                        </TextView>
+                      </View>
+                    )}
+                    <TextView
+                      style={{
+                        color: currentFaceImage ? '#4CAF50' : '#999',
+                        fontSize: 7,
+                        marginTop: 1,
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {`${currentFaceImage ? '✓' : '○'} Face`}
+                    </TextView>
+                  </View>
+
+                  {/* Secondary Face Image */}
+                  <View style={{ alignItems: 'center' }}>
+                    {currentSecondaryFaceImage ? (
+                      <Image
+                        source={{
+                          uri: `data:image/jpeg;base64,${currentSecondaryFaceImage}`,
+                        }}
+                        style={{
+                          width: 40,
+                          height: 48,
+                          borderRadius: 2,
+                          borderWidth: 1,
+                          borderColor: '#2196F3',
+                        }}
+                      />
+                    ) : (
+                      <View
+                        style={{
+                          width: 40,
+                          height: 48,
+                          borderRadius: 2,
+                          borderWidth: 1,
+                          borderColor: '#666',
+                          backgroundColor: '#222',
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                        }}
+                      >
+                        <TextView
+                          style={{
+                            color: '#666',
+                            fontSize: 7,
+                          }}
+                        >
+                          —
+                        </TextView>
+                      </View>
+                    )}
+                    <TextView
+                      style={{
+                        color: currentSecondaryFaceImage ? '#2196F3' : '#999',
+                        fontSize: 7,
+                        marginTop: 1,
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {`${currentSecondaryFaceImage ? '✓' : '○'} 2nd`}
+                    </TextView>
+                  </View>
+
+                  {/* Hologram Image */}
+                  <View style={{ alignItems: 'center' }}>
+                    {currentHologramImage ? (
+                      <Image
+                        source={{
+                          uri: `data:image/jpeg;base64,${currentHologramImage}`,
+                        }}
+                        style={{
+                          width: 40,
+                          height: 48,
+                          borderRadius: 2,
+                          borderWidth: 1,
+                          borderColor: '#9C27B0',
+                        }}
+                      />
+                    ) : latestHologramFaceImage && hologramImageCount > 0 ? (
+                      <View style={{ position: 'relative' }}>
+                        <Image
+                          source={{
+                            uri: `data:image/jpeg;base64,${latestHologramFaceImage}`,
+                          }}
+                          style={{
+                            width: 40,
+                            height: 48,
+                            borderRadius: 2,
+                            borderWidth: 1,
+                            borderColor: '#FFA500',
+                            opacity: 0.7,
+                          }}
+                        />
+                        <View
+                          style={{
+                            position: 'absolute',
+                            bottom: 1,
+                            left: 1,
+                            right: 1,
+                            backgroundColor: 'rgba(0,0,0,0.8)',
+                            paddingVertical: 0,
+                            borderRadius: 1,
+                          }}
+                        >
+                          <TextView
+                            style={{
+                              color: '#FFA500',
+                              fontSize: 6,
+                              textAlign: 'center',
+                              fontWeight: 'bold',
+                            }}
+                          >
+                            {hologramImageCount}/{HOLOGRAM_IMAGE_COUNT}
+                          </TextView>
+                        </View>
+                      </View>
+                    ) : (
+                      <View
+                        style={{
+                          width: 40,
+                          height: 48,
+                          borderRadius: 2,
+                          borderWidth: 1,
+                          borderColor: '#666',
+                          backgroundColor: '#222',
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                        }}
+                      >
+                        <TextView
+                          style={{
+                            color: '#666',
+                            fontSize: 7,
+                          }}
+                        >
+                          —
+                        </TextView>
+                      </View>
+                    )}
+                    <TextView
+                      style={{
+                        color: currentHologramImage
+                          ? '#9C27B0'
+                          : latestHologramFaceImage
+                            ? '#FFA500'
+                            : '#999',
+                        fontSize: 7,
+                        marginTop: 1,
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {`${currentHologramImage ? '✓' : latestHologramFaceImage ? '⏳' : '○'} Holo`}
+                    </TextView>
+                  </View>
+
+                  {/* Hologram Mask Image */}
+                  <View style={{ alignItems: 'center' }}>
+                    {_currentHologramMaskImage ? (
+                      <Image
+                        source={{
+                          uri: `data:image/jpeg;base64,${_currentHologramMaskImage}`,
+                        }}
+                        style={{
+                          width: 40,
+                          height: 48,
+                          borderRadius: 2,
+                          borderWidth: 1,
+                          borderColor: '#FF6B6B',
+                        }}
+                      />
+                    ) : (
+                      <View
+                        style={{
+                          width: 40,
+                          height: 48,
+                          borderRadius: 2,
+                          borderWidth: 1,
+                          borderColor: '#666',
+                          backgroundColor: '#222',
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                        }}
+                      >
+                        <TextView
+                          style={{
+                            color: '#666',
+                            fontSize: 7,
+                          }}
+                        >
+                          —
+                        </TextView>
+                      </View>
+                    )}
+                    <TextView
+                      style={{
+                        color: _currentHologramMaskImage ? '#FF6B6B' : '#999',
+                        fontSize: 7,
+                        marginTop: 1,
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {`${_currentHologramMaskImage ? '✓' : '○'} Mask`}
+                    </TextView>
+                  </View>
+                </View>
               </View>
             </SafeAreaView>
           )}