react-native-qrcode-svg 6.3.2 → 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 */

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-native-qrcode-svg",
-  "version": "6.3.2",
+  "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",
@@ -52,6 +60,7 @@
     "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,150 +1,183 @@
-global.TextEncoder = require('text-encoding').TextEncoder;
+global.TextEncoder = require("text-encoding").TextEncoder;
 
-import React, { useMemo } from 'react';
-import Svg, { Defs, G, Path, Rect, Image, ClipPath, LinearGradient, Stop } from 'react-native-svg';
-import genMatrix from './genMatrix';
-import transformMatrixIntoPath from './transformMatrixIntoPath';
+import React, { useMemo } from "react";
+import Svg, {
+  Defs,
+  G,
+  Path,
+  Rect,
+  Image,
+  ClipPath,
+  LinearGradient,
+  Stop,
+} from "react-native-svg";
+import genMatrix from "./genMatrix";
+import transformMatrixIntoPath from "./transformMatrixIntoPath";
+import LogoSVG from "./LogoSVG";
 
 const renderLogo = ({
-    size,
-    logo,
-    logoSize,
-    logoBackgroundColor,
-    logoMargin,
-    logoBorderRadius,
+  size,
+  backgroundColor,
+  logo,
+  logoSVG,
+  logoSize,
+  logoBackgroundColor,
+  logoColor,
+  logoMargin,
+  logoBorderRadius,
 }) => {
-    const logoPosition = (size - logoSize - logoMargin * 2) / 2;
-    const logoBackgroundSize = logoSize + logoMargin * 2;
-    const logoBackgroundBorderRadius =
-        logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius;
+  const logoPosition = (size - logoSize - logoMargin * 2) / 2;
+  const logoBackgroundSize = logoSize + logoMargin * 2;
+  const logoBackgroundBorderRadius =
+    logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius;
 
-    return (
-        <G x={logoPosition} y={logoPosition}>
-            <Defs>
-                <ClipPath id='clip-logo-background'>
-                    <Rect
-                        width={logoBackgroundSize}
-                        height={logoBackgroundSize}
-                        rx={logoBackgroundBorderRadius}
-                        ry={logoBackgroundBorderRadius}
-                    />
-                </ClipPath>
-                <ClipPath id='clip-logo'>
-                    <Rect
-                        width={logoSize}
-                        height={logoSize}
-                        rx={logoBorderRadius}
-                        ry={logoBorderRadius}
-                    />
-                </ClipPath>
-            </Defs>
-            <G>
-                <Rect
-                    width={logoBackgroundSize}
-                    height={logoBackgroundSize}
-                    fill={logoBackgroundColor}
-                    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>
-        </G>
-    );
+  return (
+    <G x={logoPosition} y={logoPosition}>
+      <Defs>
+        <ClipPath id="clip-logo-background">
+          <Rect
+            width={logoBackgroundSize}
+            height={logoBackgroundSize}
+            rx={logoBackgroundBorderRadius}
+            ry={logoBackgroundBorderRadius}
+          />
+        </ClipPath>
+        <ClipPath id="clip-logo">
+          <Rect
+            width={logoSize}
+            height={logoSize}
+            rx={logoBorderRadius}
+            ry={logoBorderRadius}
+          />
+        </ClipPath>
+      </Defs>
+      <G>
+        <Rect
+          width={logoBackgroundSize}
+          height={logoBackgroundSize}
+          fill={backgroundColor}
+          clipPath="url(#clip-logo-background)"
+        />
+      </G>
+      <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,
-  testID
+  testID,
 }) => {
-    const result = useMemo(() => {
-        try {
-            return transformMatrixIntoPath(genMatrix(value, ecl), size);
-        } catch (error) {
-            if (onError && typeof onError === 'function') {
-                onError(error);
-            } else {
-                // Pass the error when no handler presented
-                throw error;
-            }
-        }
-    }, [value, size, ecl]);
-
-    if (!result) {
-        return null;
+  const result = useMemo(() => {
+    try {
+      return transformMatrixIntoPath(genMatrix(value, ecl), size);
+    } catch (error) {
+      if (onError && typeof onError === "function") {
+        onError(error);
+      } else {
+        // Pass the error when no handler presented
+        throw error;
+      }
     }
+  }, [value, size, ecl]);
+
+  if (!result) {
+    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(' ')}
-            width={size}
-            height={size}
+  return (
+    <Svg
+      testID={testID}
+      ref={getRef}
+      viewBox={[
+        -quietZone,
+        -quietZone,
+        size + quietZone * 2,
+        size + quietZone * 2,
+      ].join(" ")}
+      width={size}
+      height={size}
+    >
+      <Defs>
+        <LinearGradient
+          id="grad"
+          x1={gradientDirection[0]}
+          y1={gradientDirection[1]}
+          x2={gradientDirection[2]}
+          y2={gradientDirection[3]}
         >
-            <Defs>
-                <LinearGradient
-                    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' />
-                </LinearGradient>
-            </Defs>
-            <G>
-                <Rect
-                    x={-quietZone}
-                    y={-quietZone}
-                    width={size + quietZone * 2}
-                    height={size + quietZone * 2}
-                    fill={backgroundColor}
-                />
-            </G>
-            <G>
-                <Path
-                    d={path}
-                    strokeLinecap='butt'
-                    stroke={enableLinearGradient ? 'url(#grad)' : color}
-                    strokeWidth={cellSize}
-                />
-            </G>
-            {logo &&
-                renderLogo({
-                    size,
-                    logo,
-                    logoSize,
-                    logoBackgroundColor,
-                    logoMargin,
-                    logoBorderRadius,
-                })}
-        </Svg>
-    );
+          <Stop offset="0" stopColor={linearGradient[0]} stopOpacity="1" />
+          <Stop offset="1" stopColor={linearGradient[1]} stopOpacity="1" />
+        </LinearGradient>
+      </Defs>
+      <G>
+        <Rect
+          x={-quietZone}
+          y={-quietZone}
+          width={size + quietZone * 2}
+          height={size + quietZone * 2}
+          fill={backgroundColor}
+        />
+      </G>
+      <G>
+        <Path
+          d={path}
+          strokeLinecap="butt"
+          stroke={enableLinearGradient ? "url(#grad)" : color}
+          strokeWidth={cellSize}
+        />
+      </G>
+      {displayLogo &&
+        renderLogo({
+          size,
+          backgroundColor,
+          logo,
+          logoSVG,
+          logoSize,
+          logoBackgroundColor,
+          logoColor,
+          logoMargin,
+          logoBorderRadius,
+        })}
+    </Svg>
+  );
 };
 
 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"
-}