Merge pull request #56473 from callstack-internal/feature/55176-bump-react-fast-pdf-2

Bump react-fast-pdf

Author: mountiny

config/webpack/webpack.common.ts

@@ -179,6 +179,12 @@ const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment):
             // We are importing this worker as a string by using asset/source otherwise it will default to loading via an HTTPS request later.
             // This causes issues if we have gone offline before the pdfjs web worker is set up as we won't be able to load it from the server.
             {
+                // eslint-disable-next-line prefer-regex-literals
+                test: new RegExp('node_modules/pdfjs-dist/build/pdf.worker.min.mjs'),
+                type: 'asset/source',
+            },
+            {
+                // eslint-disable-next-line prefer-regex-literals
                 test: new RegExp('node_modules/pdfjs-dist/legacy/build/pdf.worker.min.mjs'),
                 type: 'asset/source',
             },

src/components/PDFThumbnail/index.tsx

@@ -1,17 +1,24 @@
 import 'core-js/proposals/promise-with-resolvers';
 // eslint-disable-next-line import/extensions
-import pdfWorkerSource from 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';
+import pdfWorkerSource from 'pdfjs-dist/build/pdf.worker.min.mjs';
+// eslint-disable-next-line import/extensions
+import pdfWorkerLegacySource from 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';
 import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {Document, pdfjs, Thumbnail} from 'react-pdf';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import useThemeStyles from '@hooks/useThemeStyles';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
+import {isMobileSafari, isModernSafari} from '@libs/Browser';
 import PDFThumbnailError from './PDFThumbnailError';
 import type PDFThumbnailProps from './types';
 
+const shouldUseLegacyWorker = isMobileSafari() && !isModernSafari();
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const pdfWorker = shouldUseLegacyWorker ? pdfWorkerLegacySource : pdfWorkerSource;
+
 if (!pdfjs.GlobalWorkerOptions.workerSrc) {
-    pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(new Blob([pdfWorkerSource], {type: 'text/javascript'}));
+    pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(new Blob([pdfWorker], {type: 'text/javascript'}));
 }
 
 function PDFThumbnail({previewSourceURL, style, isAuthTokenRequired = false, enabled = true, onPassword, onLoadError, onLoadSuccess}: PDFThumbnailProps) {

src/libs/Browser/index.ts

@@ -1,4 +1,4 @@
-import type {GetBrowser, IsChromeIOS, IsMobile, IsMobileChrome, IsMobileSafari, IsMobileWebKit, IsSafari, OpenRouteInDesktopApp} from './types';
+import type {GetBrowser, IsChromeIOS, IsMobile, IsMobileChrome, IsMobileSafari, IsMobileWebKit, IsModernSafari, IsSafari, OpenRouteInDesktopApp} from './types';
 
 const getBrowser: GetBrowser = () => '';
 
@@ -14,6 +14,8 @@ const isChromeIOS: IsChromeIOS = () => false;
 
 const isSafari: IsSafari = () => false;
 
+const isModernSafari: IsModernSafari = () => false;
+
 const openRouteInDesktopApp: OpenRouteInDesktopApp = () => {};
 
-export {getBrowser, isMobile, isMobileSafari, isMobileWebKit, isSafari, isMobileChrome, isChromeIOS, openRouteInDesktopApp};
+export {getBrowser, isMobile, isMobileSafari, isMobileWebKit, isSafari, isModernSafari, isMobileChrome, isChromeIOS, openRouteInDesktopApp};

src/libs/Browser/index.website.ts

@@ -1,7 +1,7 @@
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
-import type {GetBrowser, IsChromeIOS, IsMobile, IsMobileChrome, IsMobileSafari, IsMobileWebKit, IsSafari, OpenRouteInDesktopApp} from './types';
+import type {GetBrowser, IsChromeIOS, IsMobile, IsMobileChrome, IsMobileSafari, IsMobileWebKit, IsModernSafari, IsSafari, OpenRouteInDesktopApp} from './types';
 
 let isOpenRouteInDesktop = false;
 /**
@@ -77,6 +77,16 @@ const isChromeIOS: IsChromeIOS = () => {
 
 const isSafari: IsSafari = () => getBrowser() === 'safari' || isMobileSafari();
 
+/**
+ * Checks if the requesting user agent is a modern version of Safari on iOS (version 18 or higher).
+ */
+const isModernSafari: IsModernSafari = (): boolean => {
+    const version = navigator.userAgent.match(/OS (\d+_\d+)/);
+    const iosVersion = version ? version[1].replace('_', '.') : '';
+
+    return parseFloat(iosVersion) >= 18;
+};
+
 /**
  * The session information needs to be passed to the Desktop app, and the only way to do that is by using query params. There is no other way to transfer the data.
  */
@@ -127,4 +137,16 @@ const resetIsOpeningRouteInDesktop = () => {
     isOpenRouteInDesktop = false;
 };
 
-export {getBrowser, isMobile, isMobileSafari, isMobileWebKit, isSafari, isMobileChrome, isChromeIOS, openRouteInDesktopApp, isOpeningRouteInDesktop, resetIsOpeningRouteInDesktop};
+export {
+    getBrowser,
+    isMobile,
+    isMobileSafari,
+    isMobileWebKit,
+    isSafari,
+    isModernSafari,
+    isMobileChrome,
+    isChromeIOS,
+    openRouteInDesktopApp,
+    isOpeningRouteInDesktop,
+    resetIsOpeningRouteInDesktop,
+};

src/libs/Browser/types.ts

@@ -12,6 +12,8 @@ type IsChromeIOS = () => boolean;
 
 type IsSafari = () => boolean;
 
+type IsModernSafari = () => boolean;
+
 type OpenRouteInDesktopApp = (shortLivedAuthToken?: string, email?: string, initialRoute?: string) => void;
 
-export type {GetBrowser, IsMobile, IsMobileSafari, IsMobileChrome, IsMobileWebKit, IsSafari, IsChromeIOS, OpenRouteInDesktopApp};
+export type {GetBrowser, IsMobile, IsMobileSafari, IsMobileChrome, IsMobileWebKit, IsSafari, IsModernSafari, IsChromeIOS, OpenRouteInDesktopApp};

src/types/modules/pdf.worker.d.ts

@@ -1 +1,2 @@
 declare module 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';
+declare module 'pdfjs-dist/build/pdf.worker.min.mjs';