react-native-qrcode-svg 6.3.22 → 6.3.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-qrcode-svg",
-  "version": "6.3.22",
+  "version": "6.3.24",
   "description": "A QR Code generator for React Native based on react-native-svg and javascript-qrcode.",
   "main": "index.js",
   "types": "index.d.ts",

package/src/LogoSVG/index.js

@@ -1,22 +1,22 @@
-import React from "react";
-import { Image } from "react-native-svg";
-import { isString, isUrlString } from "../utils";
+import React from 'react'
+import { Image } from 'react-native-svg'
+import { isString, isUrlString } from '../utils'
 
 const LogoSVG = ({ svg, logoSize, logoColor }) => {
   if (isString(svg)) {
     const href = isUrlString(svg)
       ? svg
-      : `data:image/svg+xml;base64,${window.btoa(svg)}`;
+      : `data:image/svg+xml;base64,${window.btoa(svg)}`
 
-    return <Image href={encodeURI(href)} width={logoSize} height={logoSize} />;
+    return <Image href={encodeURI(href)} width={logoSize} height={logoSize} />
   }
 
   // if `svg` prop is actually a svg asset wrapped in a React component, then we can just render it
-  const LogoSVGComponent = svg;
+  const LogoSVGComponent = svg
 
   return (
     <LogoSVGComponent fill={logoColor} width={logoSize} height={logoSize} />
-  );
-};
+  )
+}
 
-export default LogoSVG;
+export default LogoSVG

package/src/LogoSVG/index.native.js

@@ -1,24 +1,24 @@
-import React from "react";
-import { LocalSvg } from "react-native-svg/css";
-import { SvgUri, SvgXml } from "react-native-svg";
-import { isString, isUrlString } from "../utils";
+import React from 'react'
+import { LocalSvg } from 'react-native-svg/css'
+import { SvgUri, SvgXml } from 'react-native-svg'
+import { isString, isUrlString } from '../utils'
 
 const LogoSVG = ({ svg, logoSize, logoColor }) => {
   if (isString(svg)) {
     if (isUrlString(svg)) {
       return (
         <SvgUri uri={svg} fill={logoColor} width={logoSize} height={logoSize} />
-      );
+      )
     }
 
     return (
       <SvgXml xml={svg} fill={logoColor} width={logoSize} height={logoSize} />
-    );
+    )
   }
 
   return (
     <LocalSvg asset={svg} fill={logoColor} width={logoSize} height={logoSize} />
-  );
-};
+  )
+}
 
-export default LogoSVG;
+export default LogoSVG

package/src/__tests__/QRCode-test.js

@@ -48,9 +48,9 @@ describe('QRCode', () => {
   it('renders with segmented value', () => {
     const onErrorMock = jest.fn()
     const segs = [
-      { data: "ABCDEFG", mode: "alphanumeric" },
-      { data: "0123456", mode: "numeric" },
-    ];
+      { data: 'ABCDEFG', mode: 'alphanumeric' },
+      { data: '0123456', mode: 'numeric' }
+    ]
     const tree = renderer.create(
       <QRCode
         value={segs}

package/src/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useId } from "react";
+import React, { useMemo, useId } from 'react'
 import Svg, {
   Defs,
   G,
@@ -7,11 +7,11 @@ import Svg, {
   Image,
   ClipPath,
   LinearGradient,
-  Stop,
-} from "react-native-svg";
-import genMatrix from "./genMatrix";
-import transformMatrixIntoPath from "./transformMatrixIntoPath";
-import LogoSVG from "./LogoSVG";
+  Stop
+} from 'react-native-svg'
+import genMatrix from './genMatrix'
+import transformMatrixIntoPath from './transformMatrixIntoPath'
+import LogoSVG from './LogoSVG'
 
 const renderLogo = ({
   size,
@@ -25,13 +25,13 @@ const renderLogo = ({
   logoBorderRadius,
   clipPathId
 }) => {
-  const logoPosition = (size - logoSize - logoMargin * 2) / 2;
-  const logoBackgroundSize = logoSize + logoMargin * 2;
+  const logoPosition = (size - logoSize - logoMargin * 2) / 2
+  const logoBackgroundSize = logoSize + logoMargin * 2
   const logoBackgroundBorderRadius =
-    logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius;
-  const clipLogoBackgroundId = `clip-logo-background-${clipPathId}`;
-  const clipLogoId = `clip-logo-${clipPathId}`;
-  
+    logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius
+  const clipLogoBackgroundId = `clip-logo-background-${clipPathId}`
+  const clipLogoId = `clip-logo-${clipPathId}`
+
   return (
     <G x={logoPosition} y={logoPosition}>
       <Defs>
@@ -66,64 +66,66 @@ const renderLogo = ({
           height={logoBackgroundSize - logoMargin}
           fill={logoBackgroundColor}
         />
-        {logoSVG ? (
-          <LogoSVG svg={logoSVG} logoSize={logoSize} logoColor={logoColor} />
-        ) : (
-          <Image
-            width={logoSize}
-            height={logoSize}
-            preserveAspectRatio="xMidYMid slice"
-            href={logo}
-            clipPath={`url(#${clipLogoId})`}
-          />
-        )}
+        {logoSVG
+          ? (
+            <LogoSVG svg={logoSVG} logoSize={logoSize} logoColor={logoColor} />
+            )
+          : (
+            <Image
+              width={logoSize}
+              height={logoSize}
+              preserveAspectRatio='xMidYMid slice'
+              href={logo}
+              clipPath={`url(#${clipLogoId})`}
+            />
+            )}
       </G>
     </G>
-  );
-};
+  )
+}
 
 const QRCode = ({
-  value = "this is a QR code",
+  value = 'this is a QR code',
   size = 100,
-  color = "black",
-  backgroundColor = "white",
+  color = 'black',
+  backgroundColor = 'white',
   logo,
   logoSVG,
   logoSize = size * 0.2,
-  logoBackgroundColor = "transparent",
+  logoBackgroundColor = 'transparent',
   logoColor,
   logoMargin = 2,
   logoBorderRadius = 0,
   quietZone = 0,
   enableLinearGradient = false,
-  gradientDirection = ["0%", "0%", "100%", "100%"],
-  linearGradient = ["rgb(255,0,0)", "rgb(0,255,255)"],
-  ecl = "M",
+  gradientDirection = ['0%', '0%', '100%', '100%'],
+  linearGradient = ['rgb(255,0,0)', 'rgb(0,255,255)'],
+  ecl = 'M',
   getRef,
   onError,
-  testID,
+  testID
 }) => {
-  const clipPathId = useId();
+  const clipPathId = useId()
 
   const result = useMemo(() => {
     try {
-      return transformMatrixIntoPath(genMatrix(value, ecl), size);
+      return transformMatrixIntoPath(genMatrix(value, ecl), size)
     } catch (error) {
-      if (onError && typeof onError === "function") {
-        onError(error);
+      if (onError && typeof onError === 'function') {
+        onError(error)
       } else {
         // Pass the error when no handler presented
-        throw error;
+        throw error
       }
     }
-  }, [value, size, ecl]);
+  }, [value, size, ecl])
 
   if (!result) {
-    return null;
+    return null
   }
 
-  const { path, cellSize } = result;
-  const displayLogo = logo || logoSVG;
+  const { path, cellSize } = result
+  const displayLogo = logo || logoSVG
 
   return (
     <Svg
@@ -133,21 +135,21 @@ const QRCode = ({
         -quietZone,
         -quietZone,
         size + quietZone * 2,
-        size + quietZone * 2,
-      ].join(" ")}
+        size + quietZone * 2
+      ].join(' ')}
       width={size}
       height={size}
     >
       <Defs>
         <LinearGradient
-          id="grad"
+          id='grad'
           x1={gradientDirection[0]}
           y1={gradientDirection[1]}
           x2={gradientDirection[2]}
           y2={gradientDirection[3]}
         >
-          <Stop offset="0" stopColor={linearGradient[0]} stopOpacity="1" />
-          <Stop offset="1" stopColor={linearGradient[1]} stopOpacity="1" />
+          <Stop offset='0' stopColor={linearGradient[0]} stopOpacity='1' />
+          <Stop offset='1' stopColor={linearGradient[1]} stopOpacity='1' />
         </LinearGradient>
       </Defs>
       <G>
@@ -162,8 +164,8 @@ const QRCode = ({
       <G>
         <Path
           d={path}
-          strokeLinecap="butt"
-          stroke={enableLinearGradient ? "url(#grad)" : color}
+          strokeLinecap='butt'
+          stroke={enableLinearGradient ? 'url(#grad)' : color}
           strokeWidth={cellSize}
         />
       </G>
@@ -178,10 +180,10 @@ const QRCode = ({
           logoColor,
           logoMargin,
           logoBorderRadius,
-          clipPathId,
+          clipPathId
         })}
     </Svg>
-  );
-};
+  )
+}
 
-export default QRCode;
+export default QRCode

package/src/utils.js

@@ -1,7 +1,7 @@
-export function isString(variable) {
-    return typeof variable === "string";
+export function isString (variable) {
+  return typeof variable === 'string'
 }
 
-export function isUrlString(variable) {
-    return isString(variable) && variable.startsWith("http");
+export function isUrlString (variable) {
+  return isString(variable) && variable.startsWith('http')
 }