@trustchex/react-native-sdk 1.334.0 → 1.354.0

package/lib/module/Screens/Dynamic/ContractAcceptanceScreen.js

@@ -2,6 +2,7 @@
 
 import React, { useState, useContext, useCallback, useEffect, useRef } from 'react';
 import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import WebView from 'react-native-webview';
 import NavigationManager from "../../Shared/Components/NavigationManager.js";
 import AppContext from "../../Shared/Contexts/AppContext.js";
@@ -22,6 +23,7 @@ const ContractAcceptanceScreen = () => {
   const {
     t
   } = useTranslation();
+  const insets = useSafeAreaInsets();
 
   // Track screen view and exit
   useScreenTracking('contract_acceptance');
@@ -96,7 +98,9 @@ const ContractAcceptanceScreen = () => {
       },
       onScroll: hasReachedEnd
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.footer,
+      style: [styles.footer, {
+        paddingBottom: insets.bottom
+      }],
       children: [/*#__PURE__*/_jsx(Text, {
         style: styles.footerText,
         children: t('termsOfUseAndDataPrivacyScreen.footerText')
@@ -158,7 +162,9 @@ const styles = StyleSheet.create({
   footer: {
     flex: 0,
     justifyContent: 'flex-end',
-    padding: 10
+    paddingTop: 10,
+    paddingHorizontal: 20,
+    paddingBottom: 10
   },
   footerText: {
     textAlign: 'center',

package/lib/module/Screens/Dynamic/IdentityDocumentEIDScanningScreen.js

@@ -2,6 +2,7 @@
 
 import React, { useContext, useEffect, useState } from 'react';
 import { Alert, SafeAreaView, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import EIDScanner from "../../Shared/Components/EIDScanner.js";
 import NavigationManager from "../../Shared/Components/NavigationManager.js";
 import AppContext from "../../Shared/Contexts/AppContext.js";
@@ -12,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IdentityDocumentEIDScanningScreen = () => {
   const appContext = useContext(AppContext);
   const navigationManagerRef = React.useRef(null);
+  const insets = useSafeAreaInsets();
   const [idFrontSideData, setIDFrontSideData] = useState(null);
   const [idBackSideData, setIDBackSideData] = useState(null);
   const [passportData, setPassportData] = useState();
@@ -131,7 +133,9 @@ const IdentityDocumentEIDScanningScreen = () => {
       },
       showDebugImages: false
     }), /*#__PURE__*/_jsx(View, {
-      style: styles.footer,
+      style: [styles.footer, {
+        bottom: insets.bottom
+      }],
       children: /*#__PURE__*/_jsx(NavigationManager, {
         canSkipStep: !isNFCSupported && !!appContext.identificationInfo.scannedDocument?.faceImage && !!appContext.identificationInfo.scannedDocument?.frontImage && !!appContext.identificationInfo.scannedDocument?.mrzText,
         ref: navigationManagerRef

package/lib/module/Screens/Dynamic/IdentityDocumentScanningScreen.js

@@ -2,6 +2,7 @@
 
 import React, { useContext, useEffect, useState } from 'react';
 import { Alert, SafeAreaView, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import IdentityDocumentCamera from "../../Shared/Components/IdentityDocumentCamera.js";
 import AppContext from "../../Shared/Contexts/AppContext.js";
 import NavigationManager from "../../Shared/Components/NavigationManager.js";
@@ -17,6 +18,7 @@ const IdentityDocumentScanningScreen = () => {
   const {
     t
   } = useTranslation();
+  const insets = useSafeAreaInsets();
   const [allowedDocumentTypes, setAllowedDocumentTypes] = useState(null);
   const [allowedCountries, setAllowedCountries] = useState(null);
 
@@ -96,7 +98,9 @@ const IdentityDocumentScanningScreen = () => {
       },
       showDebugImages: false
     }), /*#__PURE__*/_jsx(View, {
-      style: styles.footer,
+      style: [styles.footer, {
+        bottom: insets.bottom
+      }],
       children: /*#__PURE__*/_jsx(NavigationManager, {
         ref: navigationManagerRef
       })

package/lib/module/Screens/Dynamic/LivenessDetectionScreen.js

@@ -4,6 +4,8 @@ import Svg, { Rect as SvgRect, Circle, Mask } from 'react-native-svg';
 import { useNavigation } from '@react-navigation/native';
 import React, { useState, useReducer, useContext, useEffect, useCallback } from 'react';
 import { Dimensions, Text, View, StyleSheet, Platform, Vibration } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import NativeCircularProgress from "../../Shared/Components/NativeCircularProgress.js";
 import FaceCamera from "../../Shared/Components/FaceCamera.js";
 import NavigationManager from "../../Shared/Components/NavigationManager.js";
@@ -38,6 +40,7 @@ const LivenessDetectionScreen = () => {
     t
   } = useTranslation();
   const [isRecording, setIsRecording] = useState(false);
+  const insets = useSafeAreaInsets();
 
   // Track screen view and exit
   useScreenTracking('liveness_detection');
@@ -399,7 +402,7 @@ const LivenessDetectionScreen = () => {
     }
   }, [state.processComplete, state.videoPath, state.instructionList, appContext.identificationInfo, navigation, instructions]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [!hasGuideShown ? /*#__PURE__*/_jsxs(View, {
+    children: [!hasGuideShown ? /*#__PURE__*/_jsxs(SafeAreaView, {
       style: styles.guide,
       children: [/*#__PURE__*/_jsx(LottieView, {
         source: require('../../Shared/Animations/face-scan.json'),
@@ -427,12 +430,17 @@ const LivenessDetectionScreen = () => {
           style: styles.guideText,
           children: ["\u2022 ", t('livenessDetectionScreen.guidePoint4')]
         })]
-      }), /*#__PURE__*/_jsx(StyledButton, {
-        mode: "contained",
-        onPress: () => {
-          setHasGuideShown(true);
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          paddingBottom: insets.bottom
         },
-        children: t('general.letsGo')
+        children: /*#__PURE__*/_jsx(StyledButton, {
+          mode: "contained",
+          onPress: () => {
+            setHasGuideShown(true);
+          },
+          children: t('general.letsGo')
+        })
       })]
     }) : /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(FaceCamera, {
@@ -442,11 +450,11 @@ const LivenessDetectionScreen = () => {
       }), /*#__PURE__*/_jsx(NativeCircularProgress, {
         style: styles.circularProgress,
         size: PREVIEW_SIZE,
-        width: 10,
-        backgroundWidth: 5,
+        width: 8,
+        backgroundWidth: 8,
         fill: state.progressFill,
         tintColor: appContext.branding.primaryColor,
-        backgroundColor: "white"
+        backgroundColor: "rgba(255, 255, 255, 0.3)"
       }), state.brightnessLow && /*#__PURE__*/_jsx(LottieView, {
         source: require('../../Shared/Animations/light.json'),
         style: styles.animation,
@@ -461,9 +469,9 @@ const LivenessDetectionScreen = () => {
             height: "100%",
             fill: "white"
           }), /*#__PURE__*/_jsx(Circle, {
-            cx: "50%",
-            cy: "50%",
-            r: "25%",
+            cx: windowWidth / 2,
+            cy: windowHeight / 2,
+            r: PREVIEW_SIZE / 2,
             fill: "black"
           })]
         }), /*#__PURE__*/_jsx(SvgRect, {
@@ -473,7 +481,9 @@ const LivenessDetectionScreen = () => {
           mask: "url(#hole-mask)"
         })]
       }), /*#__PURE__*/_jsx(View, {
-        style: styles.instructionsContainerTop,
+        style: [styles.instructionsContainerTop, {
+          paddingTop: insets.top
+        }],
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.instructions,
           children: (() => {
@@ -491,14 +501,18 @@ const LivenessDetectionScreen = () => {
           })()
         })
       }), /*#__PURE__*/_jsx(View, {
-        style: styles.instructionsContainerBottom,
+        style: [styles.instructionsContainerBottom, {
+          paddingBottom: insets.bottom
+        }],
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.action,
           children: state.faceDetected && !state.faceTooBig && !state.multipleFacesDetected && !state.brightnessLow && instructions[state.currentInstruction]?.instruction
         })
       })]
     }), /*#__PURE__*/_jsx(View, {
-      style: styles.footer,
+      style: [styles.footer, {
+        bottom: insets.bottom
+      }],
       children: /*#__PURE__*/_jsx(NavigationManager, {
         ref: navigationManagerRef
       })

package/lib/module/Screens/Static/OTPVerificationScreen.js

@@ -0,0 +1,285 @@
+"use strict";
+
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { SafeAreaView, Text, StyleSheet, Alert, View, Image, Dimensions, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useRoute } from '@react-navigation/native';
+import AppContext from "../../Shared/Contexts/AppContext.js";
+import httpClient, { BadRequestError, NotFoundError, TooManyRequestsError } from "../../Shared/Libs/http-client.js";
+import { useTranslation } from 'react-i18next';
+import LanguageSelector from "../../Shared/Components/LanguageSelector.js";
+import NavigationManager from "../../Shared/Components/NavigationManager.js";
+import StyledButton from "../../Shared/Components/StyledButton.js";
+import StyledTextInput from "../../Shared/Components/StyledTextInput.js";
+import { useTheme } from "../../Shared/Contexts/ThemeContext.js";
+import LottieView from 'lottie-react-native';
+import { getSimulatedDemoData } from "../../Shared/Libs/demo.utils.js";
+import { trackError, useScreenTracking } from "../../Shared/Libs/analytics.utils.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const OTPVerificationScreen = () => {
+  const route = useRoute();
+  const sessionId = route.params?.sessionId;
+  const [code, setCode] = useState('');
+  const [isSendAgainEnabled, setIsSendAgainEnabled] = useState(false);
+  const [isCodeGettingVerified, setIsCodeGettingVerified] = useState(false);
+  const appContext = useContext(AppContext);
+  const {
+    t
+  } = useTranslation();
+  const navigationManagerRef = useRef(null);
+  const initialized = useRef(false);
+  const insets = useSafeAreaInsets();
+  const theme = useTheme();
+  const primaryColor = theme.colors.primary;
+  useScreenTracking('otp_verification');
+
+  // Guard: If sessionId is not provided, show error
+  if (!sessionId) {
+    return /*#__PURE__*/_jsx(SafeAreaView, {
+      style: [styles.container, {
+        backgroundColor: theme.colors.background
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.errorText, {
+          color: theme.colors.error
+        }],
+        children: t('general.sessionNotFound')
+      })
+    });
+  }
+  const apiUrl = `${appContext.baseUrl}/api/app/mobile`;
+  const sendVerificationCode = useCallback(async sessionId => {
+    try {
+      await httpClient.post(`${apiUrl}/verification-sessions/${sessionId}`, {}, appContext.isDemoSession ? getSimulatedDemoData('SEND_VERIFICATION_CODE') : undefined);
+      return true;
+    } catch (error) {
+      if (error instanceof NotFoundError) {
+        Alert.alert(t('general.error'), t('verificationSessionCheckScreen.noVerificationSessionFound'));
+      } else if (error instanceof TooManyRequestsError) {
+        return true;
+      } else {
+        trackError('VERIFICATION_CODE_SEND_FAILED', 'Failed to send verification code', 'otp_verification', 'high', {
+          recoverable: true,
+          userAction: 'send_verification_code'
+        });
+        Alert.alert(t('general.error'), t('verificationSessionCheckScreen.cannotSendVerificationCode'));
+      }
+    }
+    return false;
+  }, [apiUrl, appContext.isDemoSession, t]);
+  const getVerifiedSession = useCallback(async (sessionId, verificationCode) => {
+    try {
+      const response = await httpClient.post(`${apiUrl}/verification-sessions/${sessionId}`, {
+        code: verificationCode
+      }, appContext.isDemoSession ? getSimulatedDemoData('GET_VERIFIED_SESSION', {
+        code: verificationCode
+      }) : undefined);
+      return response;
+    } catch (error) {
+      if (error instanceof NotFoundError) {
+        Alert.alert(t('general.error'), t('verificationSessionCheckScreen.noVerificationSessionFound'));
+      } else if (error instanceof BadRequestError) {
+        // Wrong OTP code - expected user behavior, not actionable
+      } else {
+        trackError('VERIFIED_SESSION_CHECK_ERROR', error instanceof Error ? error.message : 'Unknown error', 'otp_verification', 'high', {
+          recoverable: false,
+          userAction: 'check_verified_session'
+        });
+      }
+    }
+  }, [apiUrl, appContext.isDemoSession, t]);
+  const sendOTPCode = useCallback(async sessionId => {
+    if (!sessionId) {
+      return false;
+    }
+    const isSent = await sendVerificationCode(sessionId);
+    if (!isSent) {
+      return false;
+    }
+    setIsSendAgainEnabled(false);
+    setTimeout(() => {
+      setIsSendAgainEnabled(true);
+    }, 3 * 60 * 1000);
+    return true;
+  }, [sendVerificationCode]);
+  useEffect(() => {
+    if (!initialized.current && sessionId) {
+      initialized.current = true;
+      sendOTPCode(sessionId);
+    }
+  }, [sessionId, sendOTPCode]);
+  return /*#__PURE__*/_jsx(SafeAreaView, {
+    style: styles.safeAreaContainer,
+    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      style: styles.keyboardAvoidingView,
+      behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+      keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : 20,
+      children: /*#__PURE__*/_jsxs(ScrollView, {
+        style: styles.container,
+        contentContainerStyle: styles.scrollContainer,
+        keyboardShouldPersistTaps: "handled",
+        showsVerticalScrollIndicator: false,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.mainContent,
+          children: [/*#__PURE__*/_jsx(LanguageSelector, {}), /*#__PURE__*/_jsx(View, {
+            style: styles.mainHeader,
+            children: appContext.branding.logoUrl ? /*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: appContext.branding.logoUrl
+              },
+              style: styles.mainLogo
+            }) : /*#__PURE__*/_jsx(Image, {
+              source: require('../../Shared/Assets/trustchex-logo-black.png'),
+              style: styles.trustchexLogo
+            })
+          }), isCodeGettingVerified ? /*#__PURE__*/_jsx(LottieView, {
+            source: require('../../Shared/Animations/loading.json'),
+            style: styles.loadingAnimation,
+            autoPlay: true,
+            loop: true,
+            resizeMode: "cover"
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.mainText,
+              children: t('verificationSessionCheckScreen.codeText')
+            }), /*#__PURE__*/_jsx(StyledTextInput, {
+              autoFocus: true,
+              placeholder: "",
+              borderColor: primaryColor,
+              focusedBorderColor: primaryColor,
+              inputStyle: styles.otpCodeTextInput,
+              keyboardType: "number-pad",
+              textContentType: "oneTimeCode",
+              autoComplete: "sms-otp",
+              maxLength: 6,
+              onChangeText: text => {
+                const numericText = text.replace(/[^0-9]/g, '');
+                if (numericText.length <= 6) {
+                  setCode(numericText);
+                  if (numericText.length === 6) {
+                    (async () => {
+                      setIsCodeGettingVerified(true);
+                      const verifiedSession = await getVerifiedSession(sessionId, numericText);
+                      if (verifiedSession?.identificationId) {
+                        appContext.identificationInfo.identificationId = verifiedSession?.identificationId;
+                        // Update workflow steps from verified session if available
+                        if (verifiedSession.workflowSteps) {
+                          appContext.workflowSteps = verifiedSession.workflowSteps;
+                        }
+                        setCode('');
+                        navigationManagerRef.current?.navigateToNextStep();
+                      } else {
+                        appContext.onError?.('Invalid OTP code');
+                        Alert.alert(t('general.error'), t('verificationSessionCheckScreen.codeError'));
+                        setCode('');
+                        setIsCodeGettingVerified(false);
+                      }
+                    })();
+                  }
+                }
+              },
+              value: code
+            }), /*#__PURE__*/_jsx(StyledButton, {
+              mode: "contained",
+              disabled: !isSendAgainEnabled,
+              onPress: () => {
+                sendOTPCode(sessionId);
+              },
+              children: t('verificationSessionCheckScreen.sendCodeAgain')
+            })]
+          })]
+        }), appContext.branding.logoUrl && /*#__PURE__*/_jsxs(View, {
+          style: [styles.footer, {
+            bottom: insets.bottom + 15
+          }],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.mainText,
+            children: "Powered By"
+          }), /*#__PURE__*/_jsx(Image, {
+            source: require('../../Shared/Assets/trustchex-logo-black.png'),
+            style: styles.poweredByLogo
+          })]
+        }), /*#__PURE__*/_jsx(NavigationManager, {
+          ref: navigationManagerRef
+        })]
+      })
+    })
+  });
+};
+const styles = StyleSheet.create({
+  safeAreaContainer: {
+    flex: 1,
+    backgroundColor: 'white'
+  },
+  keyboardAvoidingView: {
+    flex: 1
+  },
+  container: {
+    flex: 1
+  },
+  scrollContainer: {
+    flexGrow: 1,
+    padding: 20,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  loadingAnimation: {
+    width: '100%',
+    height: '100%',
+    maxHeight: 200
+  },
+  mainHeader: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  mainContent: {
+    flex: 1,
+    display: 'flex',
+    gap: 20,
+    justifyContent: 'center',
+    width: '100%',
+    maxWidth: 400
+  },
+  mainText: {
+    color: 'black',
+    textAlign: 'center'
+  },
+  mainLogo: {
+    width: Dimensions.get('window').width - 40,
+    height: Dimensions.get('window').width / 4,
+    maxWidth: 300,
+    maxHeight: 300,
+    resizeMode: 'contain'
+  },
+  trustchexLogo: {
+    width: 300,
+    height: 75,
+    resizeMode: 'contain'
+  },
+  poweredByLogo: {
+    width: 120,
+    height: 30,
+    resizeMode: 'contain'
+  },
+  footer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute'
+  },
+  otpCodeTextInput: {
+    fontWeight: '800',
+    fontSize: 28,
+    textAlign: 'center',
+    letterSpacing: 8
+  },
+  errorText: {
+    fontSize: 16,
+    textAlign: 'center',
+    padding: 20
+  }
+});
+export default OTPVerificationScreen;

package/lib/module/Screens/Static/ResultScreen.js

@@ -2,6 +2,7 @@
 
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Alert, Image, Platform, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import AppContext from "../../Shared/Contexts/AppContext.js";
 import httpClient from "../../Shared/Libs/http-client.js";
 import RNFS from 'react-native-fs';
@@ -30,9 +31,37 @@ const ResultScreen = () => {
   const {
     t
   } = useTranslation();
+  const insets = useSafeAreaInsets();
 
   // Track screen view and exit
   useScreenTracking('result_screen');
+  const formatDate = useCallback(dateStr => {
+    if (!dateStr) return '';
+    try {
+      // Check if it's YYMMDD format (6 digits)
+      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 apiUrl = useMemo(() => `${appContext.baseUrl}/api/app/mobile`, [appContext.baseUrl]);
   useEffect(() => {
     if (appContext.isDemoSession) {
@@ -414,7 +443,7 @@ const ResultScreen = () => {
                     children: [t('eidScannerScreen.birthDate'), ":"]
                   }), /*#__PURE__*/_jsx(Text, {
                     style: styles.mrzInfoText,
-                    children: appContext.identificationInfo.scannedDocument.mrzFields?.birthDate
+                    children: formatDate(appContext.identificationInfo.scannedDocument.mrzFields?.birthDate)
                   })]
                 }), /*#__PURE__*/_jsxs(View, {
                   style: styles.mrzInfoItem,
@@ -432,18 +461,18 @@ const ResultScreen = () => {
                     children: [t('eidScannerScreen.expirationDate'), ":"]
                   }), /*#__PURE__*/_jsx(Text, {
                     style: styles.mrzInfoText,
-                    children: appContext.identificationInfo.scannedDocument.mrzFields?.expirationDate
-                  })]
-                }), /*#__PURE__*/_jsxs(View, {
-                  style: styles.mrzInfoItem,
-                  children: [/*#__PURE__*/_jsxs(Text, {
-                    style: styles.mrzInfoLabel,
-                    children: [t('eidScannerScreen.mrzText'), ":"]
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: styles.mrzInfoText,
-                    children: appContext.identificationInfo.scannedDocument.mrzText
+                    children: formatDate(appContext.identificationInfo.scannedDocument.mrzFields?.expirationDate)
                   })]
                 })]
+              }), appContext.identificationInfo.scannedDocument.mrzText && /*#__PURE__*/_jsxs(View, {
+                style: styles.mrzTextContainer,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.mrzTextLabel,
+                  children: t('eidScannerScreen.mrzText')
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.mrzTextValue,
+                  children: appContext.identificationInfo.scannedDocument.mrzText
+                })]
               }), /*#__PURE__*/_jsx(Text, {
                 style: styles.sectionText,
                 children: t('resultScreen.demoImages')
@@ -547,13 +576,18 @@ const ResultScreen = () => {
               })]
             })]
           })
-        }), /*#__PURE__*/_jsx(StyledButton, {
-          mode: "contained",
-          onPress: () => {
-            appContext.onCompleted?.();
-            navigationManagerRef.current?.reset();
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            paddingBottom: insets.bottom
           },
-          children: t('resultScreen.demoStartOver')
+          children: /*#__PURE__*/_jsx(StyledButton, {
+            mode: "contained",
+            onPress: () => {
+              appContext.onCompleted?.();
+              navigationManagerRef.current?.reset();
+            },
+            children: t('resultScreen.demoStartOver')
+          })
         })]
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(LottieView, {
@@ -582,9 +616,11 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     display: 'flex',
-    padding: 20,
+    paddingVertical: 20,
+    paddingHorizontal: 10,
     justifyContent: 'center',
-    gap: 20
+    gap: 20,
+    backgroundColor: 'white'
   },
   sectionAnimation: {
     width: 192,
@@ -627,18 +663,20 @@ const styles = StyleSheet.create({
   image: {
     width: 100,
     height: 100,
-    objectFit: 'contain'
+    objectFit: 'contain',
+    borderRadius: 8
   },
   imageItem: {
     display: 'flex',
     flexDirection: 'column',
-    gap: 10,
+    gap: 8,
     alignItems: 'center'
   },
   imageContainer: {
     display: 'flex',
     flexDirection: 'row',
-    gap: 10
+    gap: 10,
+    paddingVertical: 8
   },
   imageText: {
     fontSize: 10,
@@ -648,14 +686,19 @@ const styles = StyleSheet.create({
   },
   mrzInfo: {
     flexDirection: 'column',
-    width: '100%'
+    width: '100%',
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 8,
+    overflow: 'hidden'
   },
   mrzInfoItem: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    borderBottomColor: 'lightgray',
+    borderBottomColor: '#D1D5DB',
     borderBottomWidth: 1,
-    paddingVertical: 5
+    paddingVertical: 8,
+    paddingHorizontal: 12
   },
   mrzInfoLabel: {
     color: 'black',
@@ -664,7 +707,28 @@ const styles = StyleSheet.create({
   },
   mrzInfoText: {
     color: 'black',
-    fontSize: 10
+    fontSize: 10,
+    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace'
+  },
+  mrzTextContainer: {
+    padding: 12,
+    backgroundColor: '#F3F4F6',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#D1D5DB'
+  },
+  mrzTextLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#6B7280',
+    marginBottom: 8
+  },
+  mrzTextValue: {
+    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+    fontSize: 10,
+    letterSpacing: 1,
+    lineHeight: 14,
+    color: '#1F2937'
   },
   trustchexLogo: {
     width: 150,