feat: circle mode for QR code styling

README.md

@@ -111,6 +111,7 @@ size            | 100        | Size of rendered image in pixels
 value           | 'this is a QR code' | String Value of the QR code. Can also accept an array of segments as defined in [Manual mode](https://github.com/soldair/node-qrcode#manual-mode). Ex. [{ data: 'ABCDEFG', mode: 'alphanumeric' }, { data: '0123456', mode: 'numeric' }, { data: [253,254,255], mode: 'byte' }]
 color           | 'black'        | Color of the QR code
 backgroundColor | 'white'        | Color of the background
+mode            | 'default'      | Style mode for QR. Valid values are "default" or "circle" 
 enableLinearGradient | false     | enables or disables linear gradient
 linearGradient  |  ['rgb(255,0,0)','rgb(0,255,255)']  | array of 2 rgb colors used to create the linear gradient
 gradientDirection| [170,0,0,0]  | the direction of the linear gradient

index.d.ts

@@ -37,6 +37,8 @@ export interface QRCodeProps {
   ecl?: "L" | "M" | "Q" | "H";
   /* error handler called when matrix fails to generate */
   onError?: Function;
+  /* mode of qr code default with draw path and circle will make circles. Defaults to normal*/
+  mode?: "default" | "circle";
 }
 
 export default QRCode;

src/index.js

@@ -11,6 +11,7 @@ import Svg, {
 } from 'react-native-svg'
 import genMatrix from './genMatrix'
 import transformMatrixIntoPath from './transformMatrixIntoPath'
+import transformMatrixIntoCirclePath from './transformMatrixIntoCirclePath'
 
 const renderLogo = ({
   size,
@@ -81,12 +82,17 @@ const QRCode = ({
   gradientDirection = ['0%', '0%', '100%', '100%'],
   linearGradient = ['rgb(255,0,0)', 'rgb(0,255,255)'],
   ecl = 'M',
+  mode = 'default',
   getRef,
   onError
 }) => {
   const result = useMemo(() => {
     try {
-      return transformMatrixIntoPath(genMatrix(value, ecl), size)
+      if (mode === 'default') {
+        return transformMatrixIntoPath(genMatrix(value, ecl), size)
+      } else {
+        return transformMatrixIntoCirclePath(genMatrix(value, ecl), size)
+      }
     } catch (error) {
       if (onError && typeof onError === 'function') {
         onError(error)
@@ -139,9 +145,10 @@ const QRCode = ({
       <G>
         <Path
           d={path}
+          fill={enableLinearGradient ? 'url(#grad)' : color}
           strokeLinecap='butt'
           stroke={enableLinearGradient ? 'url(#grad)' : color}
-          strokeWidth={cellSize}
+          strokeWidth={mode === 'default' ? cellSize : 0}
         />
       </G>
       {logo &&

src/transformMatrixIntoCirclePath.js

@@ -0,0 +1,21 @@
+export default (matrix, size) => {
+  const cellSize = size / matrix.length
+  let path = ''
+
+  matrix.forEach((row, i) => {
+    row.forEach((column, j) => {
+      if (column) {
+        path += `
+        M ${cellSize * j + cellSize / 2} ${cellSize * i}
+        A ${cellSize / 2} 0 0 1 1 ${cellSize * j + cellSize / 2 - 0.0001} ${
+          cellSize * i - 0.00001
+        }`
+      }
+    })
+  })
+
+  return {
+    cellSize,
+    path
+  }
+}