How can I render QR Code on a PDF?

I need to render a QR code on a PDF which my end-user can download. FOr creating the pdf I am using react-pdf/renderer.

Here is my code -

import React from "react";
import {Page, Text, View, Document, StyleSheet, Image} from "@react-pdf/renderer";
import { QRCode } from "react-qr-svg";


export function PdfDocument(props) {
    return (
        <Document>
        <Page size="A4">    
          <View>
            <Text>Section #1</Text>
          </View>
          <View>
            <Text>Section #2</Text>
            <QRCode
                bgColor="#FFFFFF"
                fgColor="#000000"
                level="Q"
                style={{ width: 256 }}
                value="some text"
            />
          </View>
        </Page>
      </Document>
    );
}

The above gives me the following error -

Error: Invalid element of type rect passed to PDF renderer

What I am doing wrong? How can I render a QR code on the fly onto a PDF?

[iCHAIT]

HI @ChengLam123

I solved it, but I guess there is no native way to solve it. I kind of did a dirty hack.

I laid out the HTML code and used a Qr Code generator (like this one), to render a QRcode in the HTML itself. Later, I converted the HTML to pdf.

[msand]

Also here: https://github.com/magicismight/react-native-svg-example/blob/master/examples/Svg.js#L153-L185