react-native-qrcode-svg 6.3.1 → 6.3.11

package/README.md

@@ -164,9 +164,3 @@ import RNFS from "react-native-fs"
 ### Dependencies
 
 * [node-qrcode](https://github.com/soldair/node-qrcode)
-
----
-
-If you like this project, please consider buy me a coffee :)
-
-https://www.buymeacoffee.com/LquC7mid5

package/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { Image, ImageSourcePropType } from "react-native";
+import type {ImageSourcePropType} from "react-native";
+import type {SvgProps} from "react-native-svg";
 
 declare class QRCode extends React.PureComponent<QRCodeProps, any> {}
 
@@ -12,13 +13,20 @@ export interface QRCodeProps {
   color?: string;
   /* the color of the background */
   backgroundColor?: string;
+  /* SVG to render as logo.
+  * Can be either a svg string or a React component if you're using ex: '@svgr/webpack' or similar
+  * In case both this prop and `logo` are provided, then this prop takes precedence and `logo` will be ignored. */
+  logoSVG?: React.FC<SvgProps> | string;
   /* an image source object. example {uri: 'base64string'} or {require('pathToImage')} */
-  logo?: ImageSourcePropType;
+  logo?: ImageSourcePropType | string;
   /* logo size in pixels */
   logoSize?: number;
   /* the logo gets a filled rectangular background with this color. Use 'transparent'
          if your logo already has its own backdrop. Default = same as backgroundColor */
   logoBackgroundColor?: string;
+  /* If the logo is provided via `logoSVG` prop, this color will be set as it's `fill` property,
+  * otherwise it does nothing */
+  logoColor?: string;
   /* logo's distance to its wrapper */
   logoMargin?: number;
   /* the border-radius of logo image */
@@ -37,6 +45,8 @@ export interface QRCodeProps {
   ecl?: "L" | "M" | "Q" | "H";
   /* error handler called when matrix fails to generate */
   onError?: Function;
+  /** testID for testing */
+  testID?: string;
 }
 
 export default QRCode;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-native-qrcode-svg",
-  "version": "6.3.1",
+  "version": "6.3.11",
   "description": "A QR Code generator for React Native based on react-native-svg and javascript-qrcode.",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
-    "prepare": "rm -rf example",
+    "prepack": "rm -rf example",
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
     "lint": "standard 'src/**/*.js'",
@@ -30,6 +30,14 @@
     "type": "git",
     "url": "git+ssh://git@github.com/awesomejerry/react-native-qrcode-svg.git"
   },
+  "files": [
+    "Example",
+    "screenshot",
+    "src",
+    "babel.config.js",
+    "index.d.ts",
+    "index.js"
+  ],
   "keywords": [
     "react-native",
     "qrcode",
@@ -42,15 +50,17 @@
   },
   "homepage": "https://github.com/awesomejerry/react-native-qrcode-svg#readme",
   "peerDependencies": {
-    "react-native": ">=0.63.4",
     "react": "*",
+    "react-native": ">=0.63.4",
     "react-native-svg": ">=13.2.0"
   },
   "dependencies": {
     "prop-types": "^15.8.0",
-    "qrcode": "^1.5.1"
+    "qrcode": "^1.5.1",
+    "text-encoding": "^0.7.0"
   },
   "devDependencies": {
+    "@types/react": "^18.2.75",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.4.2",
     "husky": "^7.0.4",

package/src/LogoSVG/index.js

@@ -0,0 +1,22 @@
+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)}`;
+
+    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;
+
+  return (
+    <LogoSVGComponent fill={logoColor} width={logoSize} height={logoSize} />
+  );
+};
+
+export default LogoSVG;

package/src/LogoSVG/index.native.js

@@ -0,0 +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";
+
+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;

package/src/index.js

@@ -1,4 +1,6 @@
-import React, { useMemo } from 'react'
+global.TextEncoder = require("text-encoding").TextEncoder;
+
+import React, { useMemo } from "react";
 import Svg, {
   Defs,
   G,
@@ -7,28 +9,32 @@ import Svg, {
   Image,
   ClipPath,
   LinearGradient,
-  Stop
-} from 'react-native-svg'
-import genMatrix from './genMatrix'
-import transformMatrixIntoPath from './transformMatrixIntoPath'
+  Stop,
+} from "react-native-svg";
+import genMatrix from "./genMatrix";
+import transformMatrixIntoPath from "./transformMatrixIntoPath";
+import LogoSVG from "./LogoSVG";
 
 const renderLogo = ({
   size,
+  backgroundColor,
   logo,
+  logoSVG,
   logoSize,
   logoBackgroundColor,
+  logoColor,
   logoMargin,
-  logoBorderRadius
+  logoBorderRadius,
 }) => {
-  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
+    logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius;
 
   return (
     <G x={logoPosition} y={logoPosition}>
       <Defs>
-        <ClipPath id='clip-logo-background'>
+        <ClipPath id="clip-logo-background">
           <Rect
             width={logoBackgroundSize}
             height={logoBackgroundSize}
@@ -36,7 +42,7 @@ const renderLogo = ({
             ry={logoBackgroundBorderRadius}
           />
         </ClipPath>
-        <ClipPath id='clip-logo'>
+        <ClipPath id="clip-logo">
           <Rect
             width={logoSize}
             height={logoSize}
@@ -49,82 +55,96 @@ const renderLogo = ({
         <Rect
           width={logoBackgroundSize}
           height={logoBackgroundSize}
-          fill={logoBackgroundColor}
-          clipPath='url(#clip-logo-background)'
+          fill={backgroundColor}
+          clipPath="url(#clip-logo-background)"
         />
       </G>
-      <G x={logoMargin} y={logoMargin}>
-        <Image
-          width={logoSize}
-          height={logoSize}
-          preserveAspectRatio='xMidYMid slice'
-          href={logo}
-          clipPath='url(#clip-logo)'
+      <G x={logoMargin} y={logoMargin} clipPath="url(#clip-logo)">
+        <Rect
+          width={logoBackgroundSize - logoMargin}
+          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(#clip-logo)"
+          />
+        )}
       </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
+  onError,
+  testID,
 }) => {
   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 { path, cellSize } = result;
+  const displayLogo = logo || logoSVG;
 
   return (
     <Svg
+      testID={testID}
       ref={getRef}
       viewBox={[
         -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>
@@ -139,22 +159,25 @@ const QRCode = ({
       <G>
         <Path
           d={path}
-          strokeLinecap='butt'
-          stroke={enableLinearGradient ? 'url(#grad)' : color}
+          strokeLinecap="butt"
+          stroke={enableLinearGradient ? "url(#grad)" : color}
           strokeWidth={cellSize}
         />
       </G>
-      {logo &&
+      {displayLogo &&
         renderLogo({
           size,
+          backgroundColor,
           logo,
+          logoSVG,
           logoSize,
           logoBackgroundColor,
+          logoColor,
           logoMargin,
-          logoBorderRadius
+          logoBorderRadius,
         })}
     </Svg>
-  )
-}
+  );
+};
 
-export default QRCode
+export default QRCode;

package/src/utils.js

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

package/.github/workflows/npmpublish.yml

@@ -1,31 +0,0 @@
-name: Node.js Package
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-      - run: npm ci
-      - run: npm test
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/.huskyrc

@@ -1,5 +0,0 @@
-{
-  "hooks": {
-    "pre-commit": "npm run lint:staged && npm run test"
-  }
-}

package/.lintstagedrc

@@ -1,3 +0,0 @@
-{
-  "*.js": "npm run lint"
-}