fix: initial size for QR code Expensify#44436

src/components/QRShare/index.tsx

@@ -1,22 +1,30 @@
 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 [qrCodeSize, setQrCodeSize] = useState<number | undefined>();
+    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>(qrCodeContainerWidth - styles.ph5.paddingHorizontal * 2 - variables.qrShareHorizontalPadding * 2);
     const svgRef = useRef<Svg>();
 
     useImperativeHandle(