From d3fcfbbb5363252e93d327ea98e09fdc0d0dcab6 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 20 May 2025 17:20:22 +0700
Subject: [PATCH 1/8] feat: Add QR code to app download links screen

---
 src/components/QRShare/index.tsx        | 58 +++++++++++++++++--------
 src/components/QRShare/types.ts         | 19 +++++++-
 src/pages/settings/AppDownloadLinks.tsx | 16 +++++++
 src/styles/index.ts                     | 17 +++++++-
 4 files changed, 87 insertions(+), 23 deletions(-)

diff --git a/src/components/QRShare/index.tsx b/src/components/QRShare/index.tsx
index 7dbdf2d93265..b05f1116a716 100644
--- a/src/components/QRShare/index.tsx
+++ b/src/components/QRShare/index.tsx
@@ -14,7 +14,23 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
 import type {QRShareHandle, QRShareProps} from './types';
 
-function QRShare({url, title, subtitle, logo, svgLogo, svgLogoFillColor, logoBackgroundColor, logoRatio, logoMarginRatio}: QRShareProps, ref: ForwardedRef<QRShareHandle>) {
+function QRShare(
+    {
+        url,
+        title,
+        subtitle,
+        logo,
+        svgLogo,
+        svgLogoFillColor,
+        logoBackgroundColor,
+        logoRatio,
+        logoMarginRatio,
+        shouldShowExpensifyLogo = true,
+        additionalStyles,
+        isFromDownloadPage = false,
+    }: QRShareProps,
+    ref: ForwardedRef<QRShareHandle>,
+) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -36,19 +52,21 @@ function QRShare({url, title, subtitle, logo, svgLogo, svgLogoFillColor, logoBac
         const containerWidth = event.nativeEvent.layout.width - variables.qrShareHorizontalPadding * 2 || 0;
         setQrCodeSize(Math.max(1, containerWidth));
     };
-
+    
     return (
         <View
-            style={styles.shareCodeContainer}
+            style={[styles.shareCodeContainer, additionalStyles, isFromDownloadPage ? styles.shareCodeContainerDownloadPadding : styles.shareCodeContainerPadding]}
             onLayout={onLayout}
         >
-            <View style={styles.expensifyQrLogo}>
-                <ImageSVG
-                    contentFit="contain"
-                    src={ExpensifyWordmark}
-                    fill={theme.QRLogo}
-                />
-            </View>
+            {shouldShowExpensifyLogo && (
+                <View style={styles.expensifyQrLogo}>
+                    <ImageSVG
+                        contentFit="contain"
+                        src={ExpensifyWordmark}
+                        fill={theme.QRLogo}
+                    />
+                </View>
+            )}
 
             <QRCode
                 getRef={(svg) => (svgRef.current = svg)}
@@ -57,19 +75,21 @@ function QRShare({url, title, subtitle, logo, svgLogo, svgLogoFillColor, logoBac
                 svgLogoFillColor={svgLogoFillColor}
                 logoBackgroundColor={logoBackgroundColor}
                 logo={logo}
-                size={qrCodeSize}
+                size={isFromDownloadPage ? 200 : qrCodeSize}
                 logoRatio={logoRatio}
                 logoMarginRatio={logoMarginRatio}
             />
 
-            <Text
-                family="EXP_NEW_KANSAS_MEDIUM"
-                fontSize={variables.fontSizeXLarge}
-                numberOfLines={2}
-                style={styles.qrShareTitle}
-            >
-                {title}
-            </Text>
+            {!!title && (
+                <Text
+                    family="EXP_NEW_KANSAS_MEDIUM"
+                    fontSize={variables.fontSizeXLarge}
+                    numberOfLines={2}
+                    style={styles.qrShareTitle}
+                >
+                    {title}
+                </Text>
+            )}
 
             {!!subtitle && (
                 <Text
diff --git a/src/components/QRShare/types.ts b/src/components/QRShare/types.ts
index 8f086e19a51f..9236393c8522 100644
--- a/src/components/QRShare/types.ts
+++ b/src/components/QRShare/types.ts
@@ -1,5 +1,5 @@
 import type React from 'react';
-import type {ImageSourcePropType} from 'react-native';
+import type {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
 import type {Svg, SvgProps} from 'react-native-svg';
 import type {QRCodeLogoMarginRatio, QRCodeLogoRatio} from '@components/QRCode';
 
@@ -12,7 +12,7 @@ type QRShareProps = {
     /**
      * The title that is displayed below the QR Code (usually the user or report name)
      */
-    title: string;
+    title?: string;
 
     /**
      * The subtitle which will be shown below the title (usually user email or workspace name)
@@ -49,6 +49,21 @@ type QRShareProps = {
      * The size ratio of margin around logo to QR code
      */
     logoMarginRatio?: QRCodeLogoMarginRatio;
+
+    /**
+     * If true, the Expensify logo will be displayed
+     */
+    shouldShowExpensifyLogo?: boolean;
+
+    /**
+     * Additional styles to be applied to the QR code
+     */
+    additionalStyles?: StyleProp<ViewStyle>;
+
+    /**
+     * If true, the QR code will be displayed in a different size
+     */
+    isFromDownloadPage?: boolean;
 };
 
 type QRShareHandle = {
diff --git a/src/pages/settings/AppDownloadLinks.tsx b/src/pages/settings/AppDownloadLinks.tsx
index 9b9780665ec5..7b500aebbd54 100644
--- a/src/pages/settings/AppDownloadLinks.tsx
+++ b/src/pages/settings/AppDownloadLinks.tsx
@@ -2,8 +2,11 @@ import React, {useRef} from 'react';
 import type {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
 import MenuItem from '@components/MenuItem';
 import type {MenuItemProps} from '@components/MenuItem';
+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 useLocalize from '@hooks/useLocalize';
@@ -24,6 +27,7 @@ function AppDownloadLinksPage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const popoverAnchor = useRef<View>(null);
+    const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
 
     const menuItems: DownloadMenuItem[] = [
         {
@@ -61,6 +65,18 @@ function AppDownloadLinksPage() {
                 title={translate('initialSettingsPage.aboutPage.appDownloadLinks')}
                 onBackButtonPress={() => Navigation.goBack()}
             />
+
+            <QRShareWithDownload
+                ref={qrCodeRef}
+                url="https://expensify.com/mobile"
+                svgLogo={Illustrations.ExpensifyMobileApp}
+                logoRatio={CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO}
+                logoMarginRatio={CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO}
+                shouldShowExpensifyLogo={false}
+                additionalStyles={styles.qrCodeAdditionalStyles}
+                isFromDownloadPage
+            />
+
             <ScrollView style={[styles.mt3]}>
                 {menuItems.map((item: DownloadMenuItem) => (
                     <MenuItem
diff --git a/src/styles/index.ts b/src/styles/index.ts
index c23fd389a62d..ca3dd1f5ef93 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4477,8 +4477,6 @@ const styles = (theme: ThemeColors) =>
         shareCodeContainer: {
             width: '100%',
             alignItems: 'center',
-            paddingHorizontal: variables.qrShareHorizontalPadding,
-            paddingVertical: 20,
             borderRadius: 20,
             overflow: 'hidden',
             borderColor: theme.borderFocus,
@@ -4486,6 +4484,21 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.highlightBG,
         },
 
+        shareCodeContainerPadding: {
+            paddingHorizontal: variables.qrShareHorizontalPadding,
+            paddingVertical: 20,
+        },
+
+        shareCodeContainerDownloadPadding: {
+            padding: 12,
+        },
+
+        qrCodeAdditionalStyles: {
+            width: 200,
+            height: 200,
+            margin: 'auto',
+        },
+
         splashScreenHider: {
             backgroundColor: theme.splashBG,
             alignItems: 'center',

From 443ffd519eb67eb030ed49873634e8cd28426f03 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 20 May 2025 17:29:42 +0700
Subject: [PATCH 2/8] fix lint

---
 src/components/QRShare/QRShareWithDownload/index.native.tsx | 2 +-
 src/components/QRShare/QRShareWithDownload/index.tsx        | 2 +-
 src/components/QRShare/index.tsx                            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/QRShare/QRShareWithDownload/index.native.tsx b/src/components/QRShare/QRShareWithDownload/index.native.tsx
index 7d192c84c454..a5896eb4c6a8 100644
--- a/src/components/QRShare/QRShareWithDownload/index.native.tsx
+++ b/src/components/QRShare/QRShareWithDownload/index.native.tsx
@@ -18,7 +18,7 @@ function QRShareWithDownload(props: QRShareProps, ref: ForwardedRef<QRShareWithD
     useImperativeHandle(
         ref,
         () => ({
-            download: () => qrCodeScreenshotRef.current?.capture?.().then((uri) => fileDownload(uri, getQrCodeFileName(props.title), translate('fileDownload.success.qrMessage'))),
+            download: () => qrCodeScreenshotRef.current?.capture?.().then((uri) => fileDownload(uri, getQrCodeFileName(props.title ?? ''), translate('fileDownload.success.qrMessage'))),
         }),
         [props.title, translate],
     );
diff --git a/src/components/QRShare/QRShareWithDownload/index.tsx b/src/components/QRShare/QRShareWithDownload/index.tsx
index 7797f22a32d5..c188468f627a 100644
--- a/src/components/QRShare/QRShareWithDownload/index.tsx
+++ b/src/components/QRShare/QRShareWithDownload/index.tsx
@@ -23,7 +23,7 @@ function QRShareWithDownload(props: QRShareProps, ref: ForwardedRef<QRShareWithD
                         return;
                     }
 
-                    svg.toDataURL((dataURL) => resolve(fileDownload(dataURL, getQrCodeFileName(props.title))));
+                    svg.toDataURL((dataURL) => resolve(fileDownload(dataURL, getQrCodeFileName(props.title ?? ''))));
                 }),
         }),
         [props.title],
diff --git a/src/components/QRShare/index.tsx b/src/components/QRShare/index.tsx
index b05f1116a716..9a6dfc56210d 100644
--- a/src/components/QRShare/index.tsx
+++ b/src/components/QRShare/index.tsx
@@ -52,7 +52,7 @@ function QRShare(
         const containerWidth = event.nativeEvent.layout.width - variables.qrShareHorizontalPadding * 2 || 0;
         setQrCodeSize(Math.max(1, containerWidth));
     };
-    
+
     return (
         <View
             style={[styles.shareCodeContainer, additionalStyles, isFromDownloadPage ? styles.shareCodeContainerDownloadPadding : styles.shareCodeContainerPadding]}

From ff2f05e5246b664d488a2ad3b5818a286ca83e8a Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 20 May 2025 17:54:26 +0700
Subject: [PATCH 3/8] change size of QR code

---
 src/components/QRShare/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/QRShare/index.tsx b/src/components/QRShare/index.tsx
index 9a6dfc56210d..0012275b34c8 100644
--- a/src/components/QRShare/index.tsx
+++ b/src/components/QRShare/index.tsx
@@ -75,7 +75,7 @@ function QRShare(
                 svgLogoFillColor={svgLogoFillColor}
                 logoBackgroundColor={logoBackgroundColor}
                 logo={logo}
-                size={isFromDownloadPage ? 200 : qrCodeSize}
+                size={isFromDownloadPage ? 172 : qrCodeSize}
                 logoRatio={logoRatio}
                 logoMarginRatio={logoMarginRatio}
             />

From a92575786a3a475b8c3290005ee8b61891fda697 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Fri, 23 May 2025 11:45:20 +0700
Subject: [PATCH 4/8] add default file name to download

---
 src/components/QRShare/QRShareWithDownload/index.native.tsx | 2 +-
 src/components/QRShare/QRShareWithDownload/index.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/QRShare/QRShareWithDownload/index.native.tsx b/src/components/QRShare/QRShareWithDownload/index.native.tsx
index a5896eb4c6a8..51723b7d6810 100644
--- a/src/components/QRShare/QRShareWithDownload/index.native.tsx
+++ b/src/components/QRShare/QRShareWithDownload/index.native.tsx
@@ -18,7 +18,7 @@ function QRShareWithDownload(props: QRShareProps, ref: ForwardedRef<QRShareWithD
     useImperativeHandle(
         ref,
         () => ({
-            download: () => qrCodeScreenshotRef.current?.capture?.().then((uri) => fileDownload(uri, getQrCodeFileName(props.title ?? ''), translate('fileDownload.success.qrMessage'))),
+            download: () => qrCodeScreenshotRef.current?.capture?.().then((uri) => fileDownload(uri, getQrCodeFileName(props.title ?? 'QRCode'), translate('fileDownload.success.qrMessage'))),
         }),
         [props.title, translate],
     );
diff --git a/src/components/QRShare/QRShareWithDownload/index.tsx b/src/components/QRShare/QRShareWithDownload/index.tsx
index c188468f627a..77ede13e21a4 100644
--- a/src/components/QRShare/QRShareWithDownload/index.tsx
+++ b/src/components/QRShare/QRShareWithDownload/index.tsx
@@ -23,7 +23,7 @@ function QRShareWithDownload(props: QRShareProps, ref: ForwardedRef<QRShareWithD
                         return;
                     }
 
-                    svg.toDataURL((dataURL) => resolve(fileDownload(dataURL, getQrCodeFileName(props.title ?? ''))));
+                    svg.toDataURL((dataURL) => resolve(fileDownload(dataURL, getQrCodeFileName(props.title ?? 'QRCode'))));
                 }),
         }),
         [props.title],

From d0f77efc3b36c84596c3fc2c1602c7a5560269cf Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Mon, 26 May 2025 20:02:16 +0700
Subject: [PATCH 5/8] fix qr code style

---
 src/CONST.ts                                  |  4 ++++
 .../QRShareWithDownload/index.native.tsx      |  3 ++-
 src/components/QRShare/index.tsx              | 19 +++----------------
 src/components/QRShare/types.ts               |  6 ++++--
 src/pages/settings/AppDownloadLinks.tsx       | 11 ++++-------
 src/styles/index.ts                           | 12 +++++-------
 6 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 421685fbc447..952d3bfc0f6a 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -3201,6 +3201,10 @@ const CONST = {
         LARGE: 'large',
     },
 
+    QR_CODE_SIZE: {
+        APP_DOWNLOAD_LINKS: 172,
+    },
+
     AVATAR_SIZE: {
         X_LARGE: 'xlarge',
         LARGE: 'large',
diff --git a/src/components/QRShare/QRShareWithDownload/index.native.tsx b/src/components/QRShare/QRShareWithDownload/index.native.tsx
index 51723b7d6810..44950d9bdfa7 100644
--- a/src/components/QRShare/QRShareWithDownload/index.native.tsx
+++ b/src/components/QRShare/QRShareWithDownload/index.native.tsx
@@ -18,7 +18,8 @@ function QRShareWithDownload(props: QRShareProps, ref: ForwardedRef<QRShareWithD
     useImperativeHandle(
         ref,
         () => ({
-            download: () => qrCodeScreenshotRef.current?.capture?.().then((uri) => fileDownload(uri, getQrCodeFileName(props.title ?? 'QRCode'), translate('fileDownload.success.qrMessage'))),
+            download: () =>
+                qrCodeScreenshotRef.current?.capture?.().then((uri) => fileDownload(uri, getQrCodeFileName(props.title ?? 'QRCode'), translate('fileDownload.success.qrMessage'))),
         }),
         [props.title, translate],
     );
diff --git a/src/components/QRShare/index.tsx b/src/components/QRShare/index.tsx
index 0012275b34c8..dd392aecfc0b 100644
--- a/src/components/QRShare/index.tsx
+++ b/src/components/QRShare/index.tsx
@@ -15,20 +15,7 @@ import variables from '@styles/variables';
 import type {QRShareHandle, QRShareProps} from './types';
 
 function QRShare(
-    {
-        url,
-        title,
-        subtitle,
-        logo,
-        svgLogo,
-        svgLogoFillColor,
-        logoBackgroundColor,
-        logoRatio,
-        logoMarginRatio,
-        shouldShowExpensifyLogo = true,
-        additionalStyles,
-        isFromDownloadPage = false,
-    }: QRShareProps,
+    {url, title, subtitle, logo, svgLogo, svgLogoFillColor, logoBackgroundColor, logoRatio, logoMarginRatio, shouldShowExpensifyLogo = true, additionalStyles, size}: QRShareProps,
     ref: ForwardedRef<QRShareHandle>,
 ) {
     const styles = useThemeStyles();
@@ -55,7 +42,7 @@ function QRShare(
 
     return (
         <View
-            style={[styles.shareCodeContainer, additionalStyles, isFromDownloadPage ? styles.shareCodeContainerDownloadPadding : styles.shareCodeContainerPadding]}
+            style={[styles.shareCodeContainer, additionalStyles]}
             onLayout={onLayout}
         >
             {shouldShowExpensifyLogo && (
@@ -75,7 +62,7 @@ function QRShare(
                 svgLogoFillColor={svgLogoFillColor}
                 logoBackgroundColor={logoBackgroundColor}
                 logo={logo}
-                size={isFromDownloadPage ? 172 : qrCodeSize}
+                size={size ?? qrCodeSize}
                 logoRatio={logoRatio}
                 logoMarginRatio={logoMarginRatio}
             />
diff --git a/src/components/QRShare/types.ts b/src/components/QRShare/types.ts
index 9236393c8522..97e2fcd2a87b 100644
--- a/src/components/QRShare/types.ts
+++ b/src/components/QRShare/types.ts
@@ -1,7 +1,9 @@
 import type React from 'react';
 import type {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
 import type {Svg, SvgProps} from 'react-native-svg';
+import type {ValueOf} from 'type-fest';
 import type {QRCodeLogoMarginRatio, QRCodeLogoRatio} from '@components/QRCode';
+import type CONST from '@src/CONST';
 
 type QRShareProps = {
     /**
@@ -61,9 +63,9 @@ type QRShareProps = {
     additionalStyles?: StyleProp<ViewStyle>;
 
     /**
-     * If true, the QR code will be displayed in a different size
+     * The size of the QR code
      */
-    isFromDownloadPage?: boolean;
+    size?: ValueOf<typeof CONST.QR_CODE_SIZE>;
 };
 
 type QRShareHandle = {
diff --git a/src/pages/settings/AppDownloadLinks.tsx b/src/pages/settings/AppDownloadLinks.tsx
index 7b500aebbd54..db7f946c8176 100644
--- a/src/pages/settings/AppDownloadLinks.tsx
+++ b/src/pages/settings/AppDownloadLinks.tsx
@@ -5,8 +5,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import MenuItem from '@components/MenuItem';
 import type {MenuItemProps} from '@components/MenuItem';
-import QRShareWithDownload from '@components/QRShare/QRShareWithDownload';
-import type QRShareWithDownloadHandle from '@components/QRShare/QRShareWithDownload/types';
+import QRShare from '@components/QRShare';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
@@ -27,7 +26,6 @@ function AppDownloadLinksPage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const popoverAnchor = useRef<View>(null);
-    const qrCodeRef = useRef<QRShareWithDownloadHandle>(null);
 
     const menuItems: DownloadMenuItem[] = [
         {
@@ -66,15 +64,14 @@ function AppDownloadLinksPage() {
                 onBackButtonPress={() => Navigation.goBack()}
             />
 
-            <QRShareWithDownload
-                ref={qrCodeRef}
+            <QRShare
                 url="https://expensify.com/mobile"
                 svgLogo={Illustrations.ExpensifyMobileApp}
                 logoRatio={CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO}
                 logoMarginRatio={CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO}
                 shouldShowExpensifyLogo={false}
-                additionalStyles={styles.qrCodeAdditionalStyles}
-                isFromDownloadPage
+                additionalStyles={[styles.qrCodeAppDownloadLinksStyles, styles.shareCodeContainerDownloadPadding]}
+                size={CONST.QR_CODE_SIZE.APP_DOWNLOAD_LINKS}
             />
 
             <ScrollView style={[styles.mt3]}>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index dade2b131437..945844d4bf8f 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4479,6 +4479,8 @@ const styles = (theme: ThemeColors) =>
         shareCodeContainer: {
             width: '100%',
             alignItems: 'center',
+            paddingHorizontal: variables.qrShareHorizontalPadding,
+            paddingVertical: 20,
             borderRadius: 20,
             overflow: 'hidden',
             borderColor: theme.borderFocus,
@@ -4486,16 +4488,12 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.highlightBG,
         },
 
-        shareCodeContainerPadding: {
-            paddingHorizontal: variables.qrShareHorizontalPadding,
-            paddingVertical: 20,
-        },
-
         shareCodeContainerDownloadPadding: {
-            padding: 12,
+            paddingHorizontal: 12,
+            paddingVertical: 12,
         },
 
-        qrCodeAdditionalStyles: {
+        qrCodeAppDownloadLinksStyles: {
             width: 200,
             height: 200,
             margin: 'auto',

From 2d057fccc1e01ffbe296c81018822ed8342dea04 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 27 May 2025 13:34:25 +0700
Subject: [PATCH 6/8] Add link const

---
 src/CONST.ts                            | 2 ++
 src/pages/settings/AppDownloadLinks.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 952d3bfc0f6a..c6db1197ccb1 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -24,6 +24,7 @@ const CLOUDFRONT_DOMAIN = 'cloudfront.net';
 const CLOUDFRONT_URL = `https://d2k5nsl2zxldvw.${CLOUDFRONT_DOMAIN}`;
 const ACTIVE_EXPENSIFY_URL = addTrailingForwardSlash(Config?.NEW_EXPENSIFY_URL ?? 'https://new.expensify.com');
 const USE_EXPENSIFY_URL = 'https://use.expensify.com';
+const EXPENSIFY_MOBILE_URL = 'https://expensify.com/mobile';
 const EXPENSIFY_URL = 'https://www.expensify.com';
 const PLATFORM_OS_MACOS = 'Mac OS';
 const PLATFORM_IOS = 'iOS';
@@ -1063,6 +1064,7 @@ const CONST = {
     DEFAULT_NUMBER_ID,
     USE_EXPENSIFY_URL,
     EXPENSIFY_URL,
+    EXPENSIFY_MOBILE_URL,
     GOOGLE_MEET_URL_ANDROID: 'https://meet.google.com',
     GOOGLE_DOC_IMAGE_LINK_MATCH: 'googleusercontent.com',
     IMAGE_BASE64_MATCH: 'base64',
diff --git a/src/pages/settings/AppDownloadLinks.tsx b/src/pages/settings/AppDownloadLinks.tsx
index db7f946c8176..3f1f1a0cc2be 100644
--- a/src/pages/settings/AppDownloadLinks.tsx
+++ b/src/pages/settings/AppDownloadLinks.tsx
@@ -65,7 +65,7 @@ function AppDownloadLinksPage() {
             />
 
             <QRShare
-                url="https://expensify.com/mobile"
+                url={CONST.EXPENSIFY_MOBILE_URL}
                 svgLogo={Illustrations.ExpensifyMobileApp}
                 logoRatio={CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO}
                 logoMarginRatio={CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO}

From ba2750b80cccbf77baca65e967c27f7b23fc333a Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 28 May 2025 10:52:38 +0700
Subject: [PATCH 7/8] fix logo and background QR share

---
 src/pages/settings/AppDownloadLinks.tsx | 4 ++--
 src/styles/index.ts                     | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/AppDownloadLinks.tsx b/src/pages/settings/AppDownloadLinks.tsx
index 3f1f1a0cc2be..d030473bbbd7 100644
--- a/src/pages/settings/AppDownloadLinks.tsx
+++ b/src/pages/settings/AppDownloadLinks.tsx
@@ -1,8 +1,8 @@
 import React, {useRef} from 'react';
 import type {View} from 'react-native';
+import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
 import MenuItem from '@components/MenuItem';
 import type {MenuItemProps} from '@components/MenuItem';
 import QRShare from '@components/QRShare';
@@ -66,7 +66,7 @@ function AppDownloadLinksPage() {
 
             <QRShare
                 url={CONST.EXPENSIFY_MOBILE_URL}
-                svgLogo={Illustrations.ExpensifyMobileApp}
+                logo={expensifyLogo}
                 logoRatio={CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO}
                 logoMarginRatio={CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO}
                 shouldShowExpensifyLogo={false}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index cf3be8db4d48..57f79da0ff6e 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4495,7 +4495,6 @@ const styles = (theme: ThemeColors) =>
             overflow: 'hidden',
             borderColor: theme.borderFocus,
             borderWidth: 2,
-            backgroundColor: theme.highlightBG,
         },
 
         shareCodeContainerDownloadPadding: {

From d312086401cab8aae8e774e4f721066722413ea0 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 29 May 2025 16:36:04 +0700
Subject: [PATCH 8/8] fix QR bg

---
 src/components/QRCode.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx
index e949049cb942..079b94d18ec6 100644
--- a/src/components/QRCode.tsx
+++ b/src/components/QRCode.tsx
@@ -80,11 +80,11 @@ function QRCode({
             logo={logo}
             logoSVG={svgLogo}
             logoColor={svgLogoFillColor}
-            logoBackgroundColor={logoBackgroundColor ?? theme.highlightBG}
+            logoBackgroundColor={logoBackgroundColor ?? theme.appBG}
             logoSize={size * logoRatio}
             logoMargin={size * logoMarginRatio}
             logoBorderRadius={size}
-            backgroundColor={backgroundColor ?? theme.highlightBG}
+            backgroundColor={backgroundColor ?? theme.appBG}
             color={color ?? theme.text}
         />
     );