@trustchex/react-native-sdk 1.161.0

package/src/Screens/Static/ResultScreen.tsx

@@ -0,0 +1,877 @@
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import {
+  Alert,
+  Image,
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import AppContext from '../../Shared/Contexts/AppContext';
+import httpClient from '../../Shared/Libs/http-client';
+import RNFS from 'react-native-fs';
+import NativeProgressBar from '../../Shared/Components/NativeProgressBar';
+import LottieView from 'lottie-react-native';
+import type {
+  IdentificationInfo,
+  LivenessDetection,
+  ScannedIdentityDocument,
+} from '../../Shared/Types/identificationInfo';
+import { runWithRetry } from '../../Shared/Libs/promise.utils';
+import NavigationManager, {
+  type NavigationManagerRef,
+} from '../../Shared/Components/NavigationManager';
+import mrzUtils from '../../Shared/Libs/mrz.utils';
+import { useTranslation } from 'react-i18next';
+import { Video as VideoCompressor } from 'react-native-compressor';
+import { encryptWithAes, getSessionKey } from '../../Shared/Libs/crypto.utils';
+import Video from 'react-native-video';
+import { Button } from 'react-native-paper';
+import NativeDeviceInfo from '../../Shared/Libs/native-device-info.utils';
+
+const ResultScreen = () => {
+  const appContext = useContext(AppContext);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
+  const [apiUrl, setApiUrl] = useState<string>(
+    `${appContext.baseUrl}/api/app/mobile`
+  );
+  const [shouldShowDemoData, setShouldShowDemoData] = useState(false);
+  const [deviceIdentifier, setDeviceIdentifier] = useState<string>('');
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (appContext.baseUrl) {
+      setApiUrl(`${appContext.baseUrl}/api/app/mobile`);
+    }
+  }, [appContext.baseUrl]);
+
+  useEffect(() => {
+    if (appContext.isDemoSession) {
+      setShouldShowDemoData(true);
+      // Generate device identifier for demo
+      NativeDeviceInfo.generateHumanReadableIdentifier().then(
+        setDeviceIdentifier
+      );
+    }
+  }, [
+    appContext.identificationInfo.identificationId,
+    appContext.isDemoSession,
+  ]);
+
+  const createIdentification = useCallback(
+    async (identificationId: string) => {
+      await httpClient.post(
+        `${apiUrl}/identifications/${identificationId}`,
+        null
+      );
+    },
+    [apiUrl]
+  );
+
+  const finishIdentification = useCallback(
+    async (identificationId: string, sessionKey: string) => {
+      const { encryptedData, nonce } = encryptWithAes(
+        JSON.stringify({
+          status: 'SUBMITTED',
+        }),
+        sessionKey
+      );
+      await httpClient.put(`${apiUrl}/identifications/${identificationId}`, {
+        encryptedData,
+        nonce,
+      });
+    },
+    [apiUrl]
+  );
+
+  const getGenderEnumType = useCallback((gender?: string | null) => {
+    switch (gender?.toLowerCase()) {
+      case 'm':
+      case 'male':
+        return 'MALE';
+
+      case 'f':
+      case 'female':
+        return 'FEMALE';
+
+      case 'x':
+      case 'unspecified':
+        return 'UNSPECIFIED';
+
+      default:
+        return 'UNKNOWN';
+    }
+  }, []);
+
+  const submitIdentificationConsent = useCallback(
+    async (identificationId: string, sessionKey: string) => {
+      const { encryptedData, nonce } = encryptWithAes(
+        JSON.stringify(appContext.identificationInfo.consent),
+        sessionKey
+      );
+      await httpClient.post(
+        `${apiUrl}/identifications/${identificationId}/consents`,
+        {
+          encryptedData,
+          nonce,
+        }
+      );
+    },
+    [apiUrl, appContext.identificationInfo.consent]
+  );
+
+  const submitIdentificationDocument = useCallback(
+    async (
+      identificationId: string,
+      scannedDocument: ScannedIdentityDocument,
+      sessionKey: string
+    ) => {
+      if (!scannedDocument.mrzFields) {
+        throw new Error('MRZ fields not found');
+      }
+
+      const identificationDocument = {
+        type: scannedDocument.mrzFields.documentCode,
+        name: scannedDocument.mrzFields.firstName,
+        surname: scannedDocument.mrzFields.lastName,
+        gender: getGenderEnumType(scannedDocument.mrzFields.sex),
+        number: scannedDocument.mrzFields.documentNumber,
+        country: scannedDocument.mrzFields.issuingState,
+        barcodeValue: scannedDocument.barcodeValue,
+        personalNumber:
+          scannedDocument.mrzFields.personalNumber ||
+          scannedDocument.mrzFields.optional1,
+        issueDate: mrzUtils.convertMRZDateToISODate(
+          scannedDocument.mrzFields.issueDate
+        ),
+        birthDate: mrzUtils.convertMRZDateToISODate(
+          scannedDocument.mrzFields.birthDate
+        ),
+        expiryDate: mrzUtils.convertMRZDateToISODate(
+          scannedDocument.mrzFields.expirationDate
+        ),
+        dataSource: scannedDocument.dataSource,
+        mrzText: scannedDocument.mrzText,
+      };
+
+      const { encryptedData, nonce } = encryptWithAes(
+        JSON.stringify(identificationDocument),
+        sessionKey
+      );
+      await httpClient.post(
+        `${apiUrl}/identifications/${identificationId}/documents`,
+        {
+          encryptedData,
+          nonce,
+        }
+      );
+    },
+    [apiUrl, getGenderEnumType]
+  );
+
+  const uploadIdentificationMedia = useCallback(
+    async (
+      identificationId: string,
+      scannedIdentityDocument?: ScannedIdentityDocument,
+      livenessDetection?: LivenessDetection
+    ) => {
+      const uploadFileOptions: RNFS.UploadFileOptions = {
+        toUrl: `${apiUrl}/identifications/${identificationId}/media`,
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+        },
+        files: [],
+        progress: (res) => {
+          setProgress(
+            40 + (res.totalBytesSent / res.totalBytesExpectedToSend) * 50
+          );
+        },
+      } satisfies RNFS.UploadFileOptions;
+
+      const frontImage = scannedIdentityDocument?.frontImage;
+      if (frontImage && frontImage !== '') {
+        await RNFS.writeFile(
+          decodeURIComponent(
+            `${RNFS.TemporaryDirectoryPath}/DOCUMENT_FRONT_IMAGE.jpg`
+          ),
+          frontImage,
+          'base64'
+        );
+        uploadFileOptions.files.push({
+          name: 'files',
+          filename: 'DOCUMENT_FRONT_IMAGE.jpg',
+          filepath: decodeURIComponent(
+            `${RNFS.TemporaryDirectoryPath}/DOCUMENT_FRONT_IMAGE.jpg`
+          ),
+          filetype: 'image/jpeg',
+        });
+      }
+
+      const backImage = scannedIdentityDocument?.backImage;
+      if (backImage && backImage !== '') {
+        await RNFS.writeFile(
+          decodeURIComponent(
+            `${RNFS.TemporaryDirectoryPath}/DOCUMENT_BACK_IMAGE.jpg`
+          ),
+          backImage,
+          'base64'
+        );
+        uploadFileOptions.files.push({
+          name: 'files',
+          filename: 'DOCUMENT_BACK_IMAGE.jpg',
+          filepath: decodeURIComponent(
+            `${RNFS.TemporaryDirectoryPath}/DOCUMENT_BACK_IMAGE.jpg`
+          ),
+          filetype: 'image/jpeg',
+        });
+      }
+
+      const faceImage = scannedIdentityDocument?.faceImage;
+      if (faceImage && faceImage !== '') {
+        scannedIdentityDocument.faceImageMimeType ||= 'image/jpeg';
+        const extension =
+          scannedIdentityDocument.faceImageMimeType === 'image/jp2'
+            ? 'jp2'
+            : 'jpg';
+        await RNFS.writeFile(
+          decodeURIComponent(
+            `${RNFS.TemporaryDirectoryPath}/FACE_IMAGE.${extension}`
+          ),
+          faceImage,
+          'base64'
+        );
+        uploadFileOptions.files.push({
+          name: 'files',
+          filename: `FACE_IMAGE.${extension}`,
+          filepath: decodeURIComponent(
+            `${RNFS.TemporaryDirectoryPath}/FACE_IMAGE.${extension}`
+          ),
+          filetype: scannedIdentityDocument.faceImageMimeType,
+        });
+      }
+
+      const secondaryFaceImage = scannedIdentityDocument?.secondaryFaceImage;
+      if (secondaryFaceImage && secondaryFaceImage !== '') {
+        await RNFS.writeFile(
+          decodeURIComponent(
+            `${RNFS.TemporaryDirectoryPath}/DOCUMENT_SECONDARY_FACE_IMAGE.jpg`
+          ),
+          secondaryFaceImage,
+          'base64'
+        );
+        uploadFileOptions.files.push({
+          name: 'files',
+          filename: 'DOCUMENT_SECONDARY_FACE_IMAGE.jpg',
+          filepath: decodeURIComponent(
+            `${RNFS.TemporaryDirectoryPath}/DOCUMENT_SECONDARY_FACE_IMAGE.jpg`
+          ),
+          filetype: 'image/jpeg',
+        });
+      }
+
+      const hologramImage = scannedIdentityDocument?.hologramImage;
+      if (hologramImage && hologramImage !== '') {
+        await RNFS.writeFile(
+          decodeURIComponent(
+            `${RNFS.TemporaryDirectoryPath}/DOCUMENT_HOLOGRAM_IMAGE.jpg`
+          ),
+          hologramImage,
+          'base64'
+        );
+        uploadFileOptions.files.push({
+          name: 'files',
+          filename: 'DOCUMENT_HOLOGRAM_IMAGE.jpg',
+          filepath: decodeURIComponent(
+            `${RNFS.TemporaryDirectoryPath}/DOCUMENT_HOLOGRAM_IMAGE.jpg`
+          ),
+          filetype: 'image/jpeg',
+        });
+      }
+
+      if (livenessDetection) {
+        for (const instruction of livenessDetection.instructions) {
+          if (instruction.photo !== '') {
+            await RNFS.writeFile(
+              decodeURIComponent(
+                `${RNFS.TemporaryDirectoryPath}/LIVENESS_${instruction.instruction}_IMAGE.jpg`
+              ),
+              instruction.photo,
+              'base64'
+            );
+            uploadFileOptions.files.push({
+              name: 'files',
+              filename: `LIVENESS_${instruction.instruction}_IMAGE.jpg`,
+              filepath: decodeURIComponent(
+                `${RNFS.TemporaryDirectoryPath}/LIVENESS_${instruction.instruction}_IMAGE.jpg`
+              ),
+              filetype: 'image/jpeg',
+            });
+            if (instruction.instruction === 'LOOK_STRAIGHT_AND_BLINK') {
+              uploadFileOptions.files.push({
+                name: 'files',
+                filename: 'SELFIE_IMAGE.jpg',
+                filepath: decodeURIComponent(
+                  `${RNFS.TemporaryDirectoryPath}/LIVENESS_${instruction.instruction}_IMAGE.jpg`
+                ),
+                filetype: 'image/jpeg',
+              });
+            }
+          }
+        }
+
+        const livenessVideoPath = livenessDetection.videoPath;
+        if (livenessVideoPath) {
+          let videoFilePath;
+          if (Platform.OS === 'ios') {
+            await RNFS.mkdir(
+              `${RNFS.TemporaryDirectoryPath}/${new Date().getTime()}`
+            );
+            videoFilePath = `${RNFS.TemporaryDirectoryPath}/${new Date().getTime()}/LIVENESS_VIDEO.mp4`;
+          } else {
+            videoFilePath = `${RNFS.TemporaryDirectoryPath}/LIVENESS_VIDEO.mp4`;
+          }
+          await RNFS.copyFile(livenessVideoPath, videoFilePath);
+          await VideoCompressor.compress(videoFilePath);
+          uploadFileOptions.files.push({
+            name: 'files',
+            filename: 'LIVENESS_VIDEO.mp4',
+            filepath: videoFilePath,
+            filetype: 'video/mp4',
+          });
+        }
+      }
+
+      const response = await RNFS.uploadFiles(uploadFileOptions).promise;
+
+      if (![200, 201, 204].includes(response.statusCode)) {
+        throw new Error('Media upload failed');
+      }
+    },
+    [apiUrl]
+  );
+
+  const submit = useCallback(
+    async (identificationInfo: IdentificationInfo) => {
+      try {
+        setIsSubmitting(true);
+        const identificationId = identificationInfo.identificationId;
+        if (!identificationId) {
+          throw new Error('IdentificationId not found');
+        }
+
+        const sessionKey = await runWithRetry(() =>
+          getSessionKey(apiUrl, appContext.identificationInfo.sessionId)
+        );
+
+        await runWithRetry(() => createIdentification(identificationId));
+        setProgress(20);
+
+        await runWithRetry(() =>
+          submitIdentificationConsent(identificationId, sessionKey)
+        );
+        setProgress(30);
+
+        const scannedIdentityDocument = identificationInfo.scannedDocument;
+        if (
+          scannedIdentityDocument &&
+          scannedIdentityDocument.documentType !== 'UNKNOWN'
+        ) {
+          await runWithRetry(() =>
+            submitIdentificationDocument(
+              identificationId,
+              scannedIdentityDocument,
+              sessionKey
+            )
+          );
+        }
+        setProgress(40);
+
+        const livenessDetection = identificationInfo.livenessDetection;
+        await runWithRetry(() =>
+          uploadIdentificationMedia(
+            identificationId,
+            scannedIdentityDocument,
+            livenessDetection
+          )
+        );
+
+        await runWithRetry(() =>
+          finishIdentification(identificationId, sessionKey)
+        );
+        setProgress(100);
+        setIsSubmitting(false);
+      } catch (error) {
+        setIsSubmitting(false);
+        setProgress(0);
+        Alert.alert(t('general.error'), t('resultScreen.submissionFailed'));
+        appContext.onError?.(t('resultScreen.submissionFailed'));
+        navigationManagerRef.current?.reset();
+      }
+    },
+    [
+      createIdentification,
+      apiUrl,
+      uploadIdentificationMedia,
+      finishIdentification,
+      submitIdentificationDocument,
+      submitIdentificationConsent,
+      t,
+      appContext,
+    ]
+  );
+
+  useEffect(() => {
+    if (appContext.identificationInfo && !appContext.isDemoSession) {
+      submit(appContext.identificationInfo);
+    }
+  }, [appContext.identificationInfo, appContext.isDemoSession, submit]);
+
+  useEffect(() => {
+    if (progress === 100 && !appContext.isDemoSession) {
+      setTimeout(() => {
+        appContext.onCompleted?.();
+        navigationManagerRef.current?.reset();
+      }, 3000);
+    }
+  }, [appContext, progress]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.container}>
+        {isSubmitting ? (
+          <>
+            <Text style={styles.sectionHeader}>
+              {t('resultScreen.submitting')}
+            </Text>
+            <NativeProgressBar
+              progress={progress / 100}
+              width={null}
+              height={30}
+              borderRadius={8}
+              color={appContext.branding.primaryColor}
+            />
+          </>
+        ) : shouldShowDemoData ? (
+          <>
+            <Image
+              source={require('../../Shared/Assets/trustchex-logo-black.png')}
+              style={styles.trustchexLogo}
+            />
+            <ScrollView>
+              <View style={styles.demoView}>
+                <Text style={styles.sectionHeader}>
+                  {t('resultScreen.demo')}
+                </Text>
+                <Text style={styles.sectionText}>
+                  {t('resultScreen.demoDescription')}
+                </Text>
+
+                {deviceIdentifier && (
+                  <>
+                    <Text style={styles.sectionHeader}>
+                      {t('resultScreen.demoDeviceIdentifier')}
+                    </Text>
+                    <Text style={styles.sectionText}>{deviceIdentifier}</Text>
+                  </>
+                )}
+
+                {appContext.identificationInfo.scannedDocument && (
+                  <>
+                    <Text style={styles.sectionHeader}>
+                      {t('resultScreen.demoScannedDocument')}
+                    </Text>
+                    <Text style={styles.sectionText}>
+                      {t('resultScreen.demoScannedDocumentInformation')}
+                    </Text>
+                    <View style={styles.mrzInfo}>
+                      <View style={styles.mrzInfoItem}>
+                        <Text style={styles.mrzInfoLabel}>
+                          {t('eidScannerScreen.documentCode')}:
+                        </Text>
+                        <Text style={styles.mrzInfoText}>
+                          {
+                            appContext.identificationInfo.scannedDocument
+                              .mrzFields?.documentCode
+                          }
+                        </Text>
+                      </View>
+                      <View style={styles.mrzInfoItem}>
+                        <Text style={styles.mrzInfoLabel}>
+                          {t('eidScannerScreen.nationality')}:
+                        </Text>
+                        <Text style={styles.mrzInfoText}>
+                          {
+                            appContext.identificationInfo.scannedDocument
+                              .mrzFields?.issuingState
+                          }
+                        </Text>
+                      </View>
+                      <View style={styles.mrzInfoItem}>
+                        <Text style={styles.mrzInfoLabel}>
+                          {t('eidScannerScreen.personalNumber')}:
+                        </Text>
+                        <Text style={styles.mrzInfoText}>
+                          {appContext.identificationInfo.scannedDocument
+                            .mrzFields?.personalNumber ||
+                            appContext.identificationInfo.scannedDocument
+                              .mrzFields?.optional1}
+                        </Text>
+                      </View>
+                      <View style={styles.mrzInfoItem}>
+                        <Text style={styles.mrzInfoLabel}>
+                          {t('eidScannerScreen.documentNumber')}:
+                        </Text>
+                        <Text style={styles.mrzInfoText}>
+                          {
+                            appContext.identificationInfo.scannedDocument
+                              .mrzFields?.documentNumber
+                          }
+                        </Text>
+                      </View>
+                      <View style={styles.mrzInfoItem}>
+                        <Text style={styles.mrzInfoLabel}>
+                          {t('eidScannerScreen.name')}:
+                        </Text>
+                        <Text style={styles.mrzInfoText}>
+                          {
+                            appContext.identificationInfo.scannedDocument
+                              .mrzFields?.firstName
+                          }
+                        </Text>
+                      </View>
+                      <View style={styles.mrzInfoItem}>
+                        <Text style={styles.mrzInfoLabel}>
+                          {t('eidScannerScreen.surname')}:
+                        </Text>
+                        <Text style={styles.mrzInfoText}>
+                          {
+                            appContext.identificationInfo.scannedDocument
+                              .mrzFields?.lastName
+                          }
+                        </Text>
+                      </View>
+                      <View style={styles.mrzInfoItem}>
+                        <Text style={styles.mrzInfoLabel}>
+                          {t('eidScannerScreen.birthDate')}:
+                        </Text>
+                        <Text style={styles.mrzInfoText}>
+                          {
+                            appContext.identificationInfo.scannedDocument
+                              .mrzFields?.birthDate
+                          }
+                        </Text>
+                      </View>
+                      <View style={styles.mrzInfoItem}>
+                        <Text style={styles.mrzInfoLabel}>
+                          {t('eidScannerScreen.gender')}:
+                        </Text>
+                        <Text style={styles.mrzInfoText}>
+                          {
+                            appContext.identificationInfo.scannedDocument
+                              .mrzFields?.sex
+                          }
+                        </Text>
+                      </View>
+                      <View style={styles.mrzInfoItem}>
+                        <Text style={styles.mrzInfoLabel}>
+                          {t('eidScannerScreen.expirationDate')}:
+                        </Text>
+                        <Text style={styles.mrzInfoText}>
+                          {
+                            appContext.identificationInfo.scannedDocument
+                              .mrzFields?.expirationDate
+                          }
+                        </Text>
+                      </View>
+                      <View style={styles.mrzInfoItem}>
+                        <Text style={styles.mrzInfoLabel}>
+                          {t('eidScannerScreen.mrzText')}:
+                        </Text>
+                        <Text style={styles.mrzInfoText}>
+                          {
+                            appContext.identificationInfo.scannedDocument
+                              .mrzText
+                          }
+                        </Text>
+                      </View>
+                    </View>
+
+                    <Text style={styles.sectionText}>
+                      {t('resultScreen.demoImages')}
+                    </Text>
+                    <ScrollView horizontal>
+                      <View style={styles.imageContainer}>
+                        {appContext.identificationInfo.scannedDocument
+                          .frontImage && (
+                          <View style={styles.imageItem}>
+                            <Image
+                              style={styles.image}
+                              source={{
+                                uri: `data:image/jpeg;base64,${
+                                  appContext.identificationInfo.scannedDocument
+                                    .frontImage
+                                }`,
+                              }}
+                            />
+                            <Text style={styles.imageText}>
+                              {t('resultScreen.demoImageFront')}
+                            </Text>
+                          </View>
+                        )}
+                        {appContext.identificationInfo.scannedDocument
+                          .backImage && (
+                          <View style={styles.imageItem}>
+                            <Image
+                              style={styles.image}
+                              source={{
+                                uri: `data:image/jpeg;base64,${
+                                  appContext.identificationInfo.scannedDocument
+                                    .backImage
+                                }`,
+                              }}
+                            />
+                            <Text style={styles.imageText}>
+                              {t('resultScreen.demoImageBack')}
+                            </Text>
+                          </View>
+                        )}
+                        {appContext.identificationInfo.scannedDocument
+                          .faceImage && (
+                          <View style={styles.imageItem}>
+                            <Image
+                              style={styles.image}
+                              source={{
+                                uri: `data:image/jpeg;base64,${
+                                  appContext.identificationInfo.scannedDocument
+                                    .faceImage
+                                }`,
+                              }}
+                            />
+                            <Text style={styles.imageText}>
+                              {t('resultScreen.demoImageFace')}
+                            </Text>
+                          </View>
+                        )}
+                        {appContext.identificationInfo.scannedDocument
+                          .secondaryFaceImage && (
+                          <View style={styles.imageItem}>
+                            <Image
+                              style={styles.image}
+                              source={{
+                                uri: `data:image/jpeg;base64,${
+                                  appContext.identificationInfo.scannedDocument
+                                    .secondaryFaceImage
+                                }`,
+                              }}
+                            />
+                            <Text style={styles.imageText}>
+                              {t('resultScreen.demoImageSecondaryFace')}
+                            </Text>
+                          </View>
+                        )}
+                        {appContext.identificationInfo.scannedDocument
+                          .hologramImage && (
+                          <View style={styles.imageItem}>
+                            <Image
+                              style={styles.image}
+                              source={{
+                                uri: `data:image/jpeg;base64,${
+                                  appContext.identificationInfo.scannedDocument
+                                    .hologramImage
+                                }`,
+                              }}
+                            />
+                            <Text style={styles.imageText}>
+                              {t('resultScreen.demoImageHologram')}
+                            </Text>
+                          </View>
+                        )}
+                      </View>
+                    </ScrollView>
+                  </>
+                )}
+                {appContext.identificationInfo.livenessDetection?.videoPath && (
+                  <>
+                    <Text style={styles.sectionHeader}>
+                      {t('resultScreen.demoLivenessDetection')}
+                    </Text>
+                    <Text style={styles.sectionText}>
+                      {t('resultScreen.demoVideo')}
+                    </Text>
+                    <Video
+                      source={{
+                        uri: appContext.identificationInfo.livenessDetection
+                          ?.videoPath,
+                      }}
+                      resizeMode="contain"
+                      style={styles.video}
+                      controls={true}
+                      muted={false}
+                    />
+                    <Text style={styles.sectionText}>
+                      {t('resultScreen.demoImages')}
+                    </Text>
+                    <ScrollView horizontal>
+                      <View style={styles.imageContainer}>
+                        {appContext.identificationInfo.livenessDetection?.instructions
+                          ?.filter((instruction) => !!instruction.photo)
+                          ?.map((instruction, index) => (
+                            <View key={index} style={styles.imageItem}>
+                              <Image
+                                style={styles.image}
+                                source={{
+                                  uri: `data:image/jpeg;base64,${instruction.photo}`,
+                                }}
+                              />
+                              <Text style={styles.imageText}>
+                                {t(
+                                  'resultScreen.demoInstruction_' +
+                                    instruction.instruction.toLowerCase()
+                                )}
+                              </Text>
+                            </View>
+                          ))}
+                      </View>
+                    </ScrollView>
+                  </>
+                )}
+              </View>
+            </ScrollView>
+            <Button
+              mode="contained"
+              onPress={() => {
+                appContext.onCompleted?.();
+                navigationManagerRef.current?.reset();
+              }}
+            >
+              {t('resultScreen.demoStartOver')}
+            </Button>
+          </>
+        ) : (
+          <>
+            <LottieView
+              source={require('../../Shared/Animations/success.json')}
+              style={styles.sectionAnimation}
+              autoPlay
+              loop={false}
+            />
+            <Text style={styles.sectionHeader}>
+              {t('resultScreen.thankYou')}
+            </Text>
+            <Text style={styles.sectionText}>
+              {t('resultScreen.submissionSuccessful')}
+            </Text>
+          </>
+        )}
+        <NavigationManager ref={navigationManagerRef} />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeAreaContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  container: {
+    flex: 1,
+    display: 'flex',
+    padding: 20,
+    justifyContent: 'center',
+    gap: 20,
+  },
+  sectionAnimation: {
+    width: 192,
+    height: 192,
+    alignSelf: 'center',
+  },
+  sectionHeader: {
+    fontSize: 18,
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    textTransform: 'capitalize',
+  },
+  sectionText: {
+    fontSize: 18,
+    color: 'black',
+    textAlign: 'center',
+  },
+  progress: {
+    width: '100%',
+    marginVertical: 10,
+  },
+  footer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    padding: 20,
+    justifyContent: 'center',
+  },
+  demoView: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 20,
+    justifyContent: 'center',
+  },
+  video: {
+    width: '100%',
+    height: 200,
+  },
+  image: {
+    width: 100,
+    height: 100,
+    objectFit: 'contain',
+  },
+  imageItem: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    alignItems: 'center',
+  },
+  imageContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 10,
+  },
+  imageText: {
+    fontSize: 10,
+    color: 'black',
+    textAlign: 'center',
+    textTransform: 'capitalize',
+  },
+  mrzInfo: {
+    flexDirection: 'column',
+    width: '100%',
+  },
+  mrzInfoItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderBottomColor: 'lightgray',
+    borderBottomWidth: 1,
+    paddingVertical: 5,
+  },
+  mrzInfoLabel: {
+    color: 'black',
+    fontWeight: 'bold',
+    fontSize: 12,
+  },
+  mrzInfoText: {
+    color: 'black',
+    fontSize: 10,
+  },
+  trustchexLogo: {
+    width: 150,
+    height: 75,
+    resizeMode: 'contain',
+    alignSelf: 'center',
+  },
+});
+
+export default ResultScreen;