React-PDF: How can I make sure that content flows dynamically to new pages instead of text flow in single page?

Question

I am using the react-pdf package to generate a multi-page PDF document in my React application. However, I am facing issues with dynamically setting margins, borders, and footer styling across different pages.I am using the react-pdf package to generate a multi-page PDF document in my React application. However, I am facing two issues:

1. Content Overflow:

   • Currently, all content is constrained to a single page instead of dynamically flowing to a new page when needed.

   • I want the content to automatically break onto a new page if it exceeds the available space.

2. Footer Placement:

   • I need to place a footer image at the bottom of each page without overlapping the content.

   Here is my current implementation:

import React from 'react';
import { View, Image } from '@react-pdf/renderer';
import styles from './styles';

const FirstPage = () => (
  <View style={styles.pageWrapper}>
    <Image style={styles.backgroundImage} src="/images/background.png" />
  </View>
);

export default FirstPage;

SecondPage Component

import React from 'react';
import { View, Image } from '@react-pdf/renderer';
import styles from './styles';
import { evaluatorDetails, propertyDetails, generalLawnCharacteristics } from './constantData';
import { PDFHeader } from './pdfHeading';
import ThreeInOneArea from './pdfLabelValueThreeInOne';
import BorderLine from './pdfSectionLine';
import PDFImageRender from './pdfImageTwoInOne';

const SecondPage = () => (
  <View style={styles.pageWrapper}>
    <View style={styles.pageBoxSection}>
      <PDFHeader headingText="1. Evaluation Details" />
      <View style={[styles.gridContainer, { marginTop: '5px' }]}>
        {Object.values(evaluatorDetails).map((option) => (
          <ThreeInOneArea key={option.value} label={option.label} text={option.text} />
        ))}
      </View>
      <BorderLine />

      <View style={{ marginTop: '25px' }}>
        <PDFHeader headingText="2. Property Details" />
        <View style={[styles.gridContainer, { marginTop: '5px' }]}>
          {Object.values(propertyDetails).map((option) => (
            <>
              <ThreeInOneArea label={option.label} text={option.text} style={option.style} />
              <PDFImageRender images={option} />
            </>
          ))}
        </View>
        <BorderLine />
      </View>

      <View style={{ marginTop: '25px' }}>
        <PDFHeader headingText="3. General Lawn Characteristics" />
        <View style={[styles.gridContainer, { marginTop: '5px' }]}>
          {Object.values(generalLawnCharacteristics).map((option) => (
            <ThreeInOneArea key={option.value} label={option.label} text={option.text} />
          ))}
        </View>
      </View>
    </View>
    <Image style={styles.backgroundGrassImage} src="/images/footerImageEachPage.png" />
  </View>
);

export default SecondPage;

enter image description here

Issue Summary

• How can I ensure that content automatically flows to a new page when it exceeds the available space?

• What is the best way to place a footer image at the bottom of each page without overlapping content?

Any guidance or best practices for handling this in react-pdf would be greatly appreciated!