how to align a svg element/checkbox beside a text in react pdf renderer?

Question

Hello I am pretty new to programming and I am trying to generate a PDF with react. I stuck at the issue to align a checkbox (I generate it with an svg polygon, please let me know if there is a better way) besides a text.

So this how i started: JS:

<Document>
<Page style={styles.body} size="A4">
<View style={{display: 'flex', justifyContent: 'center'}}>
<Svg style={styles.checkbox}>
   <Polygon style={styles.box}/>
</Svg>
<Text style={styles.text}>
  some text
</Text>
</View>
</Page>
</Document>

CSS:

const styles = StyleSheet.create({
 text: {
    margin: 14,
    fontSize: 14,
    textAlign: "left",
    fontFamily: "Helvetica",
    display: "inline-block",
  },
 checkbox: {
    height: 21,
    width: 31,
    display: 'inline-block',
  },
 box: {
    points:"20,10 30,10 30,20 20,20",
    stroke:"black",
    strokeWidth: 1,
  },
});

this is what i get:

I have try the suggestion from this question: text which I tried like this (it is a little bit messy sorry for that):

<Document>
<Page style={styles.body} size="A4">
<View style={{display: 'flex', justifyContent: 'center'}}>
<div className="layout">
  <p>
    <span className="svg-inline">
      <Svg style={styles.checkbox}>
         <Polygon
            style={styles.box}
         />
       </Svg>
     </span>
     <Text style={styles.text}>
       some text
     </Text>
  </p>
</div>
</View>
</Page>
</Document>

CSS:

.layout
  width: 50%;
  margin: 0 auto;
  border: 1px solid #750606;
}
.svg-inline{
  height:1em;
}

const styles = StyleSheet.create({
  text: {  //=.p-celsius
    margin: 14,
    fontSize: 14,
    textAlign: "left",
    fontFamily: "Helvetica",
  },
  checkbox: { // =.svg-inline svg
    height: 21,
    width: 131,
    display: 'inline-block',
  },
  box: {
    points:"20,10 30,10 30,20 20,20",
    stroke:"black",
    strokeWidth: 1,
},
});

But the result remains the same. Please I need help all other things I have tried changed nothing.

Answer 1

I found an other solution where I am using a already existing pdf with form fields/check boxes to realize my target.

import YourPDFForm from "../pdf/YourPDFForm .pdf";
//I have created a folder with the form pdf.
  const fillForm = async () => {
    // Step 1: Load the PDF form.
    const formUrl = YourPDFForm ;
    const formPdfBytes = await fetch(formUrl).then((res) => res.arrayBuffer());
    const pdfDoc = await PDFDocument.load(formPdfBytes);

    const form = pdfDoc.getForm();

    // Step 2: Set values for the form fields.
    const today = format(new Date(), "dd.MM.yyyy");
    form
      .getTextField("Text1")
      .setText(
        token.user.user_metadata.Text1-1 +
          ", " +
          token.user.user_metadata.Text1-2
      );
    form.getTextField("Text2").setText(token.user.user_metadata.Text2);
    form
      .getTextField("Text3")
      .setText(
        token.user.user_metadata.Text3-1 +
          " " +
          token.user.user_metadata.Text3-2 +
          " " +
          token.user.user_metadata.Text3-3
      );
    form
      .getTextField("Text4")
      .setText(
        token.user.user_metadata.Text4-1 +
          " " +
          token.user.user_metadata.Text4-2
      );
    form.getTextField("Text5").setText(token.user.Text5);
    form.getTextField("Text6").setText(token.user.user_metadata.Text6);
    form.getTextField("Text7").setText(token.user.user_metadata.Text7);
    form.getTextField("Text8").setText("01.12.2023 test");
    form.getTextField("Text9").setText("5");
    form.getTextField("Text10").setText("Anything, " + today);
    form.getTextField("Text11").setText("Anything test");
    form.getTextField("Text13").setText("11");
    form.getTextField("Text14").setText("2222");
    form.getTextField("Text15").setText("3333");
    form.getTextField("Text16").setText("4444");
    form.getTextField("Text17").setText("5555");
    form.getTextField("Text18").setText("66");
    form.getTextField("Text19").setText("Anything, " + today);

    // Step 4: Save the modified PDF.
    const pdfBytes = await pdfDoc.save();

    // Step 5: Create a `Blob` from the PDF bytes,
    const blob = new Blob([pdfBytes], { type: "application/pdf" });

    // Step 6: Create a download URL for the `Blob`.
    const url = URL.createObjectURL(blob);

    // Step 7: Create a link element and simulate a click event to trigger the download.
    const link = document.createElement("a");
    link.href = url;
    link.download = "YourFilledPDFName.pdf";
    link.click();
  };

I have added the function to the onClick event of the download button.