react-native-qrcode-svg 6.3.1 → 6.3.2

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 (3) hide show
  1. package/index.d.ts +2 -0
  2. package/package.json +4 -3
  3. package/src/index.js +123 -133
package/index.d.ts CHANGED
@@ -37,6 +37,8 @@ export interface QRCodeProps {
37
37
  ecl?: "L" | "M" | "Q" | "H";
38
38
  /* error handler called when matrix fails to generate */
39
39
  onError?: Function;
40
+ /** testID for testing */
41
+ testID?: string;
40
42
  }
41
43
 
42
44
  export default QRCode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-qrcode-svg",
3
- "version": "6.3.1",
3
+ "version": "6.3.2",
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",
@@ -42,13 +42,14 @@
42
42
  },
43
43
  "homepage": "https://github.com/awesomejerry/react-native-qrcode-svg#readme",
44
44
  "peerDependencies": {
45
- "react-native": ">=0.63.4",
46
45
  "react": "*",
46
+ "react-native": ">=0.63.4",
47
47
  "react-native-svg": ">=13.2.0"
48
48
  },
49
49
  "dependencies": {
50
50
  "prop-types": "^15.8.0",
51
- "qrcode": "^1.5.1"
51
+ "qrcode": "^1.5.1",
52
+ "text-encoding": "^0.7.0"
52
53
  },
53
54
  "devDependencies": {
54
55
  "babel-eslint": "^10.1.0",
package/src/index.js CHANGED
@@ -1,70 +1,63 @@
1
- import React, { useMemo } from 'react'
2
- import Svg, {
3
- Defs,
4
- G,
5
- Path,
6
- Rect,
7
- Image,
8
- ClipPath,
9
- LinearGradient,
10
- Stop
11
- } from 'react-native-svg'
12
- import genMatrix from './genMatrix'
13
- import transformMatrixIntoPath from './transformMatrixIntoPath'
1
+ global.TextEncoder = require('text-encoding').TextEncoder;
2
+
3
+ import React, { useMemo } from 'react';
4
+ import Svg, { Defs, G, Path, Rect, Image, ClipPath, LinearGradient, Stop } from 'react-native-svg';
5
+ import genMatrix from './genMatrix';
6
+ import transformMatrixIntoPath from './transformMatrixIntoPath';
14
7
 
15
8
  const renderLogo = ({
16
- size,
17
- logo,
18
- logoSize,
19
- logoBackgroundColor,
20
- logoMargin,
21
- logoBorderRadius
9
+ size,
10
+ logo,
11
+ logoSize,
12
+ logoBackgroundColor,
13
+ logoMargin,
14
+ logoBorderRadius,
22
15
  }) => {
23
- const logoPosition = (size - logoSize - logoMargin * 2) / 2
24
- const logoBackgroundSize = logoSize + logoMargin * 2
25
- const logoBackgroundBorderRadius =
26
- logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius
16
+ const logoPosition = (size - logoSize - logoMargin * 2) / 2;
17
+ const logoBackgroundSize = logoSize + logoMargin * 2;
18
+ const logoBackgroundBorderRadius =
19
+ logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius;
27
20
 
28
- return (
29
- <G x={logoPosition} y={logoPosition}>
30
- <Defs>
31
- <ClipPath id='clip-logo-background'>
32
- <Rect
33
- width={logoBackgroundSize}
34
- height={logoBackgroundSize}
35
- rx={logoBackgroundBorderRadius}
36
- ry={logoBackgroundBorderRadius}
37
- />
38
- </ClipPath>
39
- <ClipPath id='clip-logo'>
40
- <Rect
41
- width={logoSize}
42
- height={logoSize}
43
- rx={logoBorderRadius}
44
- ry={logoBorderRadius}
45
- />
46
- </ClipPath>
47
- </Defs>
48
- <G>
49
- <Rect
50
- width={logoBackgroundSize}
51
- height={logoBackgroundSize}
52
- fill={logoBackgroundColor}
53
- clipPath='url(#clip-logo-background)'
54
- />
55
- </G>
56
- <G x={logoMargin} y={logoMargin}>
57
- <Image
58
- width={logoSize}
59
- height={logoSize}
60
- preserveAspectRatio='xMidYMid slice'
61
- href={logo}
62
- clipPath='url(#clip-logo)'
63
- />
64
- </G>
65
- </G>
66
- )
67
- }
21
+ return (
22
+ <G x={logoPosition} y={logoPosition}>
23
+ <Defs>
24
+ <ClipPath id='clip-logo-background'>
25
+ <Rect
26
+ width={logoBackgroundSize}
27
+ height={logoBackgroundSize}
28
+ rx={logoBackgroundBorderRadius}
29
+ ry={logoBackgroundBorderRadius}
30
+ />
31
+ </ClipPath>
32
+ <ClipPath id='clip-logo'>
33
+ <Rect
34
+ width={logoSize}
35
+ height={logoSize}
36
+ rx={logoBorderRadius}
37
+ ry={logoBorderRadius}
38
+ />
39
+ </ClipPath>
40
+ </Defs>
41
+ <G>
42
+ <Rect
43
+ width={logoBackgroundSize}
44
+ height={logoBackgroundSize}
45
+ fill={logoBackgroundColor}
46
+ clipPath='url(#clip-logo-background)'
47
+ />
48
+ </G>
49
+ <G x={logoMargin} y={logoMargin}>
50
+ <Image
51
+ width={logoSize}
52
+ height={logoSize}
53
+ preserveAspectRatio='xMidYMid slice'
54
+ href={logo}
55
+ clipPath='url(#clip-logo)'
56
+ />
57
+ </G>
58
+ </G>
59
+ );
60
+ };
68
61
 
69
62
  const QRCode = ({
70
63
  value = 'this is a QR code',
@@ -82,79 +75,76 @@ const QRCode = ({
82
75
  linearGradient = ['rgb(255,0,0)', 'rgb(0,255,255)'],
83
76
  ecl = 'M',
84
77
  getRef,
85
- onError
78
+ onError,
79
+ testID
86
80
  }) => {
87
- const result = useMemo(() => {
88
- try {
89
- return transformMatrixIntoPath(genMatrix(value, ecl), size)
90
- } catch (error) {
91
- if (onError && typeof onError === 'function') {
92
- onError(error)
93
- } else {
94
- // Pass the error when no handler presented
95
- throw error
96
- }
97
- }
98
- }, [value, size, ecl])
81
+ const result = useMemo(() => {
82
+ try {
83
+ return transformMatrixIntoPath(genMatrix(value, ecl), size);
84
+ } catch (error) {
85
+ if (onError && typeof onError === 'function') {
86
+ onError(error);
87
+ } else {
88
+ // Pass the error when no handler presented
89
+ throw error;
90
+ }
91
+ }
92
+ }, [value, size, ecl]);
99
93
 
100
- if (!result) {
101
- return null
102
- }
94
+ if (!result) {
95
+ return null;
96
+ }
103
97
 
104
- const { path, cellSize } = result
98
+ const { path, cellSize } = result;
105
99
 
106
- return (
107
- <Svg
108
- ref={getRef}
109
- viewBox={[
110
- -quietZone,
111
- -quietZone,
112
- size + quietZone * 2,
113
- size + quietZone * 2
114
- ].join(' ')}
115
- width={size}
116
- height={size}
117
- >
118
- <Defs>
119
- <LinearGradient
120
- id='grad'
121
- x1={gradientDirection[0]}
122
- y1={gradientDirection[1]}
123
- x2={gradientDirection[2]}
124
- y2={gradientDirection[3]}
100
+ return (
101
+ <Svg
102
+ testID={testID}
103
+ ref={getRef}
104
+ viewBox={[-quietZone, -quietZone, size + quietZone * 2, size + quietZone * 2].join(' ')}
105
+ width={size}
106
+ height={size}
125
107
  >
126
- <Stop offset='0' stopColor={linearGradient[0]} stopOpacity='1' />
127
- <Stop offset='1' stopColor={linearGradient[1]} stopOpacity='1' />
128
- </LinearGradient>
129
- </Defs>
130
- <G>
131
- <Rect
132
- x={-quietZone}
133
- y={-quietZone}
134
- width={size + quietZone * 2}
135
- height={size + quietZone * 2}
136
- fill={backgroundColor}
137
- />
138
- </G>
139
- <G>
140
- <Path
141
- d={path}
142
- strokeLinecap='butt'
143
- stroke={enableLinearGradient ? 'url(#grad)' : color}
144
- strokeWidth={cellSize}
145
- />
146
- </G>
147
- {logo &&
148
- renderLogo({
149
- size,
150
- logo,
151
- logoSize,
152
- logoBackgroundColor,
153
- logoMargin,
154
- logoBorderRadius
155
- })}
156
- </Svg>
157
- )
158
- }
108
+ <Defs>
109
+ <LinearGradient
110
+ id='grad'
111
+ x1={gradientDirection[0]}
112
+ y1={gradientDirection[1]}
113
+ x2={gradientDirection[2]}
114
+ y2={gradientDirection[3]}
115
+ >
116
+ <Stop offset='0' stopColor={linearGradient[0]} stopOpacity='1' />
117
+ <Stop offset='1' stopColor={linearGradient[1]} stopOpacity='1' />
118
+ </LinearGradient>
119
+ </Defs>
120
+ <G>
121
+ <Rect
122
+ x={-quietZone}
123
+ y={-quietZone}
124
+ width={size + quietZone * 2}
125
+ height={size + quietZone * 2}
126
+ fill={backgroundColor}
127
+ />
128
+ </G>
129
+ <G>
130
+ <Path
131
+ d={path}
132
+ strokeLinecap='butt'
133
+ stroke={enableLinearGradient ? 'url(#grad)' : color}
134
+ strokeWidth={cellSize}
135
+ />
136
+ </G>
137
+ {logo &&
138
+ renderLogo({
139
+ size,
140
+ logo,
141
+ logoSize,
142
+ logoBackgroundColor,
143
+ logoMargin,
144
+ logoBorderRadius,
145
+ })}
146
+ </Svg>
147
+ );
148
+ };
159
149
 
160
- export default QRCode
150
+ export default QRCode;