fix: make logo show in qr code by absolutely positioning svg on top of it (#9373) (#9700)

* fix: make logo show in qr code by absolutely positioning svg on top of it

* fix: remove log and add explanation comment

* fix: only apply qrcode fix to web

Co-authored-by: Elijah Seed-Arita <elijaharita@gmail.com>

src/components/StarterPack/QrCode.tsx

@@ -1,4 +1,4 @@
-import {lazy} from 'react'
+import {lazy, useState} from 'react'
 import {View} from 'react-native'
 // @ts-expect-error missing types
 import QRCode from 'react-native-qrcode-styled'
@@ -102,8 +102,37 @@ export function QrCode({
 
 export function QrCodeInner({link}: {link: string}) {
   const t = useTheme()
+  const [logoArea, setLogoArea] = useState<{
+    x: number
+    y: number
+    width: number
+    height: number
+  } | null>(null)
+
+  const onLogoAreaChange = (area: {
+    x: number
+    y: number
+    width: number
+    height: number
+  }) => {
+    setLogoArea(area)
+  }
 
   return (
+    <View style={{position: 'relative'}}>
+      {/* An SVG version of the logo is placed on top of normal `QRCode` `logo` prop, since the PNG fails to load before the export completes on web. */}
+      {isWeb && logoArea && (
+        <View
+          style={{
+            position: 'absolute',
+            left: logoArea.x,
+            top: logoArea.y + 1,
+            zIndex: 1,
+            padding: 4,
+          }}>
+          <Logo width={logoArea.width - 14} height={logoArea.height - 14} />
+        </View>
+      )}
       <QRCode
         data={link}
         style={[
@@ -112,7 +141,6 @@ export function QrCodeInner({link}: {link: string}) {
         ]}
         pieceSize={isWeb ? 8 : 6}
         padding={20}
-      // pieceLiquidRadius={2}
         pieceBorderRadius={isWeb ? 4.5 : 3.5}
         outerEyesOptions={{
           topLeft: {
@@ -131,10 +159,17 @@ export function QrCodeInner({link}: {link: string}) {
         innerEyesOptions={{borderRadius: 3}}
         logo={{
           href: require('../../../assets/logo.png'),
-        scale: 0.95,
+          ...(isWeb && {
+            onChange: onLogoAreaChange,
+            padding: 28,
+          }),
+          ...(!isWeb && {
             padding: 2,
+            scale: 0.95,
+          }),
           hidePieces: true,
         }}
       />
+    </View>
   )
 }