From be48bbb39e7fe60b1be218146be95f24045ae2df Mon Sep 17 00:00:00 2001
From: Huu Le <lethanhhuu95@gmail.com>
Date: Sat, 13 Jul 2024 16:53:46 +0700
Subject: [PATCH 1/2] fix: initial size for QR code #44436

---
 src/components/QRShare/index.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/QRShare/index.tsx b/src/components/QRShare/index.tsx
index fcd838871db3..6629a07fab4b 100644
--- a/src/components/QRShare/index.tsx
+++ b/src/components/QRShare/index.tsx
@@ -1,22 +1,31 @@
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useImperativeHandle, useRef, useState} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
-import {View} from 'react-native';
+import {Platform, View} from 'react-native';
 import type {Svg} from 'react-native-svg';
 import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';
 import ImageSVG from '@components/ImageSVG';
 import QRCode from '@components/QRCode';
 import Text from '@components/Text';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as Browser from '@libs/Browser';
 import variables from '@styles/variables';
 import type {QRShareHandle, QRShareProps} from './types';
 
 function QRShare({url, title, subtitle, logo, logoRatio, logoMarginRatio}: QRShareProps, ref: ForwardedRef<QRShareHandle>) {
     const styles = useThemeStyles();
     const theme = useTheme();
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const isMobilePlatform = Platform.OS === 'android' || Platform.OS === 'ios';
+    const isMobileBrowser = Browser.isMobile();
+    const isMobile = isMobilePlatform || isMobileBrowser;
+    const {windowWidth} = useWindowDimensions();
+    const qrCodeContainerWidth = isMobile || isSmallScreenWidth ? windowWidth : variables.sideBarWidth;
 
-    const [qrCodeSize, setQrCodeSize] = useState<number | undefined>();
+    const [qrCodeSize, setQrCodeSize] = useState<number>(qrCodeContainerWidth - styles.ph5.paddingHorizontal * 2 - variables.qrShareHorizontalPadding * 2);
     const svgRef = useRef<Svg>();
 
     useImperativeHandle(

From 0633b5ed2193d3795836269c54449ac6d40fadf9 Mon Sep 17 00:00:00 2001
From: Huu Le <lethanhhuu95@gmail.com>
Date: Tue, 16 Jul 2024 20:53:21 +0700
Subject: [PATCH 2/2] update condition to get container width

---
 src/components/QRShare/index.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/QRShare/index.tsx b/src/components/QRShare/index.tsx
index 6629a07fab4b..30fd9d8e5fe8 100644
--- a/src/components/QRShare/index.tsx
+++ b/src/components/QRShare/index.tsx
@@ -1,7 +1,7 @@
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useImperativeHandle, useRef, useState} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
-import {Platform, View} from 'react-native';
+import {View} from 'react-native';
 import type {Svg} from 'react-native-svg';
 import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';
 import ImageSVG from '@components/ImageSVG';
@@ -11,7 +11,6 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as Browser from '@libs/Browser';
 import variables from '@styles/variables';
 import type {QRShareHandle, QRShareProps} from './types';
 
@@ -19,11 +18,8 @@ function QRShare({url, title, subtitle, logo, logoRatio, logoMarginRatio}: QRSha
     const styles = useThemeStyles();
     const theme = useTheme();
     const {isSmallScreenWidth} = useResponsiveLayout();
-    const isMobilePlatform = Platform.OS === 'android' || Platform.OS === 'ios';
-    const isMobileBrowser = Browser.isMobile();
-    const isMobile = isMobilePlatform || isMobileBrowser;
     const {windowWidth} = useWindowDimensions();
-    const qrCodeContainerWidth = isMobile || isSmallScreenWidth ? windowWidth : variables.sideBarWidth;
+    const qrCodeContainerWidth = isSmallScreenWidth ? windowWidth : variables.sideBarWidth;
 
     const [qrCodeSize, setQrCodeSize] = useState<number>(qrCodeContainerWidth - styles.ph5.paddingHorizontal * 2 - variables.qrShareHorizontalPadding * 2);
     const svgRef = useRef<Svg>();