ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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>
authored by
Eric Bailey
Elijah Seed-Arita
and committed by
GitHub
f960d2fb
58ac9a3e
+68
-33
src/components/StarterPack/QrCode.tsx
+68
-33
src/components/StarterPack/QrCode.tsx
···
1
-
import {lazy} from 'react'
1
+
import {lazy, useState} from 'react'
2
2
import {View} from 'react-native'
3
3
// @ts-expect-error missing types
4
4
import QRCode from 'react-native-qrcode-styled'
···
102
102
103
103
export function QrCodeInner({link}: {link: string}) {
104
104
const t = useTheme()
105
+
const [logoArea, setLogoArea] = useState<{
106
+
x: number
107
+
y: number
108
+
width: number
109
+
height: number
110
+
} | null>(null)
111
+
112
+
const onLogoAreaChange = (area: {
113
+
x: number
114
+
y: number
115
+
width: number
116
+
height: number
117
+
}) => {
118
+
setLogoArea(area)
119
+
}
105
120
106
121
return (
107
-
<QRCode
108
-
data={link}
109
-
style={[
110
-
a.rounded_sm,
111
-
{height: 225, width: 225, backgroundColor: '#f3f3f3'},
112
-
]}
113
-
pieceSize={isWeb ? 8 : 6}
114
-
padding={20}
115
-
// pieceLiquidRadius={2}
116
-
pieceBorderRadius={isWeb ? 4.5 : 3.5}
117
-
outerEyesOptions={{
118
-
topLeft: {
119
-
borderRadius: [12, 12, 0, 12],
120
-
color: t.palette.primary_500,
121
-
},
122
-
topRight: {
123
-
borderRadius: [12, 12, 12, 0],
124
-
color: t.palette.primary_500,
125
-
},
126
-
bottomLeft: {
127
-
borderRadius: [12, 0, 12, 12],
128
-
color: t.palette.primary_500,
129
-
},
130
-
}}
131
-
innerEyesOptions={{borderRadius: 3}}
132
-
logo={{
133
-
href: require('../../../assets/logo.png'),
134
-
scale: 0.95,
135
-
padding: 2,
136
-
hidePieces: true,
137
-
}}
138
-
/>
122
+
<View style={{position: 'relative'}}>
123
+
{/* 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. */}
124
+
{isWeb && logoArea && (
125
+
<View
126
+
style={{
127
+
position: 'absolute',
128
+
left: logoArea.x,
129
+
top: logoArea.y + 1,
130
+
zIndex: 1,
131
+
padding: 4,
132
+
}}>
133
+
<Logo width={logoArea.width - 14} height={logoArea.height - 14} />
134
+
</View>
135
+
)}
136
+
<QRCode
137
+
data={link}
138
+
style={[
139
+
a.rounded_sm,
140
+
{height: 225, width: 225, backgroundColor: '#f3f3f3'},
141
+
]}
142
+
pieceSize={isWeb ? 8 : 6}
143
+
padding={20}
144
+
pieceBorderRadius={isWeb ? 4.5 : 3.5}
145
+
outerEyesOptions={{
146
+
topLeft: {
147
+
borderRadius: [12, 12, 0, 12],
148
+
color: t.palette.primary_500,
149
+
},
150
+
topRight: {
151
+
borderRadius: [12, 12, 12, 0],
152
+
color: t.palette.primary_500,
153
+
},
154
+
bottomLeft: {
155
+
borderRadius: [12, 0, 12, 12],
156
+
color: t.palette.primary_500,
157
+
},
158
+
}}
159
+
innerEyesOptions={{borderRadius: 3}}
160
+
logo={{
161
+
href: require('../../../assets/logo.png'),
162
+
...(isWeb && {
163
+
onChange: onLogoAreaChange,
164
+
padding: 28,
165
+
}),
166
+
...(!isWeb && {
167
+
padding: 2,
168
+
scale: 0.95,
169
+
}),
170
+
hidePieces: true,
171
+
}}
172
+
/>
173
+
</View>
139
174
)
140
175
}