Add support for QR Code version and additionalProps

Example/src/App.tsx

@@ -27,6 +27,16 @@ const colorfulQRCODe = (
   </Description>
 );
 
+const versionedQRCode = (
+  <Description text="QR code with version and additional props">
+    <QRCode
+      value="Versioned QR code"
+      size={qrCodeSize}
+      version={25}
+    />
+  </Description>
+);
+
 const urlPngQRCode = (
   <Description text="QR code with PNG from url avatar">
     <QRCode
@@ -117,6 +127,7 @@ const App = () => {
         <Text style={styles.title}>Example usages of QRCode component</Text>
         {defaultQRCode}
         {colorfulQRCODe}
+        {versionedQRCode}
         {urlPngQRCode}
         {localPngQRCode}
         {localPngBackgroundColorQRCode}

README.md

@@ -1,4 +1,3 @@
-
 [![NPM](https://nodei.co/npm/react-native-qrcode-svg.png)](https://npmjs.org/package/react-native-qrcode-svg)
 
 # react-native-qrcode-svg
@@ -123,7 +122,8 @@ quietZone | 0 | quiet zone around the qr in pixels (useful when saving image to
 getRef          | null       | Get SVG ref for further usage
 ecl             | 'M'        | Error correction level
 onError(error)  | undefined  | Callback fired when exception happened during the code generating process
-
+version         | undefined  | QR Code version (1-40). Higher version = bigger QR code, more data.
+additionalProps | undefined  | Additional properties to pass directly to the underlying qrcode library.
 
 ## Saving generated code to gallery
  _Note: Experimental only ( not tested on iOS) , uses getRef() and needs [RNFS module](https://github.com/itinance/react-native-fs)_

index.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import type {ImageSourcePropType} from "react-native";
-import type {SvgProps} from "react-native-svg";
+import type { ImageSourcePropType } from "react-native";
+import type { SvgProps } from "react-native-svg";
 
-declare class QRCode extends React.PureComponent<QRCodeProps, any> {}
+declare class QRCode extends React.PureComponent<QRCodeProps, any> { }
 
 export interface QRCodeProps {
   /* what the qr code stands for */
@@ -45,6 +45,10 @@ export interface QRCodeProps {
   ecl?: "L" | "M" | "Q" | "H";
   /* error handler called when matrix fails to generate */
   onError?: Function;
+  /* QR Code version (1-40). Higher version = bigger QR code, more data. It automatically adjusts for best version size based on data entered.  */
+  version?: number;
+  /* Additional properties to pass directly to the underlying qrcode library. */
+  additionalProps?: Record<string, any>;
   /** testID for testing */
   testID?: string;
 }

src/__tests__/Matrix-test.js

@@ -19,3 +19,8 @@ it('generates with ecl:Q correctly', () => {
   const matrix = genMatrix('test', 'Q')
   expect(matrix).toMatchSnapshot()
 })
+
+it('generates with version and additionalProps correctly', () => {
+  const matrix = genMatrix('test', 'M', 5, { maskPattern: 2 })
+  expect(matrix).toMatchSnapshot()
+})

src/genMatrix.js

@@ -1,7 +1,10 @@
 import QRCode from 'qrcode'
 
-export default (value, errorCorrectionLevel) => {
-  const arr = Array.prototype.slice.call(QRCode.create(value, { errorCorrectionLevel }).modules.data, 0)
+export default (value, errorCorrectionLevel, version, additionalProps = {}) => {
+  const arr = Array.prototype.slice.call(
+    QRCode.create(value, { errorCorrectionLevel, version, ...additionalProps }).modules.data,
+    0
+  )
   const sqrt = Math.sqrt(arr.length)
   return arr.reduce((rows, key, index) => (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows, [])
 }

src/index.js

@@ -99,10 +99,15 @@ const QRCode = ({
   getRef,
   onError,
   testID,
+  // version = '' any number from 1 to 40, if left empty, auto selected based on data length
+  additionalProps,
 }) => {
   const result = useMemo(() => {
     try {
-      return transformMatrixIntoPath(genMatrix(value, ecl), size);
+      return transformMatrixIntoPath(
+        genMatrix(value, ecl, version, additionalProps),
+        size
+      );
     } catch (error) {
       if (onError && typeof onError === "function") {
         onError(error);
@@ -111,7 +116,7 @@ const QRCode = ({
         throw error;
       }
     }
-  }, [value, size, ecl]);
+  }, [value, size, ecl, version, additionalProps]);
 
   if (!result) {
     return null;