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

* 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

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,39 +102,74 @@ 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 (
-    <QRCode
+    <View style={{position: 'relative'}}>
-      data={link}
+      {/* 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. */}
-      style={[
+      {isWeb && logoArea && (
-        a.rounded_sm,
+        <View
-        {height: 225, width: 225, backgroundColor: '#f3f3f3'},
+          style={{
-      ]}
+            position: 'absolute',
-      pieceSize={isWeb ? 8 : 6}
+            left: logoArea.x,
-      padding={20}
+            top: logoArea.y + 1,
-      // pieceLiquidRadius={2}
+            zIndex: 1,
-      pieceBorderRadius={isWeb ? 4.5 : 3.5}
+            padding: 4,
-      outerEyesOptions={{
+          }}>
-        topLeft: {
+          <Logo width={logoArea.width - 14} height={logoArea.height - 14} />
-          borderRadius: [12, 12, 0, 12],
+        </View>
-          color: t.palette.primary_500,
+      )}
-        },
+      <QRCode
-        topRight: {
+        data={link}
-          borderRadius: [12, 12, 12, 0],
+        style={[
-          color: t.palette.primary_500,
+          a.rounded_sm,
-        },
+          {height: 225, width: 225, backgroundColor: '#f3f3f3'},
-        bottomLeft: {
+        ]}
-          borderRadius: [12, 0, 12, 12],
+        pieceSize={isWeb ? 8 : 6}
-          color: t.palette.primary_500,
+        padding={20}
-        },
+        pieceBorderRadius={isWeb ? 4.5 : 3.5}
-      }}
+        outerEyesOptions={{
-      innerEyesOptions={{borderRadius: 3}}
+          topLeft: {
-      logo={{
+            borderRadius: [12, 12, 0, 12],
-        href: require('../../../assets/logo.png'),
+            color: t.palette.primary_500,
-        scale: 0.95,
+          },
-        padding: 2,
+          topRight: {
-        hidePieces: true,
+            borderRadius: [12, 12, 12, 0],
-      }}
+            color: t.palette.primary_500,
-    />
+          },
+          bottomLeft: {
+            borderRadius: [12, 0, 12, 12],
+            color: t.palette.primary_500,
+          },
+        }}
+        innerEyesOptions={{borderRadius: 3}}
+        logo={{
+          href: require('../../../assets/logo.png'),
+          ...(isWeb && {
+            onChange: onLogoAreaChange,
+            padding: 28,
+          }),
+          ...(!isWeb && {
+            padding: 2,
+            scale: 0.95,
+          }),
+          hidePieces: true,
+        }}
+      />
+    </View>
   )
 }