diff --git a/package-lock.json b/package-lock.json index 87c7dd3d2600..b2638d613999 100644 --- a/package-lock.json +++ b/package-lock.json @@ -112,7 +112,7 @@ "react-native-svg": "15.6.0", "react-native-tab-view": "^3.5.2", "react-native-url-polyfill": "^2.0.0", - "react-native-view-shot": "3.8.0", + "react-native-view-shot": "4.0.0-alpha.3", "react-native-vision-camera": "4.0.0-beta.13", "react-native-web": "^0.19.12", "react-native-web-sound": "^0.1.3", @@ -35666,8 +35666,9 @@ } }, "node_modules/react-native-view-shot": { - "version": "3.8.0", - "license": "MIT", + "version": "4.0.0-alpha.3", + "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-4.0.0-alpha.3.tgz", + "integrity": "sha512-o0KVgC6XZqWmLUKVc4q6Ev1QW1kA4g/TF45wj8CgYS13wJuWYJ+nPGCHT9C2jvX/L65mtTollKXp2L8hbDnelg==", "dependencies": { "html2canvas": "^1.4.1" }, diff --git a/package.json b/package.json index 056d29a36c19..a80a12758745 100644 --- a/package.json +++ b/package.json @@ -169,7 +169,7 @@ "react-native-svg": "15.6.0", "react-native-tab-view": "^3.5.2", "react-native-url-polyfill": "^2.0.0", - "react-native-view-shot": "3.8.0", + "react-native-view-shot": "4.0.0-alpha.3", "react-native-vision-camera": "4.0.0-beta.13", "react-native-web": "^0.19.12", "react-native-web-sound": "^0.1.3", diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx index e11e99a6e852..d2ef35d2daa8 100644 --- a/src/pages/ShareCodePage.tsx +++ b/src/pages/ShareCodePage.tsx @@ -8,8 +8,8 @@ import ContextMenuItem from '@components/ContextMenuItem'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; -import QRShare from '@components/QRShare'; -import type {QRShareHandle} from '@components/QRShare/types'; +import QRShareWithDownload from '@components/QRShare/QRShareWithDownload'; +import type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; @@ -18,6 +18,7 @@ import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import Clipboard from '@libs/Clipboard'; +import getPlatform from '@libs/getPlatform'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import * as Url from '@libs/Url'; @@ -58,7 +59,8 @@ function ShareCodePage({report, policy}: ShareCodePageProps) { const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const {environmentURL} = useEnvironment(); - const qrCodeRef = useRef(null); + const qrCodeRef = useRef(null); + const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const isReport = !!report?.reportID; @@ -82,6 +84,11 @@ function ShareCodePage({report, policy}: ShareCodePageProps) { }, [report, currentUserPersonalDetails, isReport]); const title = isReport ? ReportUtils.getReportName(report) : currentUserPersonalDetails.displayName ?? ''; + // We should remove this logic once https://github.com/Expensify/App/issues/19834 is done + // We shouldn't introduce platform specific code in our codebase + // This is a temporary solution while Web is not supported for the QR code download feature + const platform = getPlatform(); + const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID; const urlWithTrailingSlash = Url.addTrailingForwardSlash(environmentURL); const url = isReport ? `${urlWithTrailingSlash}${ROUTES.REPORT_WITH_ID.getRoute(report.reportID)}` @@ -111,24 +118,17 @@ function ShareCodePage({report, policy}: ShareCodePageProps) { /> - {/* - Right now QR code download button is not shown anymore - This is a temporary measure because right now it's broken because of the Fabric update. - We need to wait for react-native v0.74 to be released so react-native-view-shot gets fixed. - - Please see https://github.com/Expensify/App/issues/40110 to see if it can be re-enabled. - */} - @@ -142,6 +142,18 @@ function ShareCodePage({report, policy}: ShareCodePageProps) { onPress={() => Clipboard.setString(url)} shouldLimitWidth={false} /> + {/* Remove this platform specific condition once https://github.com/Expensify/App/issues/19834 is done. + We shouldn't introduce platform specific code in our codebase. + This is a temporary solution while Web is not supported for the QR code download feature */} + {isNative && ( + qrCodeRef.current?.download?.()} + /> + )} (null); + const qrCodeRef = useRef(null); const {shouldUseNarrowLayout} = useResponsiveLayout(); const session = useSession(); @@ -96,21 +99,14 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) { - {/* - Right now QR code download button is not shown anymore - This is a temporary measure because right now it's broken because of the Fabric update. - We need to wait for react-native v0.74 to be released so react-native-view-shot gets fixed. - - Please see https://github.com/Expensify/App/issues/40110 to see if it can be re-enabled. - */} - @@ -126,6 +122,18 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) { shouldLimitWidth={false} wrapperStyle={themeStyles.sectionMenuItemTopDescription} /> + {/* Remove this once https://github.com/Expensify/App/issues/19834 is done. + We shouldn't introduce platform specific code in our codebase. + This is a temporary solution while Web is not supported for the QR code download feature */} + {shouldAllowDownloadQRCode && ( + qrCodeRef.current?.download?.()} + wrapperStyle={themeStyles.sectionMenuItemTopDescription} + /> + )}