Merge pull request #7 from tokkozhin/dismiss-transparent-background-c…

…olor-for-qr-code feat: add renderBackground prop
tokkozhin · Dec 11, 2023 · b26dd87 · b26dd87
2 parents 86320b3 + eeaee5e
commit b26dd87
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -64,6 +64,7 @@ maskPattern                | undefined       | number                 |[Descript
 toSJISFunc                 | undefined       | function               |[Description](https://github.com/soldair/node-qrcode#tosjisfunc)
 errorCorrectionLevel       | 'M'            | 'L' \| 'M' \| 'Q' \| 'H' |[Description](https://github.com/soldair/node-qrcode#errorCorrectionLevel)
 renderCustomPieceItem      | undefined       | [RenderCustomPieceItem](#RenderCustomPieceItem) | Render custom piece of QR code. It must return svg component. If it defined, previous piece and eyes configurations won't be work
+renderBackground           | undefined       | (pieceSize: number, bitMatrix: number[][]) => SvgProps['children'] | Ability to add any additional svg components behind qr code
 children                   | undefined       | (pieceSize: number, bitMatrix: number[][]) => SvgProps['children'] | Ability to add any additional svg components as children
 ...rest `<Svg/>` props |
 

diff --git a/example/src/examples/DownloadQR.tsx b/example/src/examples/DownloadQR.tsx
@@ -1,10 +1,11 @@
 import React, { useRef } from 'react';
 
 import { StyleSheet, View, Pressable, Text, Alert } from 'react-native';
-import QRCodeStyled from 'react-native-qrcode-styled';
+import QRCodeStyled, { SVGGradient, SVGQRCodeStyledProps } from 'react-native-qrcode-styled';
 
 import * as FileSystem from 'expo-file-system';
 import * as MediaLibrary from 'expo-media-library';
+import { Defs, Rect } from 'react-native-svg';
 // also need to add MEDIA_LIBRARY permission for android
 // https://docs.expo.dev/versions/latest/sdk/media-library/#configuration-in-appjsonappconfigjs
 
@@ -38,9 +39,40 @@ export default function DownloadQR() {
     }
   };
 
+  const renderBackground: SVGQRCodeStyledProps['renderBackground'] = (pieceSize, matrix) => {
+    const size = matrix.length * pieceSize + 50;
+
+    return (
+      <>
+        <Defs>
+          <SVGGradient
+            id="bgGradient"
+            origin={[0, 0]}
+            size={size}
+            type={'linear'}
+            options={{
+              colors: ['#01fff2', '#b634e6'],
+              start: [-0.3, -0.3],
+              end: [0.7, 0.7],
+            }}
+          />
+        </Defs>
+
+        <Rect x={-25} y={-25} width={size} height={size} fill={'url(#bgGradient)'} />
+      </>
+    );
+  };
+
   return (
     <View style={styles.root}>
-      <QRCodeStyled ref={QRRef} data={'Download QR'} padding={25} pieceSize={8} />
+      <QRCodeStyled
+        ref={QRRef}
+        data={'Download QR'}
+        padding={25}
+        pieceSize={8}
+        color={'white'}
+        renderBackground={renderBackground}
+      />
 
       <Pressable
         onPress={handlePressDownload}

diff --git a/src/components/SVGQRCodeStyled.tsx b/src/components/SVGQRCodeStyled.tsx
@@ -40,6 +40,7 @@ export interface SVGQRCodeStyledProps extends QRCodeOptions, PieceOptions, SvgPr
   backgroundImage?: SVGImageProps;
   logo?: LogoOptions;
   children?: (pieceSize: number, bitMatrix: BitMatrix) => SvgProps['children'];
+  renderBackground?: (pieceSize: number, bitMatrix: BitMatrix) => SvgProps['children'];
 }
 
 function SVGQRCodeStyled(
@@ -68,6 +69,7 @@ function SVGQRCodeStyled(
     toSJISFunc,
     errorCorrectionLevel = 'M',
     children,
+    renderBackground,
     ...props
   }: SVGQRCodeStyledProps,
   ref?: ForwardedRef<Svg> | null
@@ -158,6 +160,8 @@ function SVGQRCodeStyled(
           </ClipPath>
         </Defs>
 
+        {renderBackground?.(pieceSize, bitMatrix)}
+
         <SVGImage
           x="0"
           y="0"
@@ -209,6 +213,8 @@ function SVGQRCodeStyled(
         </Defs>
       )}
 
+      {renderBackground?.(pieceSize, bitMatrix)}
+
       <G fill={gradient ? 'url(#gradient)' : color}>{renderPieces()}</G>
 
       {renderLogo()}