@trustchex/react-native-sdk 1.409.0 → 1.464.0

package/src/Shared/Components/DebugNavigationPanel.tsx

@@ -10,16 +10,22 @@ import {
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTranslation } from 'react-i18next';
 import AppContext from '../Contexts/AppContext';
 import { getSimulatedDemoData } from '../Libs/demo.utils';
 import type { VerificationSession } from '../Types/verificationSession';
 
 const DEV_BASE_URL = 'https://192.168.0.171:3000';
+const DEBUG_VERBAL_CONSENT_TITLE_EN = 'Verbal Consent';
+const DEBUG_VERBAL_CONSENT_TITLE_TR = 'Sözlü Onay';
+const DEBUG_VERBAL_CONSENT_TEXT_EN =
+  'I confirm my identity and give my explicit consent to the processing of my personal data for digital identity verification. I acknowledge that my biometric data will be used solely for this purpose. I understand that I can withdraw this consent at any time.';
+const DEBUG_VERBAL_CONSENT_TEXT_TR =
+  'Dijital kimlik doğrulama amacıyla kimliğimi teyit ediyor ve kişisel verilerimin işlenmesine açık rızamı veriyorum. Biyometrik verilerimin yalnızca kimlik doğrulama amacıyla işleneceğini kabul ediyorum. Bu onayı istediğim zaman geri çekebileceğimi biliyorum.';
 
 type ScreenOption = {
   screen: string;
   label: string;
-  icon: string;
   isDebug?: boolean;
   hasOptions?: boolean;
   hasDocumentTypeOption?: boolean;
@@ -27,18 +33,6 @@ type ScreenOption = {
   params?: Record<string, unknown>;
 };
 
-// Icon mapping matching Flutter SDK Material Icons
-const ICONS = {
-  LOGIN: '�', // Icons.login - Locked with key for session security
-  HANDSHAKE: '📝', // Icons.handshake - Document for contract signing
-  CREDIT_CARD: '🪪', // Icons.credit_card - ID card for document scan
-  NFC: '💳', // Icons.nfc - Contactless card for eID
-  FACE: '📸', // Icons.face - Camera for face detection
-  CHECK_CIRCLE: '📋', // Icons.check_circle - Clipboard for results
-  BUG_REPORT: '🔧', // Icons.bug_report - Wrench for debugging
-  PHONE: '💬', // Icons.phone - Message for OTP code
-} as const;
-
 const DebugNavigationPanel = () => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [selectedScreen, setSelectedScreen] = useState<ScreenOption | null>(
@@ -52,6 +46,8 @@ const DebugNavigationPanel = () => {
   const navigation = useNavigation();
   const appContext = useContext(AppContext);
   const insets = useSafeAreaInsets();
+  const { i18n } = useTranslation();
+  const isTurkish = (i18n.language || '').toLowerCase().startsWith('tr');
 
   const setupDemoSession = useCallback(
     (setDebugFlag: boolean = false) => {
@@ -114,12 +110,10 @@ const DebugNavigationPanel = () => {
     {
       screen: 'VerificationSessionCheckScreen',
       label: 'Session Check',
-      icon: ICONS.LOGIN,
     },
     {
       screen: 'OTPVerificationScreen',
       label: 'OTP',
-      icon: ICONS.PHONE,
       setupDemo: () => {
         setupDemoSession(true);
       },
@@ -128,7 +122,6 @@ const DebugNavigationPanel = () => {
     {
       screen: 'ContractAcceptanceScreen',
       label: 'Consent',
-      icon: ICONS.HANDSHAKE,
       hasOptions: true,
       setupDemo: () => {
         setupDemoSession(true);
@@ -141,10 +134,55 @@ const DebugNavigationPanel = () => {
         }
       },
     },
+    {
+      screen: 'VerbalConsentScreen',
+      label: 'Verbal Consent',
+      hasOptions: true,
+      setupDemo: () => {
+        setupDemoSession(true);
+        const existingStep = appContext.workflowSteps?.find(
+          (s) => s.type === 'VERBAL_CONSENT'
+        );
+
+        const localizedConsentTitle = isTurkish
+          ? DEBUG_VERBAL_CONSENT_TITLE_TR
+          : DEBUG_VERBAL_CONSENT_TITLE_EN;
+        const localizedConsentText = isTurkish
+          ? DEBUG_VERBAL_CONSENT_TEXT_TR
+          : DEBUG_VERBAL_CONSENT_TEXT_EN;
+
+        const localizedStep = existingStep
+          ? {
+              ...existingStep,
+              data: {
+                ...existingStep.data,
+                verbalConsentTitle: localizedConsentTitle,
+                verbalConsentText: localizedConsentText,
+                voiceGuidanceActive: false,
+              },
+            }
+          : {
+              type: 'VERBAL_CONSENT' as const,
+              required: true,
+              data: {
+                verbalConsentTitle: localizedConsentTitle,
+                verbalConsentText: localizedConsentText,
+                voiceGuidanceActive: false,
+              },
+            };
+
+        if (appContext.workflowSteps) {
+          appContext.workflowSteps = appContext.workflowSteps.map((step) =>
+            step.type === 'VERBAL_CONSENT' ? localizedStep : step
+          );
+        }
+
+        appContext.currentWorkflowStep = localizedStep;
+      },
+    },
     {
       screen: 'IdentityDocumentScanningScreen',
       label: 'ID Scan',
-      icon: ICONS.CREDIT_CARD,
       hasOptions: true,
       hasDocumentTypeOption: true,
       setupDemo: () => {
@@ -160,7 +198,6 @@ const DebugNavigationPanel = () => {
     {
       screen: 'IdentityDocumentEIDScanningScreen',
       label: 'eID Scan',
-      icon: ICONS.NFC,
       hasOptions: true,
       hasDocumentTypeOption: true,
       setupDemo: () => {
@@ -176,7 +213,6 @@ const DebugNavigationPanel = () => {
     {
       screen: 'LivenessDetectionScreen',
       label: 'Liveness',
-      icon: ICONS.FACE,
       hasOptions: true,
       setupDemo: () => {
         setupDemoSession(true);
@@ -191,7 +227,6 @@ const DebugNavigationPanel = () => {
     {
       screen: 'ResultScreen',
       label: 'Result',
-      icon: ICONS.CHECK_CIRCLE,
       setupDemo: () => {
         setupDemoSession();
       },
@@ -199,13 +234,16 @@ const DebugNavigationPanel = () => {
     {
       screen: 'MRZTestScreen',
       label: 'MRZ Test',
-      icon: ICONS.BUG_REPORT,
       isDebug: true,
     },
     {
       screen: 'BarcodeTestScreen',
       label: 'Barcode Test',
-      icon: ICONS.BUG_REPORT,
+      isDebug: true,
+    },
+    {
+      screen: 'NFCScanTestScreen',
+      label: 'NFC Scan Test',
       isDebug: true,
     },
   ];
@@ -215,6 +253,7 @@ const DebugNavigationPanel = () => {
       if (!screen.hasOptions) {
         if (screen.setupDemo) {
           screen.setupDemo();
+          applyVoiceGuidance(voiceGuidanceEnabled);
         }
         (navigation as any).navigate(screen.screen, screen.params);
         setIsExpanded(false);
@@ -225,7 +264,7 @@ const DebugNavigationPanel = () => {
       setAllowIdCard(true);
       setAllowPassport(true);
     },
-    [navigation]
+    [navigation, voiceGuidanceEnabled, applyVoiceGuidance]
   );
 
   const handleVideoCallTest = useCallback(async () => {
@@ -336,11 +375,9 @@ const DebugNavigationPanel = () => {
           <Text style={styles.title}>SDK JUMP TO SCREEN:</Text>
           {selectedScreen ? (
             <View>
-              <Text style={styles.optionsTitle}>
-                {selectedScreen.icon} {selectedScreen.label}
-              </Text>
+              <Text style={styles.optionsTitle}>{selectedScreen.label}</Text>
               <View style={styles.optionRow}>
-                <Text style={styles.optionLabel}>🔊 Voice Guidance</Text>
+                <Text style={styles.optionLabel}>Voice Guidance</Text>
                 <Switch
                   value={voiceGuidanceEnabled}
                   onValueChange={setVoiceGuidanceEnabled}
@@ -351,7 +388,7 @@ const DebugNavigationPanel = () => {
               {selectedScreen.hasDocumentTypeOption && (
                 <>
                   <View style={styles.optionRow}>
-                    <Text style={styles.optionLabel}>🪪 Allow ID Card</Text>
+                    <Text style={styles.optionLabel}>Allow ID Card</Text>
                     <Switch
                       value={allowIdCard}
                       onValueChange={setAllowIdCard}
@@ -360,7 +397,7 @@ const DebugNavigationPanel = () => {
                     />
                   </View>
                   <View style={styles.optionRow}>
-                    <Text style={styles.optionLabel}>🛂 Allow Passport</Text>
+                    <Text style={styles.optionLabel}>Allow Passport</Text>
                     <Switch
                       value={allowPassport}
                       onValueChange={setAllowPassport}
@@ -416,7 +453,6 @@ const DebugNavigationPanel = () => {
                     style={styles.screenButton}
                     onPress={() => selectScreen(screen)}
                   >
-                    <Text style={styles.screenIcon}>{screen.icon}</Text>
                     <Text style={styles.screenLabel}>{screen.label}</Text>
                   </TouchableOpacity>
                 ))}
@@ -433,7 +469,6 @@ const DebugNavigationPanel = () => {
                     style={styles.debugScreenButton}
                     onPress={() => selectScreen(screen)}
                   >
-                    <Text style={styles.screenIcon}>{screen.icon}</Text>
                     <Text style={styles.debugScreenLabel}>{screen.label}</Text>
                   </TouchableOpacity>
                 ))}
@@ -445,10 +480,8 @@ const DebugNavigationPanel = () => {
                 onPress={handleVideoCallTest}
                 disabled={isConnectingVideoCall}
               >
-                {isConnectingVideoCall ? (
+                {isConnectingVideoCall && (
                   <ActivityIndicator size="small" color="#4CAF50" />
-                ) : (
-                  <Text style={styles.screenIcon}>📹</Text>
                 )}
                 <Text style={styles.videoCallTestLabel}>
                   {isConnectingVideoCall ? 'Connecting...' : 'Video Call Test'}
@@ -471,14 +504,12 @@ const DebugNavigationPanel = () => {
           setAllowPassport(true);
         }}
       >
-        <Text style={styles.bugIcon}>{ICONS.BUG_REPORT}</Text>
         {isExpanded && (
           <>
-            <View style={styles.spacing} />
             <Text style={styles.toggleText}>DEBUG NAV</Text>
+            <View style={styles.spacing} />
           </>
         )}
-        <View style={styles.spacing} />
         <Text style={styles.arrow}>{isExpanded ? '▼' : '▲'}</Text>
       </TouchableOpacity>
     </View>
@@ -496,9 +527,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: '#FF5252',
-    paddingHorizontal: 12,
+    paddingHorizontal: 10,
     paddingVertical: 10,
-    borderRadius: 10,
+    borderRadius: 8,
     borderWidth: 2,
     borderColor: 'white',
     ...Platform.select({
@@ -513,9 +544,6 @@ const styles = StyleSheet.create({
       },
     }),
   },
-  bugIcon: {
-    fontSize: 24,
-  },
   spacing: {
     width: 8,
   },
@@ -527,6 +555,9 @@ const styles = StyleSheet.create({
   arrow: {
     color: 'white',
     fontSize: 20,
+    lineHeight: 20,
+    textAlignVertical: 'center',
+    includeFontPadding: false,
   },
   panel: {
     backgroundColor: 'rgba(0, 0, 0, 0.9)',
@@ -566,12 +597,6 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     marginBottom: 6,
   },
-  screenIcon: {
-    fontSize: 16,
-    marginRight: 8,
-    width: 20,
-    textAlign: 'center',
-  },
   screenLabel: {
     color: 'white',
     fontSize: 12,

package/src/Shared/Components/EIDScanner.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 import AppContext from '../Contexts/AppContext';
 import StyledButton from './StyledButton';
 import LottieView from 'lottie-react-native';
+import { getLocalizedCountryName } from '../Libs/country-display.utils';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
 import { speak, resetLastMessage } from '../Libs/tts.utils';
 import {
@@ -87,8 +88,46 @@ const EIDScanner = ({
   }, []);
   const [isScanned, setIsScanned] = React.useState(false);
   const [hasGuideShown, setHasGuideShown] = React.useState(false);
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const appContext = React.useContext(AppContext);
+
+  const formatGender = useCallback(
+    (code?: string | null) => {
+      switch (code?.toUpperCase()) {
+        case 'M':
+          return t('eidScannerScreen.genderMale', 'Male');
+        case 'F':
+          return t('eidScannerScreen.genderFemale', 'Female');
+        default:
+          return t('eidScannerScreen.genderUnspecified', 'Unspecified');
+      }
+    },
+    [t]
+  );
+
+  const formatDocumentType = useCallback(
+    (code?: string | null) => {
+      if (!code) return '';
+      const upper = code.toUpperCase();
+      if (upper.startsWith('P'))
+        return t('eidScannerScreen.docTypePassport', 'Passport');
+      if (upper.startsWith('I'))
+        return t('eidScannerScreen.docTypeID', 'ID Card');
+      if (upper.startsWith('A'))
+        return t('eidScannerScreen.docTypeResidence', 'Residence Permit');
+      if (upper.startsWith('V'))
+        return t('eidScannerScreen.docTypeVisa', 'Visa');
+      return code;
+    },
+    [t]
+  );
+
+  const formatNationality = useCallback(
+    (code?: string | null) => {
+      return getLocalizedCountryName(code, i18n.language);
+    },
+    [i18n.language]
+  );
   const [voiceGuidanceMessage, setVoiceGuidanceMessage] = useState<string>();
   const [attemptNumber, setAttemptNumber] = useState<number>(0);
 
@@ -434,106 +473,118 @@ const EIDScanner = ({
         </View>
       ) : (
         <>
-          {isScanned &&
-            documentFaceImage &&
-            documentFaceImageMimeType === 'image/jpeg' && (
-              <Image
-                source={{
-                  uri: `data:${documentFaceImageMimeType};base64,${documentFaceImage}`,
-                }}
-                style={styles.faceImage}
-              />
-            )}
-
-          {isScanned &&
-            documentFaceImage &&
-            // TODO Add support for jp2 images
-            documentFaceImageMimeType === 'image/jp2' && (
-              <Text style={styles.mainText}>
-                {t('eidScannerScreen.imageCannotBeShown')}
-              </Text>
-            )}
-
-          {isScanned && !documentFaceImage && (
-            <Text style={styles.mainText}>
-              {t('eidScannerScreen.faceImageNotFound')}
-            </Text>
-          )}
-
-          {isScanned && documentMRZInfo && (
-            <View style={styles.mrzInfo}>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.documentCode')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getDocumentCode()}
-                </Text>
-              </View>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.nationality')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getNationality()}
-                </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.documentNumber')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getDocumentNumber()}
-                </Text>
-              </View>
-              <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.birthDate')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {formatDate(documentMRZInfo.getDateOfBirth())}
-                </Text>
-              </View>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.gender')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {documentMRZInfo.getGender().getStrCode()}
-                </Text>
-              </View>
-              <View style={styles.mrzInfoItem}>
-                <Text style={styles.mrzInfoLabel}>
-                  {t('eidScannerScreen.expirationDate')}:
-                </Text>
-                <Text style={styles.mrzInfoText}>
-                  {formatDate(documentMRZInfo.getDateOfExpiry())}
-                </Text>
+          {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>
+                  </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>
+                  </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>
+                </View>
+              )}
             </View>
           )}
 
@@ -589,6 +640,14 @@ const EIDScanner = ({
                 </Text>
               )))}
 
+          {hasNfc && isEnabled && !isScanning && !isScanned && (
+            <View style={styles.buttonsContainer}>
+              <StyledButton mode="contained" onPress={readNFC}>
+                {t('eidScannerScreen.startScanning')}
+              </StyledButton>
+            </View>
+          )}
+
           {hasNfc && isEnabled && isScanned && (
             <View style={styles.buttonsContainer}>
               <StyledButton
@@ -688,31 +747,83 @@ const styles = StyleSheet.create({
     color: 'black',
     textAlign: 'center',
   },
-  faceImage: {
-    width: 150,
-    height: 150,
-    borderRadius: 150,
-    borderColor: 'lightgray',
+  resultCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 16,
+    gap: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 3,
     borderWidth: 1,
-    alignSelf: 'center',
+    borderColor: '#f0f0f0',
+  },
+  resultHeader: {
+    flexDirection: 'row',
+    gap: 14,
+    alignItems: 'flex-start',
+  },
+  resultHeaderInfo: {
+    flex: 1,
+    gap: 4,
+    justifyContent: 'center',
+  },
+  fullName: {
+    fontSize: 17,
+    fontWeight: '700',
+    color: '#111',
+    letterSpacing: 0.2,
+  },
+  subInfo: {
+    fontSize: 13,
+    color: '#666',
+    fontWeight: '500',
+  },
+  faceImage: {
+    width: 90,
+    height: 115,
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  faceImagePlaceholder: {
+    width: 90,
+    height: 115,
+    borderRadius: 10,
+    backgroundColor: '#f5f5f5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  faceImagePlaceholderText: {
+    fontSize: 32,
+    color: '#ccc',
   },
   mrzInfo: {
     flexDirection: 'column',
     width: '100%',
+    gap: 2,
   },
   mrzInfoItem: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    borderBottomColor: 'lightgray',
+    alignItems: 'center',
+    paddingVertical: 8,
+    borderBottomColor: '#f0f0f0',
     borderBottomWidth: 1,
-    paddingVertical: 5,
   },
   mrzInfoLabel: {
-    color: 'black',
-    fontWeight: 'bold',
+    color: '#888',
+    fontSize: 13,
+    fontWeight: '500',
   },
   mrzInfoText: {
-    color: 'black',
+    color: '#111',
+    fontSize: 13,
+    fontWeight: '600',
+    textAlign: 'right',
+    flexShrink: 1,
+    marginLeft: 8,
   },
   guide: {
     flex: 1,