react-native-qrcode-svg 6.3.20 → 6.3.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +13 -1
  2. package/src/index.js +13 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-qrcode-svg",
3
- "version": "6.3.20",
3
+ "version": "6.3.22",
4
4
  "description": "A QR Code generator for React Native based on react-native-svg and javascript-qrcode.",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -55,6 +55,18 @@
55
55
  "react-native": ">=0.63.4",
56
56
  "react-native-svg": ">=14.0.0"
57
57
  },
58
+ "devEngines": {
59
+ "runtime": {
60
+ "name": "node",
61
+ "version": ">=24.19.0",
62
+ "onFail": "error"
63
+ },
64
+ "packageManager": {
65
+ "name": "npm",
66
+ "version": ">=11.10.0",
67
+ "onFail": "error"
68
+ }
69
+ },
58
70
  "dependencies": {
59
71
  "prop-types": "^15.8.0",
60
72
  "qrcode": "^1.5.4",
package/src/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useMemo } from "react";
1
+ import React, { useMemo, useId } from "react";
2
2
  import Svg, {
3
3
  Defs,
4
4
  G,
@@ -23,16 +23,19 @@ const renderLogo = ({
23
23
  logoColor,
24
24
  logoMargin,
25
25
  logoBorderRadius,
26
+ clipPathId
26
27
  }) => {
27
28
  const logoPosition = (size - logoSize - logoMargin * 2) / 2;
28
29
  const logoBackgroundSize = logoSize + logoMargin * 2;
29
30
  const logoBackgroundBorderRadius =
30
31
  logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius;
31
-
32
+ const clipLogoBackgroundId = `clip-logo-background-${clipPathId}`;
33
+ const clipLogoId = `clip-logo-${clipPathId}`;
34
+
32
35
  return (
33
36
  <G x={logoPosition} y={logoPosition}>
34
37
  <Defs>
35
- <ClipPath id="clip-logo-background">
38
+ <ClipPath id={clipLogoBackgroundId}>
36
39
  <Rect
37
40
  width={logoBackgroundSize}
38
41
  height={logoBackgroundSize}
@@ -40,7 +43,7 @@ const renderLogo = ({
40
43
  ry={logoBackgroundBorderRadius}
41
44
  />
42
45
  </ClipPath>
43
- <ClipPath id="clip-logo">
46
+ <ClipPath id={clipLogoId}>
44
47
  <Rect
45
48
  width={logoSize}
46
49
  height={logoSize}
@@ -54,10 +57,10 @@ const renderLogo = ({
54
57
  width={logoBackgroundSize}
55
58
  height={logoBackgroundSize}
56
59
  fill={backgroundColor}
57
- clipPath="url(#clip-logo-background)"
60
+ clipPath={`url(#${clipLogoBackgroundId})`}
58
61
  />
59
62
  </G>
60
- <G x={logoMargin} y={logoMargin} clipPath="url(#clip-logo)">
63
+ <G x={logoMargin} y={logoMargin} clipPath={`url(#${clipLogoId})`}>
61
64
  <Rect
62
65
  width={logoBackgroundSize - logoMargin}
63
66
  height={logoBackgroundSize - logoMargin}
@@ -71,7 +74,7 @@ const renderLogo = ({
71
74
  height={logoSize}
72
75
  preserveAspectRatio="xMidYMid slice"
73
76
  href={logo}
74
- clipPath="url(#clip-logo)"
77
+ clipPath={`url(#${clipLogoId})`}
75
78
  />
76
79
  )}
77
80
  </G>
@@ -100,6 +103,8 @@ const QRCode = ({
100
103
  onError,
101
104
  testID,
102
105
  }) => {
106
+ const clipPathId = useId();
107
+
103
108
  const result = useMemo(() => {
104
109
  try {
105
110
  return transformMatrixIntoPath(genMatrix(value, ecl), size);
@@ -173,6 +178,7 @@ const QRCode = ({
173
178
  logoColor,
174
179
  logoMargin,
175
180
  logoBorderRadius,
181
+ clipPathId,
176
182
  })}
177
183
  </Svg>
178
184
  );